HTML5你听说过？就像网页的大咖，可以把网页变得更有趣，填写表格也简单多了！它新增了”验证数据”的功能，各种标签也不怕，就算浏览器禁用了javascript也能照常使用。只要用支持HTML5的浏览器就行，像Opera10+、Safari5+、Chrome和Firefox4+这些都能用。
HTML5新增表单功能
1.其他输入类型
HTML5新出了好多实用功能，比如那个表格填写神器——”email”和”url”。大家知道么？打上”email”就等于在说“留下邮箱地址”；而输进”url”那就是告诉浏览器“咱们要去哪儿玩儿~”
2.输入模式
告诉您个好消息，我们刚添加了个实用的小功能！现在，您可以随心所欲地输入内容，无论是数字还是日期都没问题！这样填写表格就变得简单多了？
3.数值范围
这个小工具超好用，你只需要设置个最小值、最大值和每次增长量就行了，弄起来比画线还方便！
4.必填字段
只在表格里设些必须填的东西就搞定。这样就能帮你记得需要填什么关键信息，避免犯错或者多说话！
5.禁用验证和检测有效性
想要关闭浏览器自带的表单验证？只需在表单里添个novalidate属性就行！另外，别忘了还有checkValidity()方法，轻轻一点，马上知道哪个字段不合格。
6.其他新增属性值
HTML5给我们带来了两个超级棒也很实用的type属性——list和datalist。用这俩来做选框，简直简单又高效！
Email和URL类型验证
好，现如今无论是邮箱还是网站，只要你有HTML5的浏览器，输入起来轻而易举！还有专门为你设计的校验功能~比如错误的邮箱格式是过不了关哒。
var oInput=document.getElementById("range");
oInput.stepUp() //每次加1
oInput.stepUp(5) //每次加5
oInput.stepDown() //每次减1
oInput.stepDown(10) //每次减10
必填项验证
别急，我教你怎么弄好这个问题呀。“required”这个神奇的属性太有用了，各种输入框和下拉菜单都能用上！再用JavaScript检查一遍就更保险了，万一有啥重要的信息没填对？
提交按钮处理
想要用这几个submit按钮？那给每个按钮添加个formnovalidate属性就行！这样发不发送，还不是随咱们心意么。
有效性检测与范围规则
HTML5新添的stepMismatch功能就是检查你输入的数字大小是否在设定好的范围里。除了那些基本设定外，咱们还能自己设定数值区间哟~
操作系统兼容性
你们听说了吗？其实不同的浏览器对HTML5表格校验的方法也有所不同！像以前老版本的Opera11，还是火狐4.0都是直接给你弹出一个温馨提示告诉你哪里出错了；而GoogleChrome（9之前）和Safari（5之前），就是简单粗暴地直接让你往上提交了。所以，咱们在做网页设计时得留心这些小细节，别被它们给骗了！
//检验是否支持必填属性
//支持的为true ，不支持的为false
var is = "required" in document.createElement("input");
结合JavaScript进行扩展
虽然HTML5的表格校验功能挺好的，但别忘了，用JavaScript就能更精确地检测用户的输入！比如说checkValidity()这个函数就挺实用的，如果有什么bug，找出来后再根据实际情况应对就好。
Novalidate属性应用
给form标签上加个novalidate属性，浏览器就不会瞎操心验证，有时省事不少。如果想自己搞定验证？好说，只需看看novalidate状态是否为true就OK~
HTML5的表单新添了好多好看又实用的玩意儿，用起来超级顺手！小伙伴们，大展身手！不够爽的话，加点JavaScript就能更棒~
评论0