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

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

什么是表单元素？

您会看到两个 <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">

标签元素上的 for 属性与输入上的 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。

输入类型

表单控件有多种类型，所有控件均包含适用于不同浏览器和平台的实用内置功能。浏览器会根据 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>

用户点击 Submit 按钮后，浏览器会使用表单控件中的所有数据向 <form> 元素的 action 属性中指定的网址发出请求。

您还可以将 <input> 元素与 type="submit" 一起使用，而不是 <button> 元素。输入的外观和行为与 <button> 类似。请改为使用 value 属性，而不是使用 <label> 元素来描述 <input>。

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

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

检查您的掌握程度

测试您对表单元素知识的掌握情况

如何将 <label> 与表单控件相关联？

for='color'（在<label>上）和name='color'（在<input>上）。
再试一次！
for='color'（在<label>上）和id='color'（在<input>上）。
正确！
id='color'（在<label>上）和for='color'（在<input>上）。
再试一次！
name='color'（在<label>上）和for='color（在<input>上）。
再试一次！

您使用什么功能来实现多行表单控件？

包含 type='multi-line' 的 <input> 元素。
再试一次！
<text> 元素。
再试一次！
<textarea> 元素。
🎉
包含 type='long' 的 <input> 元素。
再试一次！

如何提交表单？

点击某个 <button> 元素。
没错，这是一种选择。
使用 Enter 键。
没错，这是一种选择。
点击包含 type='submit' 的 <input> 元素。
没错，这是一种选择。
以上二者兼用。
正确，所有答案都是用于提交表单的选项。

资源