其他表单控件
现在，我们将详细了解非<input>表单元素的功能，从下拉列表和多行文本字段等其他控件类型，到其他有用的表单功能，例如<output>元素（我们已经在上一篇文章中看到其作用）和进度条。
| 预备知识 | 对 HTML 的基本理解。 |
|---|---|
| 目标 | 了解非<input>表单功能，以及如何使用 HTML 实现它们。 |
多行文本字段
多行文本字段使用<textarea>元素指定，而不是使用<input>元素。
<textarea cols="30" rows="8"></textarea>
渲染效果如下：
<textarea>和常规单行文本字段之间的主要区别在于，用户可以包含硬回车（即按回车键），这些硬回车将在提交数据时包含在内。
<textarea>也带有结束标签；任何你希望它包含的默认文本都应该放在开始和结束标签之间。相反，<input>是一个空元素，没有结束标签——任何默认值都放在value属性中。
请注意，尽管你可以在<textarea>元素中放置任何内容（包括其他 HTML 元素、CSS 和 JavaScript），但由于其性质，所有内容都将呈现为纯文本内容。（在非表单控件上使用contenteditable提供了一个 API，用于捕获 HTML/“富文本”内容而不是纯文本）。
在视觉上，输入的文本会自动换行，并且表单控件默认可调整大小。大多数浏览器都提供一个拖动手柄，你可以拖动它来增大/减小文本区域的大小。
你可以在本系列第一篇文章中我们创建的示例中找到文本区域的用法。
控制多行渲染
<textarea>接受三个属性来控制其多行渲染
控制文本区域的可调整大小
<textarea>的可调整大小能力由 CSS 的resize属性控制。其可能的值有
both：默认值——允许水平和垂直调整大小。horizontal：只允许水平调整大小。vertical：只允许垂直调整大小。none：不允许调整大小。block和inline：实验性值，只允许在block或inline方向调整大小（这取决于文本的方向性；如果你想了解更多，请阅读处理不同的文本方向）。
在resize参考页面的顶部，玩转交互式示例，了解这些如何工作。
下拉控件
下拉控件是一种简单的方法，可以让用户从众多选项中进行选择，而不会占用用户界面太多空间。HTML 有两种类型的下拉控件：选择框和自动完成框。这两种下拉控件的交互方式相同——控件激活后，浏览器会显示一个用户可以从中选择的值列表。
注意：你可以在 GitHub 上找到所有下拉框类型的示例，位于drop-down-content.html（也可在此处查看实时示例）。
选择框
一个简单的选择框是使用<select>元素创建的，它包含一个或多个<option>元素作为其子元素，每个子元素指定其一个可能的值。
基本示例
<select id="simple" name="simple">
<option>Banana</option>
<option selected>Cherry</option>
<option>Lemon</option>
</select>
如果需要，可以选择框的默认值可以使用所需的<option>元素上的selected属性来设置——此选项在页面加载时预选。
使用 optgroup
<option>元素可以嵌套在<optgroup>元素内，以创建视觉上关联的值组
<select id="groups" name="groups">
<optgroup label="fruits">
<option>Banana</option>
<option selected>Cherry</option>
<option>Lemon</option>
</optgroup>
<optgroup label="vegetables">
<option>Carrot</option>
<option>Eggplant</option>
<option>Potato</option>
</optgroup>
</select>
在<optgroup>元素上，label属性的值显示在嵌套选项的值之前。浏览器通常将它们在视觉上与选项分开（即通过加粗和不同的嵌套级别），这样它们就不太可能被误认为是实际选项。
使用 value 属性
如果一个<option>元素上显式设置了value属性，那么当表单以该选项选中状态提交时，就会发送该值。如果省略value属性，如上面的示例所示，则<option>元素的内容将用作值。因此，value属性不是必需的，但你可能会发现有理由希望向服务器发送一个比选择框中视觉上显示的更短或不同的值。
例如
<select id="simple" name="simple">
<option value="banana">Big, beautiful yellow banana</option>
<option value="cherry">Succulent, juicy cherry</option>
<option value="lemon">Sharp, powerful lemon</option>
</select>
默认情况下，选择框的高度足以显示单个值。可选的size属性控制当选择框没有焦点时可见的选项数量。
多选选择框
默认情况下，选择框只允许用户选择一个值。通过向<select>元素添加multiple属性，可以允许用户选择多个值。用户可以通过操作系统提供的默认机制选择多个值（例如，在桌面版上，可以通过按住Cmd/Ctrl键同时单击来选择多个值）。
<select id="multi" name="multi" multiple size="2">
<optgroup label="fruits">
<option>Banana</option>
<option selected>Cherry</option>
<option>Lemon</option>
</optgroup>
<optgroup label="vegetables">
<option>Carrot</option>
<option>Eggplant</option>
<option>Potato</option>
</optgroup>
</select>
注意：在多选选择框的情况下，你会注意到选择框不再将值显示为下拉内容——相反，所有值都一次性显示在一个列表中，可选的size属性决定了小部件的高度。
自动完成框
你可以使用<datalist>元素及其子<option>元素（用于指定要显示的值）来为表单小部件提供建议的、自动完成的值。<datalist>需要一个id。
然后，数据列表通过list属性绑定到<input>元素（例如，text或email输入类型），该属性的值是要绑定的数据列表的id。
一旦数据列表与表单小部件关联，其选项将用于自动完成用户输入的文本；通常，这会以下拉框的形式呈现给用户，列出他们输入到输入框中的可能匹配项。
基本示例
让我们看一个例子。
<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion" />
<datalist id="mySuggestion">
<option>Apple</option>
<option>Banana</option>
<option>Blackberry</option>
<option>Blueberry</option>
<option>Lemon</option>
<option>Lychee</option>
<option>Peach</option>
<option>Pear</option>
</datalist>
不太明显的 datalist 用法
根据HTML 规范，list属性和<datalist>元素可以与任何需要用户输入的控件一起使用。这导致了一些可能看起来不太明显的用法。
例如，在支持<datalist>range输入类型，每个 datalist <option><input type="range">参考页面上看到它的实现示例。
而支持<datalist>和<input type="color">的浏览器应将自定义调色板显示为默认值，同时仍然提供完整的调色板。
在这种情况下，不同的浏览器在不同情况下行为各异，因此请将此类用法视为渐进式增强，并确保它们优雅地降级。
其他表单功能
还有一些其他表单功能不像我们已经提到的那样明显，但在某些情况下仍然有用，所以我们认为值得简要提及一下。
注意：你可以在 GitHub 上找到本节的示例，名为other-examples.html（也可在此处查看实时示例）。
仪表和进度条
仪表和进度条是数值的视觉表示。<progress>和<meter>在所有现代浏览器中都可用。
仪表
仪表条表示在由max和min值限定的范围内的固定值。此值以条形图的形式可视化呈现，为了了解此条形图的外观，我们将该值与一些其他设定值进行比较
-
optimum值定义了<meter>元素的最佳值。结合low和optimum值在范围的下部，则下部范围被认为是首选部分，中部范围被认为是平均部分，上部范围被认为是较差部分。 - 如果
optimum值在范围的中部，则下部范围被认为是平均部分，中部范围被认为是首选部分，上部范围也被认为是平均部分。 - 如果
optimum值在范围的上部，则下部范围被认为是较差部分，中部范围被认为是平均部分，上部范围被认为是首选部分。
所有实现<meter>元素的浏览器都使用这些值来改变仪表条的颜色
- 如果当前值在范围的首选部分，则条形为绿色。
- 如果当前值在范围的平均部分，则条形为黄色。
- 如果当前值在范围的最差部分，则条形为红色。
这种条形图是通过使用<meter>元素创建的。它用于实现任何类型的仪表；例如，一个显示磁盘已用总空间的条形图，当它快满时会变红。
<meter min="0" max="100" value="75" low="33" high="66" optimum="0">75</meter>
<meter>元素内部的内容是用于不支持该元素的浏览器和辅助技术进行发声的备用内容。
进度
进度条表示一个随时间变化的值，直到达到由max属性指定的最大值。这样的条形图是使用<progress>元素创建的。
<progress max="100" value="75">75/100</progress>
这适用于需要进度报告的任何事情，例如下载文件总数的百分比，或问卷中已填写的题目数量。
<progress>元素内的内容是用于不支持该元素的浏览器和屏幕阅读器进行发声的备用内容。
总结
正如你在前几篇文章中看到的，表单控件有许多类型。你不需要一下子记住所有这些细节，可以随时返回这些文章查看详情。
现在你已经掌握了不同可用表单控件背后的 HTML 知识，我们将着手为它们设置样式。