HTML 表单
HTML 表单是文档的一部分，其中包含允许用户向 Web 服务器提交信息的交互式控件。
什么是 HTML 表单
HTML 表单需要收集不同类型的用户输入，例如姓名、电子邮件地址、电话号码或信用卡信息等详细信息等联系人详细信息。
表单包含称为控件的特殊元素，如输入框、复选框、单选按钮、提交按钮等。用户通常通过修改其控件来完成表单，例如输入文本、选择项目等，并将此表单提交给 Web 服务器进行处理。
<form> 标签用于创建一个 HTML 表单。这是一个登录表单的简单示例：
<form>
<fieldset>
<legend>Log In</legend>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</fieldset>
</form>
以下部分介绍了可以在表单中使用的不同类型的控件。
输入元素
这是 HTML 表单中最常用的元素。
它允许你指定各种类型的用户输入字段，具体取决于 type 属性。输入元素可以是文本字段 、 复选框 、 密码字段 、 单选按钮 、 提交按钮 、 重置按钮等类型，以及 HTML5 中引入的几种新输入类型。
最常用的输入类型如下所述。
文字字段
文本字段是允许用户输入文本的一行区域。
使用 <input> 元素创建单行文本输入控件，该元素的 type 属性值为 text 。以下是用于获取用户名的单行文本输入示例：
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>
- 上面示例的输出将如下所示：
注意： <label> 是用于定义元素 <input> 标签的标记。如果你希望用户输入多行，则应使用 <textarea>。
密码字段
密码字段类似于文本字段。唯一的区别是; 密码字段中的字符被屏蔽，即显示为星号或点。这是为了防止他人在屏幕上读取密码。这也是使用 <input> 元素的 type 属性值为 password 的单行文本输入控件。
以下是用于获取用户密码的单行密码输入示例：
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>
- 上面示例的输出将如下所示：
单选按钮
单选按钮用于让用户从预定义的选项集中精确选择一个选项。它是使用 <input> 元素的 type 属性值设置为 radio 元素来创建的。
<form>
<input type="radio" name="sex" id="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female">
<label for="female">Female</label>
</form>
- 上面示例的输出将如下所示：
注意： 如果你希望允许用户同时选择多个选项，则应使用复选框。
复选框
复选框允许用户从预定义的选项集中选择一个或多个选项。它是使用 <input> 元素的 type 属性值设置为 checkbox 来创建的。
<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>
- 上面示例的输出将如下所示：
文件选择框
文件字段允许用户浏览本地文件并将其作为表单数据的附件发送。它通常呈现为带有按钮的文本框，使用户可以浏览文件。但是，用户还可以在文本框中键入文件的路径和名称。
这也是使用 <input> 元素创建的，其元素 type 值设置为 file 。
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>
- 上面示例的输出将如下所示：
多行文本
Textarea 是一个多行文本输入控件，允许用户输入多行文本。使用 <textarea> 元素创建多行文本输入控件。
- 上面示例的输出将如下所示：
选择框
选择框是一个选项下拉列表，允许用户从下拉列表中选择一个或多个选项。使用 <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>
- 上面示例的输出将如下所示：
提交和重置按钮
提交按钮用于将表单数据发送到 Web 服务器。单击提交按钮时，表单数据将发送到表单的 action 属性中指定的文件以处理提交的数据。重置按钮将所有表单控件重置为默认值。
<form action="action.php" method="post" id="users">
<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 元素创建的按钮一样，但它们提供了更丰富的渲染可能性。
最常用的表单属性是：
| 属性 | 描述 |
|---|---|
name |
表格的名称。 |
action |
处理通过表单提交的信息的程序的 URL。 |
method |
浏览器用于提交表单的 HTTP 方法。可能的值是 get 和 post 。 |
target |
一个名称或关键字，指示将显示脚本结果的目标页面。保留的关键字 _blank ， _self ， _parent 和 _top 。 |
注意： name 包含该属性是为了向后兼容。你应该使用该 id 属性来标识元素。