如何创建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 表单中最常用的元素。
它允许您根据type属性指定各种类型的用户输入字段。输入元素的类型可以是文本字段text、密码字段password、复选框checkbox、单选按钮radio、提交按钮submit、重置按钮reset、文件选择框select，以及HTML5 中引入的几种新输入类型。
最常用的input类型如下所述。
文本输入框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元素，例如<input type="checkbox" checked>.
文件选择框file
文件字段允许用户浏览本地文件并将其作为表单数据的附件发送。诸如 Google Chrome 和 Firefox 之类的 Web 浏览器使用浏览按钮呈现文件选择输入字段，使用户能够浏览本地硬盘驱动器并选择文件。
这也是使用type属性值设置为file的<input>元素创建的。
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>
上述示例的输出将如下所示：
提示：还有其他几种input类型。请查看有关HTML5 新input类型的章节，以了解有关新引入的输入类型的更多信息。
文本区域Textarea
Textarea 是一个多行文本输入控件，允许用户输入多行文本。多行文本输入控件是使用<textarea>元素创建的。
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>
上述示例的输出将如下所示：
选择框select
选择框是选项的下拉列表，允许用户从选项的下拉列表中选择一个或多个选项。选择框是使用<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">
<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>元素创建的按钮功能类似于使用输入元素创建的按钮，但它们通过允许嵌入其他 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 方法之间的区别。