在HTML中,<optgroup>
标签用于将<select>
元素中的选项分组。使用<optgroup>
可以将选项按照一定的逻辑关系分组,使得用户更加清晰地理解选项的含义和区别。<optgroup>
标签必须包含一个label
属性,用于指定该组选项的名称。
例如,下面的HTML代码使用<optgroup>
将水果和蔬菜分为两组:
<select>
<optgroup label="水果">
<option>苹果</option>
<option>香蕉</option>
<option>橙子</option>
</optgroup>
<optgroup label="蔬菜">
<option>西红柿</option>
<option>黄瓜</option>
<option>胡萝卜</option>
</optgroup>
</select>
上述代码会在浏览器中显示一个下拉框,其中水果和蔬菜分别为两个组,用户可以通过点击下拉框选择不同的选项。这种分组的方式可以使得选项更加有序、更加易于理解,提高用户体验。
需要注意的是,<optgroup>
标签只能作为<select>
元素的子元素出现,不能被其他标签包含。