HTML 表单
在本教程中，您将学习如何在 HTML 中创建一个表单来收集用户输入。
什么是 HTML 表单
需要 HTML 表单来收集不同类型的用户输入，例如姓名、电子邮件地址、电话号码等联系方式或信用卡信息等详细信息。
表单包含称为控件的特殊元素，如输入框、复选框、单选按钮、提交按钮等。用户通常通过修改其控件来完成表单，例如 输入文本、选择项目等，并将此表单提交到 Web 服务器以进行进一步处理。
<form> 标签用于创建 HTML 表单。 下面是一个简单的登录表单示例：
<form>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</form>以下部分介绍了您可以在表单中使用的不同类型的控件。
Input 输入元素
这是 HTML 表单中最常用的元素。
这是 HTML 表单中最常用的元素。
它允许您指定各种类型的用户输入字段，具体取决于 type 属性。 输入元素可以是 text 字段, password 字段, checkbox, radio 按钮, submit 按钮, reset 按钮, 文件选择框 类型，也可以是 HTML5 中引入的几种新输入类型。
最常用的输入类型如下所述。
Text 文本字段
文本字段是允许用户输入文本的一行区域。
单行文本输入控件是使用 <input> 元素创建的，其 type 属性的值为 text。 这是用于获取用户名的单行文本输入示例：
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>— 上面示例的输出将如下所示：
注意： <label> 标签用于定义 <input> 元素的标签。 如果您希望您的用户输入多行，您应该使用 <textarea> 代替。
Password 密码字段
密码字段类似于文本字段。 唯一的区别是； 密码字段中的字符被屏蔽，即它们显示为星号或圆点。 这是为了防止其他人读取屏幕上的密码。 这也是一个使用 type 属性值为 password 的 <input> 元素创建的单行文本输入控件。
这是一个用于获取用户密码的单行密码输入示例：
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>— 上面示例的输出将如下所示：
Radio 单选按钮
单选按钮用于让用户从一组预定义的选项中准确选择一个选项。 它是使用 type 属性值为 radio 的 <input> 元素创建的。
以下是可用于收集用户性别信息的单选按钮示例：
<form>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</form>— 上面示例的输出将如下所示：
checkbox 复选框
复选框允许用户从一组预定义的选项中选择一个或多个选项。 它是使用 type 属性值为 checkbox 的 <input> 元素创建的。
以下是可用于收集用户爱好信息的复选框示例：
<form>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
</form>— 上面示例的输出将如下所示：
注意：如果要使单选按钮或复选框默认选中，可以在输入元素中添加属性checked，如 <input type="checkbox" checked>。
文件选择框
文件字段允许用户浏览本地文件并将其作为表单数据的附件发送。 诸如 Google Chrome 和 Firefox 之类的 Web 浏览器使用浏览按钮呈现文件选择输入字段，使用户能够浏览本地硬盘驱动器并选择文件。
这也是使用 <input> 元素创建的，其 type 属性值设置为 file。
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>— 上面示例的输出将如下所示：
提示：还有其他几种输入类型。 请查看 HTML5 新输入类型 章节，了解有关新引入的输入类型的更多信息。
Textarea 文本域
Textarea 是一个多行文本输入控件，允许用户输入多行文本。 多行文本输入控件是使用 <textarea> 元素创建的。
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>— 上面示例的输出将如下所示：
选择框
选择框是选项的下拉列表，允许用户从选项的下拉列表中选择一个或多个选项。 选择框是使用 <select> 元素和 <option> 元素创建的。
<select> 元素中的 <option> 元素定义了每个列表项。
<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>— 上面示例的输出将如下所示：
Submit 提交和 Reset 重置按钮
提交按钮用于将表单数据发送到 Web 服务器。 单击提交按钮时，表单数据被发送到表单的 action 属性中指定的文件以处理提交的数据。
重置按钮将所有表单控件重置为默认值。 通过在文本字段中输入您的姓名来尝试以下示例，然后单击提交按钮以查看它的运行情况。
<form action="action.asp" method="post">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
在上面的文本字段中输入您的姓名，然后单击提交按钮以查看它的运行情况。
注意：您还可以使用 <button> 元素创建按钮。 使用 <button> 元素创建的按钮功能类似于使用 input 元素创建的按钮，但它们通过允许嵌入其他 HTML 元素提供了更丰富的呈现可能性。
分组表单控件
您还可以使用 <legend> 元素对 Web 表单中逻辑相关的控件和标签进行分组。 将表单控件分组到类别使用户更容易找到使表单更加用户友好的控件。 让我们试试下面的例子，看看它是如何工作的：
<form>
<fieldset>
<legend>Contact Details</legend>
<label>Email Address: <input type="email" name="email"></label>
<label>Phone Number: <input type="text" name="phone"></label>
</fieldset>
</form>常用表单属性
下表列出了最常用的表单元素的属性：
| 属性 | 说明 |
|---|---|
name |
指定表单的名称。 |
action |
指定 Web 服务器上将用于处理通过表单提交的信息的程序或脚本的 URL。 |
method |
指定浏览器用于将数据发送到 Web 服务器的 HTTP 方法。 该值可以是 get（默认值）和 post。 |
target |
指定在哪里显示提交表单后收到的响应。 可能的值为 _blank, _self, _parent 和 _top。 |
enctype |
指定将表单提交到服务器时应如何编码表单数据。 仅当 method 属性的值为 post 时才适用。 |
还有其他几个属性，要了解它们，请参阅 <form> 标签参考。
注意： name 属性表示表单集合中的表单名称。 它的值在文档中的表单中必须是唯一的，并且不能是空字符串。
提示：通过 get 方法发送的所有数据都在浏览器的地址栏中可见。 但是，通过 post 发送的数据对用户是不可见的。 请查看 GET 与 POST 上的教程，详细了解这两种 HTTP 方法之间的区别。