HTML 表单元素
HTML <form> 元素可以包含以下一个或多个表单元素:
- <input>
- <label>
- <select>
- <textarea>
- <button>
- <fieldset>
- <legend>
- <datalist>
- <output>
- <option>
- <optgroup>
<input> 元素
最常用的表单元素之一是 <input> 元素。
元素可以通过 <input> 多种方式显示,具体取决于 type 属性。
示例
<form action="/third/http.php" method="GET">
<label for="fname">名字:</label>
<input type="text" id="fname" name="fname">
<input type="submit" value="提交">
</form>
<label> 元素
<label> 元素定义了几个表单元素的标签。
<label> 元素对屏幕阅读器用户很有用,因为当用户关注输入元素时,屏幕阅读器会大声读出标签。
<label> 元素还可以帮助难以单击非常小的区域(例如单选按钮或复选框)的用户 - 因为当用户单击 <label> 元素内的文本时,它会切换单选按钮/复选框。
标签的 for 属性 <label> 应该等于元素的 id 属性 <input> 才能将它们绑定在一起。
<select> 元素
该 <select> 元素定义了一个下拉列表:
示例
<label for="cars">选择一辆车:</label>
<select id="汽车" name="汽车">
<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" 多个>
<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;">
The cat was playing in the garden.
</textarea>
<button> 元素
该 <button> 元素定义了一个可点击的按钮:
示例
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
这就是上面的 HTML 代码在浏览器中的显示方式:
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
始终指定 type 按钮元素的属性。不同的浏览器可能对按钮元素使用不同的默认类型。
<fieldset> 和 <legend> 元素
<fieldset> 元素用于对表单中的相关数据进行分组。
<legend> 元素定义了该元素的标题 <fieldset> 。
示例
<form action="/third/http.php">
<fieldset>
<legend>Personalia:</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> 。
用户在输入数据时将看到预定义选项的下拉列表。
元素的 list 属性 <input> ,必须引用元素的 id 属性 <datalist> 。
示例
<form action="/third/http.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> 元素表示计算的结果(如脚本执行的计算)。
示例
执行计算并将结果显示在输出元素中:
<form action="/third/http.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>