文档章节

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
博文 69
码字总数 28857
作品 0
广州
DataList:HTML5中的input输入框自动提示利器

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

ZhangLG
05/26
0
0
Html5 input表单更新

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

IrisHuang
08/31
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

没有更多内容

加载失败,请刷新页面

加载更多

用户体验要素——以用户为设计中心

一、用户体验是什么 产品会与外界发生联系,人们如何去使用产品,人们使用产品无非解决两种问题,一,提高效率;二娱乐。而用户体验兼顾着功能和界面两个方面,为的是“提高人们的工作效率”...

铸剑为犁413
38分钟前
0
0
学习设计模式——代理模式

1. 认识代理模式 1. 定义:为其他对象提供一种代理以控制对这个对象的访问。 2. 组织结构: Proxy:代理对象,要实现与目标代理对象的相同的接口,这样就可以使用代理来代替具体的目标对象,...

江左煤郎
今天
1
0
java JDK动态代理

本篇随笔是对java动态代理中的JDK代理方式的具体实现。 首先需要定义一个接口,为其定义了两个方法:   public interface UserService { public void add(); public void delete(); } 然后需...

编程SHA
今天
2
0
轻松理解Dubbo分布式服务框架

Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案。简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的...

别打我会飞
今天
2
0
TypeScript基础入门之JSX(一)

转发 TypeScript基础入门之JSX(一) 介绍 JSX是一种可嵌入的类似XML的语法。 它旨在转换为有效的JavaScript,尽管该转换的语义是特定于实现的。 JSX在React框架中越来越受欢迎,但此后也看到了...

durban
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部