点击登录
  • 欢迎访问我的个人博客,在这里我会跟大家分享前端的学习心得, 一起成长  博客地址
  • 同时欢迎访问我正在实践的外贸电商网站 iMart
  • 目前正在求职前端工程师职位, 请查看我的在线简历

HTML5新标签datalist与select的区别

前端学习笔记 mike652638 870次浏览 已收录 1个评论
摘要: HTML5新标签datalist同样属于form元素, 且作用为下拉选择, 初看与原已存在的select标签差不多, 那么二者有何区别呢 ?

标签定义及使用说明

datalist标签规定了 input 元素可能的选项列表, 被用来在为 input元素提供”自动完成”的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户点击输入的待选数据。

示例如下:

实际显示为:


注意: Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签。

注意: 请使用 input 元素的 list 属性来绑定 datalist 元素, 与label的用法类似(label for=”xxx” input id=”xxx”), input list=”xyz” datalist id=”xyz”也需要对应。

对比select标签示例:

显示效果为:

不难看出:
1. 代码结构上, 通常二者均包含在form标签内, 但datalist上方需要关联input输入框, select则不需要; select的option标签是成对出现的, 且待选值夹在标签对中, datalist则是直接使用自闭合的option标签, option value直接指定待选值, 另外, select中option标签可以添加属性selected表示默认选中, datalist不具备这个特性;

2. 实际功能上, datalist可谓更强大, 可以看作是输入框和下拉框的结合体, 可以在框内输入字符(输入时下拉框具备联想筛选功能), 也可以直接从下拉框中选择预设选项, 使用很方便, 用户体验也更棒 ……

以上便是本人对datalist学习时的简单总结, 欢迎讨论及补充 :)


本博部分文章转自前端大牛, 相关论坛或社区等, 凡转载文章均会注明原文地址, 如有侵权, 请与本人联系删除!
HTML5新标签datalist与select的区别
喜欢 (2)
[支付宝或微信扫码打赏 :)]
分享 (0)
mike652638
关于作者:
关注互联网, 折腾大前端 ~ 希望结交更多的前端好友, 大家一起交流哦
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 好文章,内容妙趣横生.禁止此消息:nolinkok@163.com
    钢格板2017-07-11 16:04 Reply