新的 HTML5 Datalist 元素

红薯 发布于 2012/06/18 06:41
阅读 8K+
收藏 21
HTML5 的 <datalist> 元素为 <input> 元素指定了一个预定义的列表选项,实现类似自动完成的效果。
<!DOCTYPE html>
<html>
<body>

<form action="login.php" method="post">
User:
<input list="username" name="username" />
<datalist id="username">
  <option value="Zhlmmc">
  <option value="oschina">
  <option value="Winter Lau">
  <option value="Eddie">
  <option value="Valentin">
</datalist>
Password:
<input type="password" />
<input type="submit" value="Login" />
</form>

</body>
</html>

<datalist> 标签当前只是 Firefox 和 Opera 浏览器支持,希望其他浏览器能尽快支持。

<datalist> 最终的运行效果如下:

加载中
0
27号
27号
和下拉框的区别?
勇敢善良坚强的小海豚
勇敢善良坚强的小海豚
这个只有value没有text
红薯
红薯
这玩意儿是提示用的
0
loongchao
loongchao

火狐上,datalist看不到效果。

0
李艾蒙
李艾蒙
火狐13有效果~
0
x386
x386
确实可以。
0
C
ChenElton

引用来自“曹小龙”的答案

火狐上,datalist看不到效果。

双击输入框,和你的历史在一起的,如果你历史记录比较长,向下拉才能看见
0
charles_tan
charles_tan
chrome 20.0.1132.34 beta-m 测试没问题。
0
M
MingyuShi
那如果有哦autocomplete和datalist一起使用,会产生什么效果,他本质上是什么div?
0
亚林瓜子
亚林瓜子
chrome17不支持,看来我又要升级了
0
失明的色盲
失明的色盲

引用来自“fxtxz2”的答案

chrome17不支持,看来我又要升级了
稳定版到19了啊,你是怎么把自动更新关掉的?
空间还是看
空间还是看
回复 @失明的色盲 : 嗯,谢谢两位,我想买一个linux系统的电脑,因为便宜
失明的色盲
失明的色盲
回复 @我在KY8011上见到你 : 这个难度只在于你想不想保留原操作系统(双系统),以及是否保留系统上的文件(不同操作系统的文件系统不同)。如果是全新的机器,怎么来都无所谓。
空间还是看
空间还是看
回复 @fxtxz2 : 帅哥问个私人问题,如果我预装系统是linux系统,能不能换成其他系统?
亚林瓜子
亚林瓜子
我的是linux平台上面的,没有自动更新
0
叛道
叛道
坑爹的HTML5,不知道什么时候才能大面积的应用,现在只是望洋兴叹。
返回顶部
顶部