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属性的更多相关文章

  1. HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  2. 一些有用的HTML5 pattern属性

    最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了.于是想要尝试其它的实现方案,最 ...

  3. 常用的HTML5 pattern属性

    type="tel" 和 type="number" 的区别 这里还是先那么先交代一下最初遇到的问题.其实无论是tel还是number都不是完美的: type= ...

  4. html5中 input的pattern属性 和 details/summary元素

    html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...

  5. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  6. HTML5新增的属性和废除的属性

    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...

  7. HTML5表单新增元素与属性

    form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...

  8. html5表单新增元素与属性2

    1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...

  9. HTML5 的新的表单属性

    本章讲解涉及 <form> 和 <input> 元素的新属性. 新的 form 属性: autocomplete novalidate 新的 input 属性: autocom ...

随机推荐

  1. sqlserver 2008 R2 分区表测试

    有一张表期中有100多w条数据 程序执行起来比较慢,想用分区表的办法,使查询变快一些. 方案如下 --查看分区信息SELECT * FROM sys.partition_range_values -- ...

  2. MSP430单片机输入与输出

    MSP430单片机的输入输出线绝大多数是服用的,除了个别的端口外,基本上是8为为一组,不同的型号的MSP430的端口有所不同,就msp430F5438而言,一共有11个I/O端口,其中除了第十一P11 ...

  3. gimp之旅

    随着大学生活的告一段落,新的征途已经开始了.鉴于本人如此喜欢旅游,如此喜欢拍照,如此喜欢处理图片,所以打算在照片处理上下点功夫.总所周知,图像处理软件大牛级的就属windows下的photoshop以 ...

  4. ORA-02041: client database did not begin a transaction

    .NET中访问Oracle数据库链接:ORA-02041: client database did not begin a transaction 问题的处理. .NET中访问Oracle中带有DB_ ...

  5. A Tour of Go Exercise: Errors

    Copy your Sqrt function from the earlier exercises and modify it to return an error value. Sqrt shou ...

  6. Codeforces Wilbur and Array

    Description Wilbur the pig is tinkering with arrays again. He has the array a1, a2, ..., an initiall ...

  7. 转载c#泛型 类型参数的约束(c#编程指南)

    在定义泛型类时,可以对客户端代码能够在实例化类时用于类型参数的类型种类施加限制.如果客户端代码尝试使用某个约束所不允许的类型来实例化类,则会产生编译时错误.这些限制称为约束.约束是使用 where 上 ...

  8. CSS边框与边界

    (上右下左依次体现)à边框的同一属性名称可以同时使用多个属性值 简化方案:border: 长度 形态 颜色 例如 border:1px solid black; 16.2 CSS中边界的使用 padd ...

  9. 【Stage3D学习笔记续】真正的3D世界(五):粒子特效

    先看效果,按下空格键添加粒子特效: 一般而言粒子特效的实现都是比较复杂的,且不说实现粒子特效的编码和设计,光是编写一个粒子编辑器就不是简单的一件事,但是作者使用了很取巧的方式来完成,我们接下来深入代码 ...

  10. Delphi- ini文件的读写操作

    一.读INI文件示例 procedure TForm1.FormCreate(Sender: TObject); Var MyIni :Tinifile; glAppPath :string; beg ...