list属性以及对应的datalist元素

发布日期:2015-09-14 15:18:56

list 属性以及对应的 datalist 元素可以让用户在输入框中开始输入值的时候,显示一组备选值。 下面是一个包含在 div 中的使用 list 属性及对应 datalist 元素的代码示例:
<div>
<label for="awardWon">北京网页设计</label>
<input id="awardWon" name="awardWon" type="text" list="awards">
<datalist id="awards">
<select>
<option value="Best Picture"></option>
<option value="Best Director"></option>
<option value="Best Adapted Screenplay"></option>
<option value="Best Original Screenplay"></option>
</select>
</datalist>
</div>
list 属性中的值( awards )同时也是 datalist 元素的 id 。这样就可以让 datalist与输入项关联起来。虽然将 option 包裹在 select 中不是必需的,但这样做便于为老版本浏览器提供降级方案。
使用了 list属性的输入框看起来就是一个普通的文本输入框,当开始输入时,输入框下面就会显示一个数据选择框,其中包含从 datalist中检索到的匹配数据。在下面的截图中可以看到效果(Firefox v9) 。在本例中,因为 datalist 中的所有 option 都含有 B,所以所有数据都显示出来了。
但当输入 D的时候,就只有匹配的数据才被显示出来,效果如下图:list 输入框不会阻止用户输入自己想输入的内容, 不过它为我们提供了一种便利的方式来添加输入提示功能,增强用户体验。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计