2021/12/07 【017】 label标签，fieldset标签，legend标签 ，select标签 ，option标签 ，optgroup 标签

0. label 标签

  1）在 label 标签内点击文本，光标就会自动聚焦到它后面对应的 input 标签中。

　　<label>你叫什么名字：<input type="text" name="name"></label><br><br>

　　<label>你是不是**：<input type="text" name="**"></label><br><br>

　　<button type="submit">提交</button>

　　这种没有说白，但实际上又有联系的包裹体验，叫做隐式关联。

  2）label 标签里面有一个 for 属性，使用它的值来指定另一个标签的 id 属性值，因而产生的关联叫显式关联。

　 　<label for="male">Male</label><input type="radio" name="sex" id="male" />

        <br />

        <label for="female">Female</label><input type="radio" name="sex" id="female" />

 

1. fieldset 标签和 legend 标签

　　fieldset 标签可将表单内的相关标签进行分组，浏览器会以特殊方式来划分它们。legend 标签用于为 fieldset 标签定义说明文字。

　　<fieldset>

            <legend>基本信息</legend>

            <label for="name">姓名：</label><input type="text" name="name" id="name"><br><br>

            <label for="sex">性别：</label><input type="text" name="sex" id="sex"><br><br>

            <label for="age">年龄：</label><input type="text" name="age" id="age">

        </fieldset>

2.select 标签和 option 标签

　　select标签用于创建单选或多选菜单, option 标签用于定义菜单中的选项。

    　<select name="sex">

       　　 <option value="male">男</option>

      　　  <option value="female">女</option>

        </select>

 

3.optgroup 标签

　　下拉列表的选项可能比较多，可以使用 optgroup 标签进行分组

<select>

        <optgroup label="零基础入门学习Web（Html5+Css3）">

            <option value="H5001" disabled=disabled>第一讲</option>

            <option value="H5002" label=nini>第二讲</option>

        </optgroup>

        <optgroup label="零基础入门学习Web（JavaScript）">

            <option value="JS001">第一讲</option>

            <option value="JS002">第二讲</option>

        </optgroup>

    </select>