HTML Form 元素

本章描述所有 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> 元素定义下拉列表：

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

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

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

可见值:

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

允许多选:

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

<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）：

rows 属性指定文本区域中可见的行数。

cols 属性指定文本区域的可见宽度。

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

您还可以使用 CSS 定义文本区域的大小：

<button> 元素

<button> 元素定义可点击的按钮：

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

<fieldset> 和 <legend> 元素

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

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

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

<datalist> 元素

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

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

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

<output> 元素

<output> 元素表示计算结果（类似于脚本执行的计算）。

HTML 实验

HTML 表单元素