• 技术文章 >web前端 >html教程

    html表单选项菜单option与optgruop标签的用法详解

    黄舟黄舟2017-07-03 09:38:19原创3934
    使用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>

    1694.png

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

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

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

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

    以上就是html表单选项菜单option与optgruop标签的用法详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:option html 菜单
    上一篇:html:optgroup标签的用法,分组、只读的且呈树状样式显示 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ExtJs教程16(上)• html +CSS+div学习――第二课_html/css_WEB-ITnose• javascript简单事件处理• 表单只读小插件• jquery其他插件之comet(六)
    1/1

    PHP中文网