HTML 表单元素

本章描述所有不同的 HTML 表单元素。

HTML <form> 元素

HTML<form>元素可以包含以下一个或多个表单元素：

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

<input> 元素

最常用的表单元素之一是<input>元素。

这个<input>元素可以通过多种方式显示，具体取决于type属性。

所有不同的值type属性将在下一章中介绍：HTML 输入类型。

<label> 元素

这个<label>element 定义了多个表单元素的标签。

这个<label>元素对于屏幕阅读器用户很有用，因为当用户聚焦于输入元素时，屏幕阅读器会大声读出标签。

这个<label>元素还可以帮助那些难以单击非常小的区域（例如单选按钮或复选框）的用户 - 因为当用户单击该区域内的文本时<label>元素，它切换单选按钮/复选框。

这个for的属性<label>标签应该等于id的属性<input>将它们绑定在一起的元素。

<select> 元素

这个<select>元素定义一个下拉列表：

这个<option>元素定义了一个可以选择的选项。

默认情况下，选择下拉列表中的第一项。

要定义预选选项，请添加selected选项的属性：

可见值：

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

允许多项选择：

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

<textarea> 元素

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

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

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

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

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

<button> 元素

这个<button>元素定义了一个可点击的按钮：

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

<fieldset> 和 <legend> 元素

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

这个<legend>元素定义了标题 <fieldset>元素。

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

<datalist> 元素

这个<datalist>元素指定预定义选项的列表<input>元素。

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

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

<输出> 元素

这个<output>元素表示计算的结果（如脚本执行的结果）。

HTML练习

HTML 表单元素