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

作者：大漠 日期：2020-03-24 点击：1235
CSS
A11Y
form
HTML5
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: 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全局属性之外，还有一些常见的属性：

  • autocomplete：DOMString提供用户代理自动完成功能的提示
  • autofocus：能够让一个对象在页面加载的时候获得焦点。该属性的值是一个布尔值（true或false），另外在整个页面的上下文中只有一个对象可以设置autofocus
  • disabled：用来设置用户是否可以对该控件进行操作，如果元素上未显式设置该属性，但它的父元素（比如<fieldset>）显式设置了disabled的话，<select>也会继承该属性
  • form：select所关联的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的值相匹配，其使用方式有点类似于label的for和表单控件的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>和input的type值配合起来使用的话，还可以得到不一样的效果，比如type="color"和type="range"：

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

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

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

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

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

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