视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
html表单选项菜单option与optgruop标签的用法详解
2020-11-27 15:30:20 责编:小采
文档
 使用option标签可以定义一个<select>表单控件中的每个条目。浏览器将<option>标签中的内容作为<select>标签的菜单或是滚动列表中的一个元素显示,这样,其内容只能是纯文本,不能有任何装饰。
value属性

使用value属性可以为每个选项设置一个值,当用户选中该选项时.浏览器会将其发送给服务器。如果还没有指定value属性,选项的值将被设置为<option>标签中的内容。看看下面这个示例中的HTML选项:

coption value=dog>dog <option>dog

这两者具有同样的值。第一个是输出在<option>标签中设置值,第二个则是默认地设置为<option>标签本身的内容:“dog”

selected属性

默认情况下,所有多选的<select>标签中的选项都是未选中状态,因此当客户端向服务器提高表单时,这些选项不会包括在参数列表中。在<option>标签中包括selected属性后,就可以预先选定一个或多个选项、随后用户可以再取消选择。

selected属性的HTML版本没有值。其XHTML版本则有值,selected=selected如果没有任何选项被预先显式选定,那么单选的<select>标签会预先选中第一选项。

label属性

通常情况下,在将元素显示给用户时,会用<option>标签中的内容来生成元素的标记。但是如果提供了label属性的话,就要用它的值来用作标记。

<optgroup>标签

表单中的选项菜单有可能非常长,这使得它们很难显示和使用。在这种情况下,将一些相关的选项分组会很有帮助,然后将这些组作为一组嵌套的层叠式菜单呈现给用户。<optgroup>在HTML 4.0中是新引人的标签,虽然使用方式有限,但是它为HTML和XHTML的表单提供了这种功能。

只能在<select>标签中使用<optgroup}标签,并且它只能包含<<option>标签。浏览器会为<select>主菜单中的每个<optgroup>标签都生成子菜单。例如,在HTML中,可以利用<optgroup>来显示一个表单菜单,该菜单是按地名排列!

<select name=state>
 <optgroup label=龙岗区>
 <option>布吉镇
 <option>坂田镇
</optgroup>
<optgroup label=宝安区>
 <option>龙华镇
 <option>西乡镇
</optgroup>
</select>

由于还没有浏览器能够完全支持<optgroup>标签(一般浏览器会简单地将它们显示为滚动菜单),我们无法向读者展示这样的菜单是什么样子。但是,它们可能和我们所熟悉的下拉菜单非常相似,对大多数图形化用户界面来说,下拉菜单是很普遍

的功能。当用鼠标或键盘选定后,<optgroup>会通向一个或多个菜单。例如,在我们关于“州(state )”的示例中,可能会有标记为“Northeast" , "South”这样的子菜单,拉开每个子菜单都会显示其所包含的州名列表。

可惜的是,<optgroup>标签最大的障碍是它无法嵌套,这样就了只能有一层子菜单。但是在XHTML将来的版本中,有可能会突破这个。使用label属性可以定义一个<optgroup子菜单的标题以显示给用户。其标记应该短小精悍,这样才能保证菜单在不同的显示情况下都能显示出来。

将<select>菜单中与<option>相关的元素组织在一起。

下载本文
显示全文
专题