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