1. label元素

提高与用户的交互属性

隐式关联

显示关联

<form>
    <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">
</form>

2. fieldset和legend元素

<fieldset> 标签会在相关表单元素周围绘制边框,将表单进行分组.

<legend> 标签为 fieldset 元素定义标题,为其第一个子元素.

<form>
    <fieldset>
      <legend>Personalia:</legend>
      Name: <input type="text"><br>
      Email: <input type="text"><br>
      Date of birth: <input type="text">
    </fieldset>
  </form>

3. select和option元素

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表

<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 



<select>
  <option value="volvo" style="display:none">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  

上述例子展示了 <select> 的典型用法。元素中设置了 id 属性以将其与 label 元素关联在一起，提高可及性（accessibility）。name 属性表示提交到服务器的相关数据点的名字。每个菜单选项由 </select> 中的一个 `` 元素定义。

每个 <option> 元素都应该有一个 value 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 value 属性，则 value 值默认为元素中的文本。你可以在 </option><option> 元素中设置一个 selected 属性以将其设置为页面加载完成时默认选中的元素。

<select> 元素有一些用于控制元素的特有属性，例如 multiple 规定了能不能同时选中多个选项，size 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 required, disabled, autofocus 等。

还可以将 <option> 元素放在 `` 元素中以为下拉菜单创建不同的选项分组。

4. 参考

创建我的第一个表单

HTML </option></select> 元素

HTML 5 </option><option> 标签

HTML 表单

input中type=hidden