html5中新增类型以及属性

　　html表单一直都是web的核心技术之一，有了它才能在web上进行各种各样的应用。html5的forms新增了许多新控件及其API，方便我们对表单的验证。

　　opera对新属性的支持性最好，ie10以下不支持，其他主流浏览器部分支持。

input的新类型：

　　1、url类型（url）：提交表单时检测input的value是否是一个url格式；

　　　　当你什么也不输入的时候，点提交没有什么提示，但当你填入的信息不是一个正确的url时，浏览器会提醒你。

　　2、email：一个电子邮件地址或电子邮件地址列表；

　　　　这个和url同样。

　　3、number：数字输入框；

　　　　右边有两增减图标。

　　4、tel：电话输入框；

　　　　点提交没有任何提示，tel需要配合新增属性pattern来使用。

　　5、color：颜色选择框；

　　　　当点击黑框时，会弹出颜色选择框供你选择。

　　6、range：选择区域；

　　7、各种日期：

　　　　　　date:年-月-日格式的控件

　　　　　　time:时:分格式的控件

　　　　　　datetime:年-月-日 时:分:秒:秒的小数格式的控件，有时区

　　　　　　datetime-local:同上，但没时区

　　　　　　month:年-月格式的控件

　　　　　　week:年-周数格式的控件

　　　　　　　当点击黑色下三角符号时会弹出如下日起选择框供你选择日期：

　　　　　　　　代码如下：

　　　　<form action="###">

　　　　　　date:<input type="date" name="" value="" /><br />
　　　　　　time:<input type="time" name="" value="" /><br />
　　　　　　datetime:<input type="datetime" name="" value="" /><br />
　　　　　　datetime-local:<input type="datetime-local" name="" value="" /><br />
　　　　　　month:<input type="month" name="" value="" /><br />
　　　　　　week:<input type="week" name="" value="" /><br />

　　　　　　<input type="submit"/>
　　　　</form>

input的新属性：

　　1、placeholder:占位符，当输入框为空时显示的文字；

　　　　<form action="###">
　　　　　　placeholder属性:<input type="text" placeholder="请输入用户名" name="" value="" />
　　　　　　<input type="submit"/>
　　　　</form>

　　　　如上面的代码，placeholder中写的值如上图所示，当点击文本框时，”请输入用户名“会自动消失。

　　2、required:该input是否为必填项；

　　　　<form action="###">

　　　　　　required属性：<input type="text" required name="" value=""/><br />

　　　　　　<input type="submit"/>
　　　　</form>

　　　　当点击提交时，框中也没有输入任何东西时，会出现提示。

　　3、list:指定一个datalist，作为下拉提示单；

　　　　当第一次点击框时不会出现下拉菜单，当第二次点击框时会出现下拉菜单供你选择。list属性和datalist标签配合使用，如下：　

　　　　<form action="###">
　　　　　　list属性:<input type="url" list="url_list" name="link" />
　　　　　　<datalist id="url_list">
　　　　　　　　<option label="W3School" value="http://www.w3school.com.cn" />
　　　　　　　　<option label="Google" value="http://www.google.com" />
　　　　　　　　<option label="Microsoft" value="http://www.microsoft.com" />
　　　　　　</datalist><br />
　　　　　　<input type="submit"/>
　　　　</form>

　　4、min/max:input能输入的最大/最小字节的长度；

　　<form action="###">
　　　　<input type="number" name="points" min="0" max="10" step="3" value="6" /><br />
　　　　<input type="submit"/>
　　</form>

　　5、step:对input的range类型，每次递增step的值，number中也可以用到，如上面的代码；

　　<form action="###">
　　　　range:<input type="range" name="rangename" max=‘100‘ min=‘0‘ step=‘20‘ >
　　　　<input type="submit"/>
　　</form>

　　6、pattern:指定一个正则表达式，用于检查输入是否符合正则；

　　　<form action="###">
　　　　　pattern属性:<input type="text" name="" value="" pattern="[A-z]{3}" />
　　　　　<input type="submit"/>
　　　</form>

　　　当框中输入不符合pattern属性所要求的值时，会出现提示。