前端秘法基础式(HTML)(第二卷)

一.表单标签

1.表单域

2.表单控件

2.1input标签

2.2label/select/textarea标签

2.3无语义标签

三.特殊字符

一.表单标签

用来完成与用户的交互,例如登录系统

1.表单域

<form>通过action属性,将用户填写的数据转交给服务器

2.表单控件

2.1input标签

type属性:text文本输入框

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是标题</title>
</head>
<body>
    <!-- 这里是注释 -->
    <form action = "">
        姓名<input type = "text">
    </form>
</body>
</html>

type = password

这种情况下对用户输入的数据具有加密效果

type = radio单选框

html 复制代码

<body>
    <!-- 这里是注释 -->
    <form action = "">
        姓名<input type = "text">
        <br>
        密码<input type = "password">
        <br>
        性别<input type = "radio" name = "gender">男
        <input type = "radio" name = "gender">女
    </form>
</body>

附加相同的name属性,只能选择一个,当加入checked = "checked"则可以默认一个选项

type = checkbox复选框可以选择多个选项

html 复制代码

 <form action = "">
        姓名<input type = "text">
        <br>
        密码<input type = "password">
        <br>
        性别<input type = "radio" name = "gender" checked = "checked">男
        <input type = "radio" name = "gender">女
        <br>
        爱好
        <input type = "checkbox">吃饭
        <input type = "checkbox">睡觉
        <input type = "checkbox">打豆豆
    </form>

type = button普通按钮(配合JS监听用户操作)

html 复制代码

<form action = "">
        姓名<input type = "text">
        <br>
        密码<input type = "password">
        <br>
        性别<input type = "radio" name = "gender" checked = "checked">男
        <input type = "radio" name = "gender">女
        <br>
        爱好
        <input type = "checkbox">吃饭
        <input type = "checkbox">睡觉
        <input type = "checkbox">打豆豆
        <br>
        <input type = "button" value="                     登录                     " onclick="alert('登录成功')">
    </form>

type = submit/reset提交/重置

html 复制代码

<form action = "https://www.baidu.com/">
        姓名<input type = "text">
        <br>
        密码<input type = "password">
        <br>
        <input type = "submit">
        <input type = "reset">
    </form>

2.2label/select/textarea标签

label标签通常搭配单选框使用,与单选框对应的文本内容进行绑定

select标签是下拉菜单框

textarea标签是可变化的文本框,超出默认行数就会出现滚动条

html 复制代码

<form action = "https://www.baidu.com/">
        姓名<input type = "text">
        <br>
        密码<input type = "password">
        <br>
        性别<input type = "radio" name = "gender" id = "male">
        <label for="male">男</label>
        <input type = "radio" name = "gender" id = "female">
        <label for="female">女</label>
        <br>
        出生年份
        <select>
            <option>--请选择出生年份--</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
            <option>2004</option>
            <option>2005</option>
        </select>
        <br>
        个人经历
        <br>
        <textarea rows="2" cols="30"></textarea>
        <br>
        <input type = "submit">
        <input type = "reset">
    </form>

2.3无语义标签

有两种

div独占一行(可以替代<br>)

span不独占一行

html 复制代码

<body>
    <!-- 这里是注释 -->
    <form action = "https://www.baidu.com/">
        <div>
            姓名<input type = "text">
        </div>
        <div>
            密码<input type = "password">
        </div>
        <div>
            性别<input type = "radio" name = "gender" id = "male">
            <label for="male">男</label>
            <input type = "radio" name = "gender" id = "female">
            <label for="female">女</label>
        </div>
        <div>
            出生年份
            <select>
                <option>--请选择出生年份--</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
                <option>2005</option>
            </select>
        </div>
        <div>个人经历</div>
        <div>
            <textarea rows="2" cols="30"></textarea>
        </div>
        <div>
            <input type = "submit">
            <input type = "reset">
        </div>
    </form>
</body>

三.特殊字符

在html中如何表示空格,<>,&呢,肯定不能直接表示,因为html会将多余的空格字符叠加为一个,<>又会和标签符号混淆,那么我们需要用额外的方法来表示

空格&nbsp

<&lt <&gt & &amp

看一下效果