HTML 表单元素
本章描述所有 HTML 表单元素。
HTML <form> 元素
HTML <form> 元素可以包含以下一个或多个表单元素:
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
<input> 元素
最重要的表单元素是 <input> 元素。
<input> 元素根据不同的 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">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
亲自试一试 »
<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项。
可见值:
使用 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> 元素定义多行输入字段（文本域）:
rows 属性指定文本区域中可见的行数。
cols 属性指定文本区域的可见宽度。
这是上面的 HTML 代码在浏览器中的显示方式:
您还可以使用 CSS 定义文本区域的大小:
<button> 元素
<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代码在浏览器中的显示方式:
<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 实验
HTML 表单元素
| 标签 | 描述 |
|---|---|
| <form> | 定义用于用户输入的HTML表单 |
| <input> | 定义输入控件 |
| <textarea> | 定义多行输入控件（文本区域） |
| <label> | 定义 <input> 元素的标签 |
| <fieldset> | 将窗体中的相关元素分组 |
| <legend> | 定义 <fieldset> 元素的标题 |
| <select> | 定义下拉列表 |
| <optgroup> | 在下拉列表中定义一组相关选项 |
| <option> | 在下拉列表中定义选项 |
| <button> | 定义可单击的按钮 |
| <datalist> | 指定输入控件的预定义选项列表 |
| <output> | 定义计算结果 |
如需所有可用的 HTML 标签的完整列表，请访问 HTML 标签参考手册。
