HTML 表单元素

本章介绍了所有 HTML 表单元素，以及每种元素的具体用法。

HTML `<form>` 元素

HTML <form> 元素可以包含以下列表中的一种或多种表单元素：

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

`<input>` 元素

最常用的表单元素是 <input> 元素。

<input> 元素可以根据 type 属性显示为不同的输入组件。

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

下一章 HTML 输入类型介绍<input> 元素的所有 type 属性。

`<label>` 元素

<label> 元素为表单元素定义了一个标签，也就是一个输入字段的显示说明。

<label> 元素还可以帮助难以点击非常小的区域（例如单选按钮或复选框）的用户。因为当用户点击 <label> 的文本时，浏览器的焦点会自动跳到对应的表单输入元素。

<label> 标签通过 for 属性值（应该等于某个 <input> 元素的 id 属性值）绑定了对应的 <input> 元素。

`<select>` 元素

<select> 元素定义了一个下拉列表：

<label for="cars">选择一辆汽车:</label>
<select id="cars" name="cars">
  <option value="audi">比亚迪</option>
  <option value="audi">吉利</option>
  <option value="volvo">沃尔沃</option>
  <option value="audi">奥迪</option>
</select>

每一个 <option> 元素定义了一个可以选择的选项。

默认情况下会选中下拉列表中的第一项。

在 <option> 元素中使用 selected 属性会自动选择此项：

<option value="fiat" selected>Fiat</option>

显示数量：

使用 size 属性设置可见选项的数量：

<label for="cars">选择一辆汽车:</label>
<select id="cars" name="cars" size="3">
  <option value="audi">比亚迪</option>
  <option value="audi">吉利</option>
  <option value="volvo">沃尔沃</option>
  <option value="audi">奥迪</option>
</select>

size 的默认值为 1。

允许多选

使用 multiple 属性允许用户选择多个值：

<label for="cars">选择一辆汽车:</label>
<select id="cars" name="cars" size="3" multiple>
  <option value="audi">比亚迪</option>
  <option value="audi">吉利</option>
  <option value="volvo">沃尔沃</option>
  <option value="audi">奥迪</option>
</select>

`<textarea>` 元素

<textarea> 元素定义了一个多行文本输入区。

<textarea name="message" rows="10" cols="30">
请在这里输入多行文本，可以使用换行分隔段落 ……
</textarea>

rows 属性设置多行文本区域中可见的行数。

cols 属性设置多行文本区域的可见宽度（字符列数）。

除了通过 rows 和 cols 设置高度和宽度，您还可以使用 CSS 定义文本区域的大小。

<textarea name="message" style="width:200px; height:600px;">
请在这里输入多行文本，可以使用换行分隔段落 ……
</textarea>

`<button>` 元素

<button> 元素定义了一个可点击的按钮。

<button type="button" onclick="alert('Hello World!')">点我</button>

type 指示了按钮的类型，按钮的类型包括：

submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
reset: 此按钮重置所有组件为初始值。
button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
menu: 此按钮打开一个由指定 <menu> 元素进行定义的弹出菜单（此功能为实验功能，尚未发布最终版）。

!! 注意： 不同的浏览器可能对按钮元素使用不同的默认类型，所以不要省略 type 属性，

`<fieldset>` 和 `<legend>` 元素

<fieldset> 元素用于对表单中的相关数据进行分组，<legend> 元素则为 <fieldset> 元素设置一个标题。

<form action="/action_page.php">
  <fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名：</label><br />
    <input type="text" id="name" name="name" value="John" /><br />
    <label for="age">年龄：</label><br />
    <input type="text" id="age" name="age" value="Doe" /><br /><br />
    <input type="submit" value="提交" />
  </fieldset>
</form>

`<datalist>` 元素

<datalist> 元素定义选项列表，供 <input> 元素使用，整体效果和 <select> 相似，但是可以修改选择的值。

用户在输入数据时会看到预定义的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<form action="/action_page.php">
  <input list="browsers" />
  <datalist id="browsers">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
    <option value="Opera"></option>
    <option value="Safari"></option>
  </datalist>
</form>

`<output>` 元素

<output> 元素表示计算的结果（就像脚本执行的那样）。

执行计算并在 <output> 元素中显示结果：

<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" value="50" />
  100 +
  <input type="number" id="b" name="b" value="50" />
  =
  <output name="x" for="a b"></output> <br /><br />
  <input type="submit" />
</form>