文章目录
- HTML 表单元素
- HTML `<form>` 元素
- `<input>` 元素
- `<label>` 元素
- `<select>` 元素
- <option> 元素定义一个可选择的选项。
- `<textarea>` 元素
- `<button>` 元素
- `<fieldset>` 和 `<legend> `元素
- `<datalist>` 元素
- `<output>` 元素
- HTML 表单元素
- 总结
HTML 表单元素
本章介绍所有不同的 HTML 表单元素。
HTML <form>
元素
HTML 元素可以包含以下一个或多个表单元素:
<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">
<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>
元素定义一个可选择的选项。
默认情况下,选择下拉列表中的第一个项目。
要定义预选选项,请将 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 属性指定文本区域的可见宽度。
使用 CSS 定义文本区域的大小:
示例
<textarea name="message" style="width:200px; height:600px;">
猫在花园里玩耍。
</textarea>
<button>
元素
<button>
元素定义一个可点击的按钮:
示例
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
注意:始终为按钮元素指定 type 属性。不同的浏览器可能对按钮元素使用不同的默认类型。
<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="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="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> | 定义 元素的标签 |
<fieldset> | 将表单中的相关元素分组 |
<legend> | 定义 元素的标题 |
<select> | 定义下拉列表 |
<optgroup> | 定义下拉列表中的一组相关选项 |
<option> | 定义下拉列表中的选项 |
<button> | 定义可点击按钮 |
<datalist> | 指定输入控件的预定义选项列表 |
<output> | 定义计算结果 |
总结
本文介绍了的html表单元素使用,如有问题欢迎私信和评论