文档章节

DataList:input输入框自动提示宝器

可达鸭眉头一皱
 可达鸭眉头一皱
发布于 2017/04/24 11:12
字数 224
阅读 6
收藏 0

1.DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表

2.DataList的表现很像是一个Select下拉列表,但它只是提示作用,并不限制用户在input输入框里输入什么。

举个栗子:

<label for="country_name">国家 : </label><input id="country_name" name="country_name" type="text" list="country" />
<datalist id="country">
   <option value="Afghanistan 阿富汗">
   <option value="Albania 阿尔巴尼亚">
   <option value="Algeria 阿尔及利亚">
   <option value="Andorra 安道尔共和国">
   <option value="Angola 安哥拉">
</datalist>

需要注意的是,input输入框的list属性值是datalist的id,这样datalist才能和input输入框关联起来,在之前介绍range类型时曾见到提到过它。 datalist自身并不显示,只在需要配合input输入时才会自动显示出来。

© 著作权归作者所有

共有 人打赏支持
可达鸭眉头一皱
粉丝 3
博文 73
码字总数 29802
作品 0
广州
私信 提问
DataList:HTML5中的input输入框自动提示利器

DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。它是HTM...

ZhangLG
2018/05/26
0
0
HTML5中input新增标签详解

HTML5中input新增标签详解 一、type属性里新增的标签: (1) date、datetime、datetime-local、time、week、month这些是 type属性里表示时间类型的。(这些只在opera里面支持) 例: <!DOCTYPE ...

惠风康桥
2012/11/27
0
0
Html5 input表单更新

Html提供了很多新的表单输入类型 email IE不支持 输入域必须包括e-mail的地址,在提交表单时,会自动验证email域的值; url 输入域是包含URL地址 number 用于应该包含数值的输入域:可以设置...

IrisHuang
2018/08/31
0
0
HTML 表单元素(中)

type属性总汇 type属性解析 一、type属性总汇 input元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下,什么样的数据均可以输入。而通过不通的属性值,可以限制输入的内容。 ...

xiaoxiaobukuang
2017/10/12
0
0
WEB前端:HTML+CSS+JavaScript

一、 HTML介绍: --------------------------------------- 什么是HTML? 超文本标记语言, <标签名>--标记(标签、节点) HTML是由:标签和内容构成 3. 程序语言有两种:解释性语言(HTML、P...

zqwang121
2016/06/17
46
0

没有更多内容

加载失败,请刷新页面

加载更多

day27:expect批量杀进程|

1、linux下当前目录有一个文件ip-pwd.ini,内容如下: [root@localhost_002 shell100]# cat ip-pwd.ini 10.111.11.1,root,xyxyxy10.111.11.2,root,xzxzxz10.111.11.3,root,12345610.......

芬野de博客
45分钟前
2
0
分布式之数据库和缓存双写一致性方案解析(二)

引言 该文是对《分布式之数据库和缓存双写一致性方案解析》,一文的补充。博主在该文中,提到了这么一句话 应该没人问我,为什么没有先更新缓存,再更新数据库这种策略。 博主当时觉得,这种...

hensemlee
51分钟前
3
0
druid安装与案例

druid 可以运行在单机环境下,也可以运行在集群环境下。简单起见,我们先从单机环境着手学习。 环境要求 java7 或者更高版本 linux, macOS或者其他unix系统(不支持windows系统) 8G内存 2核C...

hblt-j
57分钟前
0
0
bejson上线 gif转帧工具。

说道这个工具,不得不提一句经典格言“色Q是推动科技发展的动力” 有人发了这个图,我和所有人一样想看到那个瞬间。 当然,我没有PS,有没有太好的转帧工具,但是这并不妨碍我是一个技术死肥...

废柴大叔
57分钟前
0
0
详解利用clear清除浮动的一些问题解决

下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden;} Quest......

前端小攻略
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部