HTML 表单
HTML 表单用于收集用户输入。用户输入通常被发送到服务器进行处理。
<form> 元素
HTML <form> 元素用于创建 HTML 表单以供用户输入
<form>
.
表单元素
.
</form>
<form> 元素是各种输入元素的容器，例如：文本字段、复选框、单选按钮、提交按钮等。
本章涵盖所有不同的表单元素：HTML 表单元素.
<input> 元素
HTML <input> 元素是使用最广泛的表单元素。
根据 type 属性，<input> 元素可以以多种方式显示。
以下是一些示例
| 类型 | 描述 |
|---|---|
| <input type="text"> | 显示单行文本输入字段 |
| <input type="radio"> | 显示单选按钮（用于从多个选项中选择一个） |
| <input type="checkbox"> | 显示复选框（用于从多个选项中选择零个或多个） |
| <input type="submit"> | 显示提交按钮（用于提交表单） |
| <input type="button"> | 显示可点击按钮 |
本章涵盖所有不同的输入类型：HTML 输入类型.
文本字段
<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 个字符。
<label> 元素
注意上面示例中使用 <label> 元素。
<label> 标签定义了多个表单元素的标签。
<label> 元素对屏幕阅读器用户很有用，因为当用户将焦点放在输入元素上时，屏幕阅读器会大声朗读标签。
<label> 元素还有助于难以点击非常小的区域（例如单选按钮或复选框）的用户 - 因为当用户点击 <label> 元素内的文本时，它会切换单选按钮/复选框。
<label> 标签的 for 属性应等于 <input> 元素的 id 属性，以将它们绑定在一起。
单选按钮
<input type="radio"> 定义了一个单选按钮。
单选按钮允许用户从有限数量的选项中选择一个。
示例
带有单选按钮的表单
<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 语言
复选框
<input type="checkbox"> 定义了一个 **复选框**。
复选框允许用户从有限数量的选项中选择零个或多个。
示例
带有复选框的表单
<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 代码在浏览器中的显示方式
提交按钮
<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 代码在浏览器中的显示方式
<input> 的 name 属性
请注意，每个输入字段必须具有 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 表单
