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>

- 上面示例的输出将如下所示:

HTML 文本输入字段

注意: <label> 是用于定义元素 <input> 标签的标记。如果你希望用户输入多行,则应使用 <textarea>

密码字段

密码字段类似于文本字段。唯一的区别是; 密码字段中的字符被屏蔽,即显示为星号或点。这是为了防止他人在屏幕上读取密码。这也是使用 <input> 元素的 type 属性值为 password 的单行文本输入控件。

以下是用于获取用户密码的单行密码输入示例:

<form>
    <label for="user-pwd">Password:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>

- 上面示例的输出将如下所示:

HTML 密码输入字段

单选按钮

单选按钮用于让用户从预定义的选项集中精确选择一个选项。它是使用 <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>

- 上面示例的输出将如下所示:

HTML 收音机按钮

注意: 如果你希望允许用户同时选择多个选项,则应使用复选框。

复选框

复选框允许用户从预定义的选项集中选择一个或多个选项。它是使用 <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>

- 上面示例的输出将如下所示:

HTML 复选框

文件选择框

文件字段允许用户浏览本地文件并将其作为表单数据的附件发送。它通常呈现为带有按钮的文本框,使用户可以浏览文件。但是,用户还可以在文本框中键入文件的路径和名称。

这也是使用 <input> 元素创建的,其元素 type 值设置为 file

<form>
    <label for="file-select">Upload:</label>
    <input type="file" name="upload" id="file-select">
</form>

- 上面示例的输出将如下所示:

HTML 文件选择字段

多行文本

Textarea 是一个多行文本输入控件,允许用户输入多行文本。使用 <textarea> 元素创建多行文本输入控件。


- 上面示例的输出将如下所示:

HTML 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>

- 上面示例的输出将如下所示:

HTML 选择下拉列表

提交和重置按钮

提交按钮用于将表单数据发送到 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>

- 上面示例的输出将如下所示:

HTML 提交和重置按钮

在上面的文本字段中键入你的姓名,然后单击“提交”按钮以查看其实际操作。

注意: 你还可以使用 <button> 元素创建按钮。使用 <button> 元素函数创建的按钮就像使用 input 元素创建的按钮一样,但它们提供了更丰富的渲染可能性。

最常用的表单属性是:

属性 描述
name 表格的名称。
action 处理通过表单提交的信息的程序的 URL。
method 浏览器用于提交表单的 HTTP 方法。可能的值是 getpost
target 一个名称或关键字,指示将显示脚本结果的目标页面。保留的关键字 _blank_self_parent_top

注意: name 包含该属性是为了向后兼容。你应该使用该 id 属性来标识元素。