如何创建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属性中指定的文件以处理提交的数据。

重置按钮将所有表单控件重置为默认值。通过在文本字段中输入您的姓名来尝试以下示例，然后单击提交按钮以查看它的运行情况。