帮助用户在表单中输入数据

使用集合保持井井有条 根据您的偏好保存内容并对其进行分类。

要使表单可交互，您需要添加表单元素。其中包含用于输入和选择数据的控件、描述控件的元素、对字段进行分组的元素以及用于提交表单的按钮。

什么是表单元素？

您会看到两个 <input> 元素，<input type="text"> 和 <input type="file">。为什么它们看起来不同？

根据元素名称和 type 属性，浏览器会显示不同的用户界面，使用不同的验证规则，并提供许多其他功能。使用适当的表单控件有助于您构建更好的表单。

表单元素的标签

假设您想添加一个输入框，用户可以在其中输入他们最喜欢的颜色。为此，您需要向表单中添加一个 <input> 元素。但是，用户如何知道他们应该填写自己最喜欢的颜色呢？

要描述表单控件，请为每个表单控件使用一个 <label>。

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

label 元素上的 for 属性与 input 元素上的 id 属性相匹配。

捕获用户输入

顾名思义，<input> 元素用于收集用户的输入。

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

如前所述，id 属性将 <input> 连接到 <label>。那么此示例中的 name 和 type 属性呢？

name 属性

使用 name 属性来标识用户使用控件输入的数据。如果您提交表单，则此名称会包含在请求中。假设您将表单控件命名为 mountain，并且用户输入了 Gutenberg，则请求会将此信息作为 mountain=Gutenberg 包含在内。

尝试更改表单控件的名称为 hill。如果您正确执行此操作并提交表单，则 hill 将在 URL 中可见。

输入类型

有不同的表单控件类型，所有这些类型都具有可在不同浏览器和平台中使用的实用内置功能。根据 type 属性，浏览器会呈现不同的用户界面、显示不同的屏幕键盘、使用不同的验证规则等等。让我们看看如何更改类型。

通过使用 type="checkbox"，浏览器现在会呈现复选框而不是文本字段。复选框还带有其他属性。您可以设置 checked 属性，将其显示为已选中状态。

您可以选择各种其他类型。我们将在后面的模块中详细介绍。

允许多行文本

假设您需要一个字段，用户可以在其中写评论。为此，如果他们可以输入多行文本，那不是很好吗？这就是 <textarea> 元素的用途。

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

从选项列表中选择

如何为用户提供一个选项列表供其选择？您可以使用 <select> 元素来实现此目的。

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

首先，添加一个 <select> 元素。与所有其他表单控件一样，使用 id 属性将其连接到 <label>，并使用 name 属性为其指定唯一名称。

在 <select> 元素的开始和结束标记之间，您可以添加多个 <option> 元素，每个元素代表一个选择。

每个选项都有一个唯一的 value 属性，因此您可以在处理表单数据时区分它们。option 元素内的文本是人类可读的值。

如果您使用此 <select> 提交表单而不更改选择，则请求将包含 color=orange。但是浏览器如何知道应使用哪个选项呢？

除非满足以下条件，否则浏览器将使用列表中的第一个选项：

• 一个 <option> 元素具有 selected 属性。
• 用户选择另一个选项。

预选一个选项

使用 selected 属性，您可以预选一个选项。这将成为默认选项，而与 <option> 元素的定义顺序无关。

对表单控件进行分组

有时您需要对表单控件进行分组。您可以使用 <fieldset> 元素来执行此操作。

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

您是否注意到 <fieldset> 元素内的 <legend> 元素？您认为它用于什么？

如果您的答案是“描述表单控件组”，那么您答对了！

每个 <fieldset> 元素都需要一个 <legend> 元素，就像每个表单控件都需要一个关联的 <label> 元素一样。<legend> 也必须是 <fieldset> 中的第一个元素。在 <legend> 元素之后，您可以定义应作为组一部分的表单控件。

提交表单

在学习了如何添加表单控件以及对它们进行分组之后，您可能想知道用户如何提交表单？

第一个选项是使用 <button> 元素。

<button>Submit</button>

用户点击提交按钮后，浏览器会向 <form> 元素的 action 属性中指定的 URL 发出请求，其中包含来自表单控件的所有数据。

您还可以使用 type="submit" 的 <input> 元素而不是 <button> 元素。input 元素的外观和行为与 <button> 完全一样。与其使用 <label> 元素来描述 <input>，不如使用 value 属性。

<input type="submit" value="Submit">

此外，当表单字段具有焦点时，也可以使用 Enter 键提交表单。

检查您的理解情况

测试您对表单元素的知识

资源

• label 元素
• input 元素
• textarea 元素
• select 元素
• fieldset 元素
• button 元素