表单标签：

所有的表单内容，都要写在form标签里面
核心属性：type，不同的type决定了该输入框的方式、外观、规则等等

常见Type

明文：普通文本，type = “text”
暗文：隐藏文本密码，type=“password”
以上均可通过设置，value：表单默认值，maxlength：字符最大长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<form>
    <h2>01.简单表单</h2>
    账号：<input type="text">
    <br><br>
    密码：<input type="password">
    <hr>
</form>
</body>
</html>

单选框：只能选择一个结果，type=“radio”

如果是radio按钮直选一个，那么标签属性的name应该是同一个，比如男和女，作为性别信息，只能选一个，则他们的input都是相同的name属性值

    <h2>02.单选框</h2>
    性别：<input type="radio" name="Sex">男

    <input type="radio" name="Sex">女

多选框：多选结果，type=“checkbox”

    <h2>03.多选框</h2>
    爱好：<input type="checkbox" name="Basketball">Basketball

    <input type="checkbox" name="Game">Game

    <input type="checkbox" name="Running">Running
    <hr>

Label标签

所有表单元素都可以通过label标签进行绑定，通过label的属性值：for = 表单元素id

这么做的目的是，在点击label时，能够聚焦到绑定的Input输入框，例如点击账号，鼠标自动聚焦到其输入框了

    <h2>04.Label标签</h2>
    <label for="NameInput">账号：</label>
    <input type="text" id="NameInput">
    <hr>

Select标签

<h2>05.Select标签(不带optgroup)</h2>
    <select>
        <option>波多野结衣</option>
        <option>大桥未久</option>
        <option>三上悠亚</option>
        <option>椎名由奈</option>
    </select>

<h2>06.Select标签(带optgroup)</h2>
    <select>
        <optgroup label="女优">
            <option>波多野结衣</option>
            <option>大桥未久</option>
            <option>三上悠亚</option>
            <option>椎名由奈</option>
        </optgroup>

        <optgroup label="番号">
            <option>SNIS030</option>
            <option>TEK071</option>
            <option>MTK78</option>
            <option>NSS032</option>
        </optgroup>
    </select>

附

Code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<form>
    <h2>01.简单表单</h2>
    账号：<input type="text">
    <br><br>
    密码：<input type="password">
    <hr>


    <h2>02.单选框</h2>
    性别：<input type="radio" name="Sex">男


    <input type="radio" name="Sex">女


    <input type="radio" name="Sex">保密
    <hr>


    <h2>03.多选框</h2>
    爱好：<input type="checkbox" name="Basketball">Basketball


    <input type="checkbox" name="Game">Game


    <input type="checkbox" name="Running">Running
    <hr>


    <h2>04.Label标签</h2>
    <label for="NameInput">账号：</label>
    <input type="text" id="NameInput">
    <hr>


    <h2>05.Select标签(不带optgroup)</h2>
    <select>
        <option>波多野结衣</option>
        <option>大桥未久</option>
        <option>三上悠亚</option>
        <option>椎名由奈</option>
    </select>
    <hr>
    <br><br>
    <h2>06.Select标签(带optgroup)</h2>
    <select>
        <optgroup label="女优">
            <option>波多野结衣</option>
            <option>大桥未久</option>
            <option>三上悠亚</option>
            <option>椎名由奈</option>
        </optgroup>


        <optgroup label="番号">
            <option>SNIS030</option>
            <option>TEK071</option>
            <option>MTK78</option>
            <option>NSS032</option>
        </optgroup>
    </select>
    <hr>


    <h2>07.textarea标签</h2>
    <textarea cols="5" rows="2">我是原始内容</textarea>
</form>
</body>
</html>

【Html标签学习】表单标签

表单标签：

常见Type

Label标签

Select标签

猜你喜欢