HTML 表单
HTML 表单用于收集用户输入。用户输入通常会被发送到服务器进行处理。
The <form> Element
HTML <form> 元素用于创建用于用户输入的 HTML 表单。
<form>
.
表单元素
.
</form>
The <form> 元素是一个包含不同类型输入元素的容器，例如：文本字段、复选框、单选按钮、提交按钮等。
本章涵盖了所有不同的表单元素：HTML 表单元素。
The <input> Element
HTML <input> 元素是最常用的表单元素。
根据 type 属性的不同，<input> 元素可以显示为多种样式。
以下是一些示例
| 类型 | 描述 |
|---|---|
| <input type="text"> | 显示一个单行文本输入字段 |
| <input type="radio"> | 显示一个单选按钮（用于从多个选项中选择一个） |
| <input type="checkbox"> | 显示一个复选框（用于从多个选项中选择零个或多个） |
| <input type="submit"> | 显示一个提交按钮（用于提交表单） |
| <input type="button"> | 显示一个可点击的按钮 |
本章涵盖了所有不同的输入类型：HTML 输入类型。
文本字段
The <input type="text"> 定义了一个用于文本输入的单行输入字段。
示例
一个带有文本输入字段的表单
<form>
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname">
</form>
自己动手试一试 »
以上 HTML 代码在浏览器中的显示效果如下
注意：表单本身不可见。另请注意，输入字段的默认宽度为 20 个字符。
The <label> Element
注意到上面示例中使用了 <label> 元素。
The <label> 标签为许多表单元素定义了一个标签。
The <label> 元素对屏幕阅读器用户很有用，因为当用户聚焦在输入元素上时，屏幕阅读器会大声朗读标签。
The <label> 元素还有助于那些难以点击非常小的区域（如单选按钮或复选框）的用户——因为当用户点击 <label> 元素内的文本时，它会切换单选按钮/复选框。
The <label> 标签的 for 属性应等于 <input> 元素的 id 属性，以将它们绑定在一起。
单选按钮
The <input type="radio"> 定义了一个单选按钮。
单选按钮允许用户选择有限选项中的 ONE。
示例
带有单选按钮的表单
<p>选择您最喜欢的 Web 语言：</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
自己动手试一试 »
以上 HTML 代码在浏览器中的显示效果如下
选择您最喜欢的 Web 语言
复选框
The <input type="checkbox"> 定义了一个复选框。
复选框允许用户选择有限选项中的 ZERO 个或多个选项。
示例
带有复选框的表单
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> 我有一辆自行车</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> 我有一辆汽车</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> 我有一艘船</label>
</form>
自己动手试一试 »
以上 HTML 代码在浏览器中的显示效果如下
The Submit Button
The <input type="submit"> 定义了一个用于将表单数据提交到表单处理程序的按钮。
表单处理程序通常是服务器上带有用于处理输入数据的脚本的文件。
表单处理程序在表单的 action 属性中指定。
示例
带有提交按钮的表单
<form action="/action_page.php">
<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="提交">
</form>
自己动手试一试 »
以上 HTML 代码在浏览器中的显示效果如下
The Name Attribute for <input>
请注意，每个输入字段都必须有一个 name 属性才能被提交。
如果省略 name 属性，则不会发送输入字段的值。
示例
此示例不会提交“名字”输入字段的值：
<form action="/action_page.php">
<label for="fname">名:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="提交">
</form>
自己动手试一试 »
视频：HTML 表单
