HTML5 之 表单高级应用

label 的使用

用户点击 <label> 里的 “姓名”时 输入框立即获得焦点

隐式连接

<input> 包裹在 <label> 标签里

<form action="">
    <label> 姓名 <input type="text"/></label>
</form>

显示连接

通过 label的 for 属性，把 input 连接起来。

<form action="">
    <!-- <input> 标签的ID -->
    <label for="name"> 姓名 </label> <input type="text" id="name"/>
</form>

表单内容分组

表单元素包裹在 <fieldset> 里面

<fieldset id="">
    <legend>个人信息</legend>

</fieldset>

小例子

<form action="">
    <fieldset id="">
        <legend>个人信息</legend>
            <label for="name"> 姓名 </label> <input type="text" id="name"/>
            <br>
            <label for="sex"> 性别 </label> <input type="text" id="sex"/>
    </fieldset>
</form>

下拉框分组

当下拉框太多的时候，是一个不错的方式

<form action="">
    <label> 前端 </label>
        <select name="">
            <optgroup label="前端三剑客">
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="Js">Js</option>
            </optgroup>
            <optgroup label="框架">
                <option value="Vue">Vue</option>
                <option value="LayUI">LayUI</option>
            </optgroup>
        </select>
</form>