聊聊Web中的下拉选项的事情

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

在Web的开发中,对于下拉选项的称谓各有不同,比如下拉菜单,下拉选择框等等。不同的场景之下,采用的方式也有所不同,比如在表单中会使用<select>元素,在自动输入框时会使用HTML的<datalist><input>结合使用。而表单中的控件在Web中是件复杂的事情,特别是CSS样式方面更是如此。在这篇文章中,我们就一起来聊聊Web下拉选项相关的事情。

HTML的<select>

<select>的使用不是件复杂的事情,比如:

<select>
    <option>Default</option>
    <option>CSS</option>
    <option>HTML</option>
    <option>JavaScript</option>
    <option>React</option>
</select>

在浏览器中看到的默认效果如下:

<select>中子元素<option>是用来设置选择框的选项,除此之外,还可以由<optgroup>元素对选项进行分组:

<select>
    <optgroup label="前端">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
    </optgroup>
    <optgroup label="JavaScript框架">
        <option value="React">React</option>
        <option value="Vue">Vue</option>
        <option value="Angular">Angular</option>
    </optgroup>
</select>

效果如下:

上面看到的示例都是单选项,有的时候我们希望<select>能让用户同时可以选择多项。在原生的<select>控件中,只需要显式设置multiple属性即可:

<select multiple name="lange">
    <option value="" diabled hidden>Lange</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="react">React</option>
    <option value="vue">Vue</option>
</select>

浏览器渲染的效果如下:

HTML的<select>元素除了具有的HTML全局属性之外,还有一些常见的属性:

  • autocompleteDOMString提供用户代理自动完成功能的提示
  • autofocus:能够让一个对象在页面加载的时候获得焦点。该属性的值是一个布尔值(truefalse),另外在整个页面的上下文中只有一个对象可以设置autofocus
  • disabled:用来设置用户是否可以对该控件进行操作,如果元素上未显式设置该属性,但它的父元素(比如<fieldset>)显式设置了disabled的话,<select>也会继承该属性
  • formselect所关联的form表单。如果这个属性被明确定义,那么它的值一定是在同一个document中表单ID。这样能够让你把select标签放在任何的位置,不仅限于作为form表单的后代元素
  • multiple:设置select是否可以多选,默认是单选
  • name:控件名称
  • required:规定select的值不能为空
  • size:如果控件显示为滚动列表框,则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素渲染为滚动列表框。默认值为0

有关于HTML的<select>更详细的介绍,还可以阅读HTML规范中<select>元素一节

HTML的<datalist>

在HTML5中新增加了一个<datalist>元素,该元素有点类似于<select>元素,也可以包含一组<option>元素,它们表示其他控件的预定义选项。在渲染过程中,<datalist>元素什么也不表示,它及其子元素应该被隐藏。

<datalist>元素有两种使用方式。在最简单地情况下,<datalist>元素只有<option>子元素:

<datalist>
    <option>Default</option>
    <option>CSS</option>
    <option>HTML</option>
    <option>JavaScript</option>
    <option>React</option>
</datalist>

在你的浏览器上看不到任何的东西渲染出来:

但它确实存在于HTML中:

<datalist>元素和<input>结合在一起使用的话,可以实现一个类似于下拉选择框的效果。这两个元素结合起来使用的话,最重要的是 <input>list属性的值要和<datalist>id的值相匹配,其使用方式有点类似于labelfor和表单控件的id相匹配:

<input type="text" list="lange" name="lange" placeholder="选择你喜欢的语言" />
<datalist id="lange">
    <option name="html">HTML</option>
    <option name="css">CSS</option>
    <option name="javascript">JavaScript</option>
    <option name="react">React</option>
    <option name="vue">Vue</option>
</datalist>

浏览器中看到的效果如下:

另外一种方式是在更复杂的情况下,可以在<datalist>元素中内嵌<select>元素,这个时候<datalist>元素中的选项是由<select><option>提供:

<input type="text" name="lang" list="lang" />
<datalist id="lang">
    <label>
        <select name="lang">
            <optiop value="">选择你喜欢的语言</option>
            <option name="html">HTML</option>
            <option name="css">CSS</option>
            <option name="javascript">JavaScript</option>
            <option name="react">React</option>
            <option name="vue">Vue</option>
        </select>
    </label>
</datalist>

浏览器渲染出来的效果如下:

如果将<datalist>inputtype值配合起来使用的话,还可以得到不一样的效果,比如type="color"type="range"

有关于<datalist><input>type配合起来使用的更多介绍,还可以阅读:

不管是<select>还是<datalist>,都可以说是HTML的原生元素,默认情况之下都具有一定的交互行为和UI效果。比如下面这个示例:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/html5/custom-a11y-select.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部