HTML 表单元素
本章介绍了所有不同的 HTML 表单元素。
HTML <form> 元素
HTML <form> 元素可以包含以下一个或多个表单元素
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
<input> 元素
最常用的表单元素之一是 <input> 元素。
<input> 元素可以通过多种方式显示，具体取决于 type 属性。
所有不同的 type 属性值将在下一章中介绍：HTML 输入类型。
<label> 元素
<code class="w3-codespan"><label> 元素定义了多个表单元素的标签。
<code class="w3-codespan"><label> 元素对于屏幕阅读器用户很有用，因为当用户将焦点放在输入元素上时，屏幕阅读器会大声朗读标签。
<code class="w3-codespan"><label> 元素还有助于难以点击非常小区域（如单选按钮或复选框）的用户 - 因为当用户点击 <label> 元素内的文本时，它会切换单选按钮/复选框。
<code class="w3-codespan"><label> 标签的 for 属性应等于 <input> 元素的 id 属性，以便将它们绑定在一起。
<select> 元素
<code class="w3-codespan"><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>
自己尝试 »
<code class="w3-codespan"><option> 元素定义了一个可以选择的选项。
默认情况下，下拉列表中的第一个项目被选中。
要定义一个预先选择的选项，请将 selected 属性添加到选项中
可见值
使用 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> 元素
<code class="w3-codespan"><textarea> 元素定义了一个多行输入字段（一个文本区域）
<code class="w3-codespan">rows 属性指定文本区域中可见的行数。
<code class="w3-codespan">cols 属性指定文本区域的可见宽度。
这是上面的 HTML 代码在浏览器中的显示方式
你也可以使用 CSS 定义文本区域的大小
<button> 元素
<code class="w3-codespan"><button> 元素定义了一个可点击的按钮
这是上面的 HTML 代码在浏览器中的显示方式
注意：始终为按钮元素指定 type 属性。不同的浏览器可能对按钮元素使用不同的默认类型。
<fieldset> 和 <legend> 元素
<code class="w3-codespan"><fieldset> 元素用于在表单中对相关数据进行分组。
<code class="w3-codespan"><legend> 元素定义了 <fieldset> 元素的标题。
示例
<form action="/action_page.php">
<fieldset>
<legend>个人信息:</legend>
<label for="fname">姓名:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓氏:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
</fieldset>
</form>
自己尝试 »
这是上面的 HTML 代码在浏览器中的显示方式
<datalist> 元素
The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
示例
<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>
自己尝试 »
The <output> Element
The <output> element represents the result of a calculation (like one performed by a script).
示例
Perform a calculation and show the result in an <output> element
<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> | 定义一个计算结果 |
For a complete list of all available HTML tags, visit our HTML Tag Reference.
