html5 list属性、autocomplete属性、pattern属性
list属性的值为某个datalist元素的id,datalist也是html5中新增的属性,类似于选择框select,或者android中的autocomplete textview控件。datalist本身在页码中并不显示,其display属性应设为none,而是以input元素的输入提示的方式显示。
<input type='text' list='hello' autocomplete="on" /> <datalist id='hello' style='display:none;'> <option value='Hello'>Hello</option> <option value='Hello2'>Hello2</option> <option value='Hello3'>Hello3</option> <option value='Good'>Good</option> </datalist> autocomplete属性则可以在提交form再次回到次页面时自动填写上次提交的数据。pattern属性可以对input元素的输入进行检查,将属性值设置为某个格式的正则表达式,提交表单时会对该input进行检查,若不符合该表达式则不允许提交。<form><input type='text' pattern='[1-9][0-9]{12}'>//输入的第一位为1-9之间的某个数字,其余位为0-9之间的某个数字</form>
html5 list属性、autocomplete属性、pattern属性的更多相关文章
- HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...
- 一些有用的HTML5 pattern属性
最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了.于是想要尝试其它的实现方案,最 ...
- 常用的HTML5 pattern属性
type="tel" 和 type="number" 的区别 这里还是先那么先交代一下最初遇到的问题.其实无论是tel还是number都不是完美的: type= ...
- html5中 input的pattern属性 和 details/summary元素
html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...
- 疯狂的表单-html5新增表单元素和属性
疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...
- HTML5新增的属性和废除的属性
HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...
- HTML5表单新增元素与属性
form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...
- html5表单新增元素与属性2
1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...
- HTML5 的新的表单属性
本章讲解涉及 <form> 和 <input> 元素的新属性. 新的 form 属性: autocomplete novalidate 新的 input 属性: autocom ...
随机推荐
- HDU4738 Caocao's Bridges 无向图的桥
一眼题:找所有的桥,然后求最小权值 但是有很多坑点 1:如果本来不联通 输出0,(这个坑我知道) 2:但是还有一个坑,就是当整个连通,最小桥的权值是0时,也必须派一个人去,wa了无数遍(还是太年轻) ...
- 那些年一起踩过的坑 — Date类型序列化的问题
坑在哪里? 序列化 和 反序列化 的时候对Date字段的格式设置不一致 例如:将Java bean序列化成Json string的时候 格式为 yyyy-MM-dd 解 ...
- 【译】 AWK教程指南 4通过文本内容和对比选择指定的记录
Pattern { Action }为awk中最主要的语法.若某Pattern的值为真则执行它后面的 Action. awk中常使用"关系表达式" (Relational Expr ...
- NOIP2012 同余方程
1同余方程 题目描述 求关于 x 的同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入输出格式 输入格式: 输入只有一行,包含两个正整数 a, b,用一个空格隔开. 输出格式: 输出只有一行 ...
- use tomcat to access the file cross the environment
background: 项目中的一个小工具,是一个Cron Job ,每天去搜集下服务器Hadoop Job的运行状态,并生成一份报告发送给整个Team,生产报告的同时把相关的日志文件保存到固定的一台 ...
- OpenCV中的矩阵乘法运算
转载:http://blog.csdn.net/tangwei2014 OpenCV中矩阵乘法运算 1. Mat*Mat: 第一个矩阵的列数必须等于第二个矩阵的行数. [0, 1, 2, 3; ...
- Guide to make CentOS 7 the perfect desktop
原文地址: http://www.dedoimedo.com/computers/fedora-pimp.html My original review of CentOS 7 was less e ...
- 2016多校第六场题解(hdu5793&hdu5794&hdu5795&hdu5800&hdu5802)
这场就做出一道题,怎么会有窝这么辣鸡的人呢? 1001 A Boring Question(hdu 5793) 很复杂的公式,打表找的规律,最后是m^0+m^1+...+m^n,题解直接是(m^(n+ ...
- 基于UDP协议的多路广播地址
因为多路广播地址的范围是224.0.0.0 到239.255.255.255之间,所以我们可以从中取一个地址给我们的程序用即可
- idhttp.post方式 调用datasnap rest 远程方法
idhttp.get方式调用,这种比较简单,大家都会.post方式网上却没有任何成功的代码,本人也是摸索了一个上午才搞定. 分享给大家. (1)post方式调用的远程方法,方法名必须加“update” ...