共计 3856 个字符,预计需要花费 10 分钟才能阅读完成。
在本教程中,您将学习如何在 HTML 中创建一个表单来收集用户输入。本文章主要包括 12 个知识点:什么是 HTML 表单、input 元素、文本域、密码域、单选按钮 radio、复选框 checkbox、文件选择框 file、Textarea、选择框 select、提交和重置按钮、分组表单控件及常用表单属性。
什么是 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 方法之间的区别。