如需使表单具有互动性,您需要添加表单元素。其中包括用于输入和选择数据的控件、描述控件的元素、对字段进行分组的元素,以及用于提交表单的按钮。
什么是表单元素?
您会看到两个 <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>
元素。