html5表单详解

1.新增表单特点

表单是HTML中非常重要的一部分，是连接前端与后台的桥梁，它担负大量的用户和网页后台数据更新交互的任务。

因此在HTML5中表单也发生了一些变化，它在保持简便易用的特性的同时，增加了许多内置的控件或者控件属性来满足用户的需求，并且同时减少了开发人员的编程。

2.新增表单控件

（1）email输入类型

<input type="email" name="youxiang"/>

此类型要求输入格式正确的email地址，否则浏览器是不允许提交的，并会有一个错误信息提示。此类型在Opera中必须指定name值，否则无效果。

（2）url输入类型

<input type="url" name="dizhi" />

上面代码展示的文本域要求输入格式正确的URL地址，开始处需要添加http://。

（3）日期时间相关输入类型

<input type="date">      <!--格式：  年/月/日 --> 
<input type="time">      <!--格式：  时/分 --> 
<input type="month">     <!--格式：  年/月 -->  
<input type="week">      <!--格式：  年/周 --> 

这一系列是很酷的一个类型，完全解决了烦琐的JS日历控件问题。但目前各种浏览器兼容性不是很好，且展示效果也不一样。

（4）number输入类型

<input type="number"/>

输入框中只能用来输入数字，不支持其他字符，在输入框上有可以点击的上下按钮。但浏览器支持情况不是很好，IE和Firefox不支持。

（5）search输入类型

<input type="search" results=s />

此类型表示输入的将是一个搜索关键字，通过results=s可显示一个搜索小图标。

（6）tel输入类型

<input type="tel" />

此类型要求输入一个电话号码，但实际上它并没有特殊的验证，与text类型没什么区别。

（7）color输入类型

<input type="color" />    

此类型可以让用户通过颜色选择器选择一个颜色值，并反馈到value中。

（8）range滑块

<input type="range" max="100" min="0" step="20" value="10">

具有返回数值结果的滑块控件，可以调节滑块的最大值、最小值以及渐进程度。

3.新增表单属性

（1）placeholder属性

<input type="text" placeholder="文本框提示文字，点击将会清除">

这是一个很实用的属性，免去了用JS实现点击清除表单初始值，标准浏览器都能很好的支持。

（2）required/pattern属性

<input type="text" required pattern="^[1-9]\d{5,12}$">

• 表单验证属性，require类型若输入值为空，则拒绝提交
• pattern类型为正则验证，可以完成各种复杂的验证
• 这两种类型在Opera中必须指定name值，否则无效果

（3）autofocus属性

<input type="text" autofocus="true">

默认聚焦属性，可在页面加载时聚焦到一个表单控件，类似于JS的focus()。

（4）list属性

<input type="text" list="ilist">
<datalist id="ilist">
  <option value="值1"></option>
  <option value="值2"></option>
  <option value="值3"></option>
</datalist>

该属性需要与datalist属性共用，datalist是对选择框的记忆，而list属性可以为选择框自定义记忆的内容。

（5）max/min/step属性

<input type="range" max="100" min="0" step="20" value="10">

• max定义最大值
• min定义最小值
• step定义渐进程度

（6）autocomplete属性

<input type="text" autocomplete="on">

autocomplete属性规定表单是否应该启用自动完成功能。默认值是"on"，为自动补全，如果为"off"则是关闭自动补全功能。