文档章节

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

可达鸭眉头一皱
 可达鸭眉头一皱
发布于 2017/04/24 11:12
字数 224
阅读 5
收藏 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输入时才会自动显示出来。

© 著作权归作者所有

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

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

ZhangLG
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
HTML 表单元素(中)

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

xiaoxiaobukuang
2017/10/12
0
0
HTML 表单元素(上)

表单元素总汇 表单元素解析 一、表单元素总汇 在HTML5的表单中,提供了各种可供用户输入的表单控件。 二、表单元素解析 1、< form > 定义表单 解释:< form > 元素主要是定义本身是一组表单。...

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

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

zqwang121
2016/06/17
46
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java IO类库之PrintStreamWriter

* A <code>PrintStream</code> adds functionality to another output stream, * namely the ability to print representations of various data values * conveniently. Two other fea......

老韭菜
49分钟前
0
0
qduoj~前端~二次开发~笔记

青岛大学qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上部署运行,其实整体运行还是建立在docker的容器虚拟环境里,这里暂时不需要docker。安装环境是Ubuntu14-64bit 1.安装一大...

虚拟世界的懒猫
52分钟前
6
0
ConcurrentHashMap源码解读

部分内容转自:http://jiabinyuan.xyz/#/app/archive/detail/25 内部结构 内部采用了segment结构,每一个segment相当于一个hashtable。看下面的结构图: 从图的结构我们可以了解到,Concurr...

edwardGe
57分钟前
1
0
Ubuntu终端Tab键自动补全

打开 /etc/bash.bashrc,找到下列代码,取消注释。 #enable bash completion in interactive shells#if ! shopt -oq posix; then# if [-f /usr/share/bash-completion/bash_compl......

大熊猫
今天
0
0
polipo socks5代理转http代理

天朝的网络,哎~ 装个 yarn 都时而会卡 假设在SSlocal 已经装好运行的前提下,来安装设置 polipo sudo apt-get install polipo sudo vim /etc/polipo/config 追加下列配置内容,并保存 socksP...

纯洁徐
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部