HTML5规范中，关于表单的内容占了很大一部分，因为我们平时浏览网页的时候用到表单的地方很多，在这之前，我们对于表单元素的操作往往是通过大量的JS来进行的，比如表单验证，比如时间选择等等，虽然现在有很多关于表单操作的插件，诸如jquery.validate.js，my97datepicker.js等，但是插件所带来的流量对于许多追求高效的攻城湿们来说是很难忍受的，而且因为是别人的东西，万一被你发现了一个bug，却没人再去维护这个东西了，那真的是很纠结的一件事情，所以说，有些东西原配是比小三要好的。
现在有了html5，我们就可以摆脱很大一部分的代码量去对表单中的元素进行操作，只需要在相应的元素上加上这个、那个属性就可以了。下面就介绍一下关于html5表单的一些扩展功能。
一、新的输入类型
Html5对input强化了许多，增加了很多新的type属性，但是现在好像不是所以支持HTML5的浏览器都能支持这些属性，暂时先把这些属性及范例罗列一下：
| 类型 |
描述 |
举例 |
说明 |
| tel |
一行文本 |
+123 456 789 |
当手持设备输入时很有用，会调用电话薄 |
| search |
一行文本 |
Abcdefg |
现在很多网站的搜索栏都有一个语音搜索的功能，可以input内加上属性：x-webkit-speech |
| url |
绝对URL地址 |
|
|
| |
有效的email地址 |
exame@hostname.com |
|
| datetime |
日期及时间 |
2013-05-21T16:00Z |
此处使用UTC时间，一般不太用这个，最新版的chrome好像不支持 |
| date |
不带时区的日期 |
2013-05-21 |
|
| month |
不带时区的月份 |
2013-05 |
|
| week |
不带时区的年及周 |
2013-W01 |
|
| time |
不带时区的时间 |
16:00:00 |
|
| datetime-local |
时区的当地日期及时间 |
2013-05-21T16:00:00 |
以上日期相关会有时间选择框弹出 |
| number |
数字 |
9999 |
|
| range |
一定范围内的数值 |
9999 |
提供一个滑块 |
| color |
十六进制RGB值 |
＃FFFFFF |
会有颜色选择界面 |
可能上面的一些类型在输入的时候与text类型的一样，比如emal，url等类型的input，通常这种type的定义是用在form提交验证的时候有效，这点以后会把博文贴上来。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于