HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证。input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅。
我们先看下input新增了的属性:
新增属性一:autoconmplete
autoconmplete可以赋值为 on 或者 off。当为 on的时候,浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页面的时候,浏览器能把用户写过的值自动填写在相应的input框里。
现在很多网站都实现了这个功能,不过基本都是用php来实现的。用了这个属性,无疑可以减少很多前端和后台的交流量和工作量。
新增属性二:autofocus
autofocus 可以赋值为 autofocus,也就是在页面加载完成的时候自动聚焦到这个input标签,自然 type="hidden"的时候是不能用的。 这个也是一个比较常见的效果,至今为止的实现方法是用js。在页面加载完时执行聚焦操作,现在也被一个属性搞定了。
可以想象,一个页面至多只有一个input标签会设置 autofocus,否则必然不会达到预期效果。因为不可能同事聚焦在两个input上。
新增属性三:required
input的有一个强力新增属性,免去验证的麻烦。可以赋值为 required。
比如用户注册页面的用户名和密码都是必填的,只要设置一个required就可以了。而在以前是需要js来验证或者后台验证的。
注意:这里required属性是需要用户来填写的,所以TYPE是button、submit、reset、image等等不需要用户填写选择的类型是不可以使用这个属性的。
新增属性四:placeholder
这个新增属性也是非常使用,用在type= text email等等类型的时候,提示用户输入信息的格式或者内容等等。这个效果在之前也是需要js来实现的。是一种比较常见的效果:

Name:

Address:

HTML5 INPUT新增属性
新增属性五:新增list属性---联想框效果
这个属性显示类似于百度搜索框那种联想框效果,也是非常实用的一个属性。
注意从这个属性使用的特点:需要有对应的datalist标签;datalist子标签option支持 value和lable两个属性;list的属性值要和datalist的id一致。
使用示例 (opera支持)

HTML5 INPUT新增属性的更多相关文章

  1. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

  2. HTML5 input date属性引起的探索——My97DatePicker(日期选择插件)

    不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是 ...

  3. HTML5 input新增的几种类型(数字、日期、颜色选取、范围)

    你可能已经听说过,HTML5里引入了几种新的input类型.在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等.而HTML5到来之后 ...

  4. 上传文件,不依赖 Jquery flash 插件,用到HTML5 input 新属性实现过滤文件格式、同时上传多个文件

    1.样式 2.js 3.后台处理 4.效果图 一.样式 <style> .divUpload { position: relative; } .divUploadFirst { width ...

  5. html5 <input> placeholder 属性

    带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <inp ...

  6. HTML5中input新增类型+表单新增属性+其他标签属性

    @ (猴头) Input 新增属性 email  邮箱(只在手机端有效) url  网址(只在iphone手机有效) tel  手机号(只在手机端有效) number  数字(右侧有上下按钮,只能输入 ...

  7. HTML5新增input标签属性

    一. input type属性 <form action=""> 邮箱<input type="email" name="" ...

  8. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  9. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

随机推荐

  1. Docker学习笔记2

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  2. Linux常用命令速查备忘

    Linux常用命令速查备忘   PS:备忘而已,详细的命令参数说明自己man 一. 启动,关机,登入,登出相关命令 [login] 登录 [logout] 登出 [exit] 登出 [shutdown ...

  3. IOS 视图切换动画

    我在网上找到的这个小方法,被我举一反三使用的屡试不爽.比如用在,当视图需要执行某一方法跳转到新的一个UIView上,从底层渐变浮到最上层.就是一个不错的视觉效果或者当需要类似keyboard的效果从底 ...

  4. Android(java)学习笔记65:线程的生命周期

    1. 我们学习线程本质就是学习如何开始线程和终止线程.下面这个关于线程的生命周期图,要牢记: 新建状态:当程序使用new关键字创建了一个线程之后,该线程就处于新建状态.此时和其他Java对象一样,它仅 ...

  5. JavaScript中交换两个变量的值得三种做法(代码实现)

    javascript在编程时经常会涉及到如何交换两个变量的值,例如常见的冒泡排序,快速排序等:下面我讲根据自己近期所学总结几种常见的交换两个变量值的方法: 方法一:借助第三方变量交换两个变量的值 va ...

  6. KVC 和 KVO 简单总结

    KVC: key value coding,键值编码.是一种通过使用属性的名称(key)来间接访问对象属性的方法.这个方法可以不用通过 setter/getter 方法来访问对象的属性.该方法使用的实 ...

  7. 《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9334121 作者:七十一雾央 新浪微博:http:/ ...

  8. QQ互联登陆出现(1054) Unknown column “conuintoken” in “field list”

    在dz论坛中打开了QQ互联登录功能之后提示(1054) Unknown column conuintoken in field list 错误 我们看到sql 错误就是说没有conuintoken字了 ...

  9. CSAPP2e:Shell lab 解答

    期中之后的第一个lab 就是实现一个简单的Shell 程序,程序的大部分已经写好,只需要实现 eval 函数和处理信号的sigchld_handle, sigint_handle, sigtstp_h ...

  10. POJ 3268 Silver Cow Party (Dijkstra)

    Silver Cow Party Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 13982   Accepted: 6307 ...