首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

DataList:HTML5中的input输入自动提示利器

DataList的作用是在你往input输入里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索的自动提示,在飞机票火车票的搜索页面上也有这样的效果。...它是HTML5里新增的一个非常有用的元素。 DataList的表现很像是一个Select下拉列表,但它只是提示作用,并不限制用户在input输入里输入什么。...HTML5 Datalist的语法其实跟select下拉列表的语法几乎完全一样,非常的简单!...下面我们来看一个实际例子,在下面的输入里,任意输入几个字母,datalist就会提示给你包含这几个字符的英文国家名称。...非常的简单,以前这样的效果基本上只能用讲Javascript实现,需要你有相当的javascript基本功,而现在,感谢HTML5,只需要纯HTML就能达到这样的神奇效果。

3.4K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    下拉选择

    1.问题描述 当我们在填一些问卷的时候,问卷的设计基本都是通过输入实现的,普通的输入就是一个问题后面会出现一个填写内容的框架,有时还会出现下拉选择,下拉选择的实现是与普通输入不一样的,下面将介绍下拉选择的算法...里面写的文字会直接显示在文本里面;lablel的意思是输入关联的label文字,若不设置lablel则默认与value相同。...实验讨论与结果 下拉选择的代码如下: 该部分代码仅仅是下拉选择的代码,如果要与其他的内容一起展示时...最后呈现效果如下: 四.结语 下拉选择需要注意是下拉的内容能否正确显示出来,以及样式的设置。 稿件来源:深度学习与文旅应用实验室(DLETA) ---- 作者:赵玉琴 主编:欧洋

    2K10

    Material Design — 提示( Dialogs)

    关闭提示 提示可以通过点击提示外部或点击系统后退按钮(在Android上)来关闭。 有时候,用户必须做出选择动作后才能关闭提示。...文案要换行时使用简单提示 ---- 确认提示(Confirmation dialogs) 确认提示要求用户在提交选项之前明确确认他们的选择。...左图为带选择控件的提示 避免使用提示启动提示 确认提示应避免启动其他简单提示或简单菜单,因为它们增加了页面复杂性并会增加了app的海拔。 如果需要完成任务,可以使用全屏提示。...确认单个值 确认提示可以使用列表以外的布局,例如日期选择器,但仍然专注于选定单个值(选择日期,但不选择时间和日期)。 ?...左:选择日期    右:选择时间 取消与确定按钮 确认提示需要提供明确的确认按钮和明确的取消按钮。 点击取消按钮、返回按钮或离开确认提示将放弃之前的更改。 ?

    5.1K101
    领券