HTML 表单元素

本章描述了所有不同的 HTML 表单元素。

HTML <form> 元素

HTML <form> 元素可以包含以下一个或多个表单元素：

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

<input> 元素

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

<input> 元素可以通过多种方式显示，具体取决于 type 属性。

实例

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

亲自试一试

type 属性的所有不同取值将在下一章介绍：HTML 输入类型。

<label> 元素

<label> 元素为多个表单元素定义标签。

<label> 元素对屏幕阅读器用户非常有用，因为当用户聚焦到输入元素时，屏幕阅读器会大声读出标签内容。

<label> 元素也帮助那些难以点击非常小区域（例如单选按钮或复选框）的用户——因为当用户点击 <label> 元素内的文本时，它会切换对应的单选按钮/复选框。

<label> 标签的 for 属性应该等于 <input> 元素的 id 属性，以便将它们绑定在一起。

<select> 元素

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

实例

<label for="cars">选择一辆车：</label>
<select id="cars" name="cars">
  <option value="volvo">沃尔沃</option>
  <option value="saab">萨博</option>
  <option value="fiat">菲亚特</option>
  <option value="audi">奥迪</option>
</select>

亲自试一试

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

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

要定义一个预选选项，请向该选项添加 selected 属性：

实例

<option value="fiat" selected>菲亚特</option>

亲自试一试

可见选项数：

使用 size 属性指定可见选项的数量：

实例

<label for="cars">选择一辆车：</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">沃尔沃</option>
  <option value="saab">萨博</option>
  <option value="fiat">菲亚特</option>
  <option value="audi">奥迪</option>
</select>

亲自试一试

允许多选：

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

实例

<label for="cars">选择一辆车：</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">沃尔沃</option>
  <option value="saab">萨博</option>
  <option value="fiat">菲亚特</option>
  <option value="audi">奥迪</option>
</select>

亲自试一试

<textarea> 元素

<textarea> 元素定义了一个多行输入字段（文本区域）：

实例

<textarea name="message" rows="10" cols="30">
猫在花园里玩耍。
</textarea>

亲自试一试

rows 属性指定文本区域中可见的行数。

cols 属性指定文本区域的可见宽度。

上面的 HTML 代码在浏览器中会显示为：

你也可以使用 CSS 来定义文本区域的大小：

实例

<textarea name="message" style="width:200px; height:600px;">
猫在花园里玩耍。
</textarea>

亲自试一试

<button> 元素

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

实例

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

亲自试一试

上面的 HTML 代码在浏览器中会显示为：

注意：请始终为 button 元素指定 type 属性。不同的浏览器可能对 button 元素使用不同的默认类型。

<fieldset> 和 <legend> 元素

<fieldset> 元素用于在表单中对相关数据进行分组。

<legend> 元素为 <fieldset> 元素定义标题。

实例

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="Bill"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Gates"><br><br>
    <input type="submit" value="提交">
  </fieldset>
</form>

亲自试一试

上面的 HTML 代码在浏览器中会显示为：

Personalia: First name:

Last name:


<datalist> 元素

<datalist> 元素为 <input> 元素指定一个预定义选项列表。

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

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

实例

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </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>

亲自试一试

HTML 表单元素

标签 描述
<form> 定义用于用户输入的 HTML 表单。
<input> 定义输入控件。
<textarea> 定义多行输入控件（文本区域）。
<label> 为 <input> 元素定义标签。
<fieldset> 在表单中对相关元素进行分组。
<legend> 为 <fieldset> 元素定义标题。
<select> 定义下拉列表。
<optgroup> 定义下拉列表中的一组相关选项。
<option> 定义下拉列表中的选项。
<button> 定义可点击的按钮。
<datalist> 为输入控件指定预定义选项列表。
<output> 定义计算的结果。

有关所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考页面。