轻松上手,快乐学习!

HTML Form 元素


本章描述所有 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">
亲自试一试 »

注释:下一章讲解所有 HTML 输入类型。


<label> 元素

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

<label> 元素对于屏幕阅读器用户很有用,因为当用户关注输入元素时,屏幕阅读器会大声读出标签。

<label> 元素还可以帮助那些很难单击很小区域(例如单选按钮或复选框)的用户,因为当用户单击 <label> 元素中的文本时,它会切换单选按钮/复选框。

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


<select> 元素(下拉列表)

<select> 元素定义下拉列表:

实例

<label for="cars">选择一辆车:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
亲自试一试 »

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

实例

<option value="fiat" selected>Fiat</option>
亲自试一试 »

可见值:

使用 size 属性指定可见值的数量:

实例

<label for="cars">选择一辆车:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
亲自试一试 »

允许多选:

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

实例

<label for="cars">选择一辆车:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">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!')">单击我!</button>
亲自试一试 »

以上 HTML 代码在浏览器中显示为:


注释: 始终为按钮元素指定 type 属性。不同的浏览器可能会对按钮元素使用不同的默认类型。


<fieldset> 和 <legend> 元素

<fieldset> 元素用于将表单中的相关数据分组。

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

实例

<form action="/action_page.php">
  <fieldset>
    <legend>个人资料:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
亲自试一试 »

这是上面的HTML代码在浏览器中的显示方式:

个人资料: First name:

Last name:



<datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

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

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

实例

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <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 实验

学习训练

练习题:

在下表中,添加一个名为 cars 的空下拉列表。

<form action="/action_page.php">
<>
</>
</form>

开始练习


HTML 表单元素

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

如需所有可用的 HTML 标签的完整列表,请访问 HTML 标签参考手册