HTML 表单
HTML 表单用于搜集不同类型的用户输入。
<form> 元素
HTML <form> 表单用于收集用户输入。
<form>
.
form elements
.
</form>
<form> 元素定义 HTML 表单。
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input> 元素
HTML <input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
这是本章中使用的类型:
| 类型 | 描述 |
|---|---|
| <input type="text"> | 定义常规文本输入。 |
| <input type="radio"> | 定义单选按钮输入（选择多个选择之一） |
| <input type="checkbox"> | 定义提交按钮（提交表单） |
| <input type="submit"> | 显示提交按钮（用于提交表单） |
| <input type="button"> | 显示可单击的按钮 |
注释:您稍后将在本教程学到更多有关输入类型的知识。
文本输入
<input type="text"> 定义用于文本输入的单行输入字段:
实例
具有文本输入字段的表单:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
亲自试一试 »
在浏览器中看起来是这样的:
注释: 表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
<label> 元素
注意上面例子中 <label> 元素的用法。
<label> 标签为许多表单元素定义了一个标签。
<label> 元素对于屏幕阅读器用户很有用，因为当用户关注输入元素时，屏幕阅读器会大声读出标签。
<label> 元素还可以帮助那些很难单击很小区域（例如单选按钮或复选框）的用户，因为当用户单击 <label> 元素中的文本时，它会切换单选按钮/复选框。
<label> 标签的 for 属性应该等于 input 元素的 id 属性，以便将它们绑定在一起。
单选按钮输入
<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一:
实例
带有单选按钮的表单:
<form>
<input type="radio" id="male" name="gender"
value="male">
<label for="male">Male</label><br>
<input
type="radio" id="female" name="gender" value="female">
<label
for="female">Female</label><br>
<input type="radio" id="other"
name="gender" value="other">
<label for="other">Other</label>
</form>
亲自试一试 »
单选按钮在浏览器看起来是这样的:
复选框
<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"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定:
实例
带有提交按钮的表单:
<form action="/action_page.php">
<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">
</form>
亲自试一试 »
在浏览器中看起来是这样的:
Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
如果省略 name 属性，则根本不会发送输入字段的值。
实例
本例只会提交 "First name" 输入字段:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
亲自试一试 »
