5.1 元素 <select>
元素 <select>, <option> 和 <optgroup> 用于在 HTML 表单中创建下拉列表和多选列表。通过这些元素，用户可以从预定义的值集合中选择一个或多个选项。
元素 <select> 用于创建下拉列表。它包含一个或多个 <option> 元素，代表可供选择的选项。
使用示例：
HTML
<label for="country">选择一个国家:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</select>
<select> 的主要属性
属性 name: 设置表单元素的名称，将与所选值一起发送到服务器。
HTML
<select name="country"></select>
属性 id: 设置元素的唯一标识符，用于与 <label> 元素关联。
HTML
<select id="country" name="country"></select>
属性 multiple: 允许用户同时选择多个选项。外观上列表将显示为多行。
HTML
<select name="fruits" id="fruits" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
属性 size: 设置下拉列表中可见的行数。对于创建可滚动列表很有用。
HTML
<select name="cities" size="4">
<option value="ny">New York</option>
<option value="la">Los Angeles</option>
<option value="chicago">Houston</option>
</select>
5.2 元素 <option>
元素 <option> 用于 <select> 内部定义用户可以选择的每个选项。
使用示例：
HTML
<select name="color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<option> 的主要属性：
属性 value: 设置如果该选项被选择将发送到服务器的值。
HTML
<option value="red">Red</option>
属性 selected: 确定该选项是否应该默认被选中。
HTML
<option value="green" selected>Green</option>
属性 disabled: 使该选项不可选择。
HTML
<option value="blue" disabled>Blue</option>
5.3 元素 <optgroup>
元素 <optgroup> 用于在 <select> 内部分组相关选项。它允许将选项逻辑分为类别，使下拉列表更加有条理和易于理解。
使用示例：
HTML
<select name="car">
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup label="Japanese Cars">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
</optgroup>
</select>
<optgroup> 的主要属性：
属性 label: 设置选项组的标题。
HTML
<optgroup label="German Cars"></optgroup>
属性 disabled: 使该组内的所有选项不可选择。
HTML
<select name="car">
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup label="Japanese Cars" disabled>
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
</optgroup>
</select>
使用 <select>, <option> 和 <optgroup> 的有用建议
- 逻辑分组: 使用
<optgroup>逻辑分组相关选项：这样可以使表单更加用户友好。 - 多重选择：如果需要提供给用户选择多个选项的可能性，使用
<select>的multiple属性。 - 可访问性：使用属性
id和label来改善表单元素的可访问性。正确使用label改善了表单的交互性，对于使用辅助技术的用户尤其有用。 - 样式：使用 CSS 来改善下拉列表和多选列表的外观。例如：
CSS
select {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
GO TO FULL VERSION