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

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

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

在用户点击提交按钮后, 浏览器向 <form> 元素的 action 属性 表单控件的所有数据

您还可以将 <input> 元素与 type="submit"(而非 <button> 元素)搭配使用。 输入的外观和行为与 <button> 类似。不要使用 <label> 元素来描述 对于 <input>,请改用 value 属性。

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

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

检查您的理解情况

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

如何将 <label> 连接到表单控件?

for='color'(针对 <label>)以及 id='color'(针对 <input>)。
name='color'(针对 <label>)以及 for='color(针对 <input>)。
for='color'(针对 <label>)以及 name='color'(针对 <input>)。
id='color'(针对 <label>)以及 for='color'(针对 <input>)。

您使用什么来实现多行表单控件?

<textarea> 元素。
包含 type='multi-line'<input> 元素。
包含 type='long'<input> 元素。
<text> 元素。

如何提交表单?

使用 Enter 键。
点击带有 type='submit'<input> 元素。
以上全部。
点击 <button> 元素。

资源