html5新增了很多标签，其中有部分就是表单这一块，功能颇为强大，本文主要介绍input新增类型与属性。
新增类型：
url:提交表单时检测input的value是否是一个url格式
email:一个电子邮件地址或电子邮件地址列表
date:年-月-日格式的控件
time:时:分格式的控件
datetime:年-月-日 时:分:秒:秒的小数格式的控件，有时区
datetime-local:同上，但没时区
month:年-月格式的控件
week:年-周数格式的控件
number:数字输入框
cel:电话输入框
color:颜色选择框
range:选择区域
新增属性：
placeholder:占位符，当输入框为空时显示的文字
required:该input是否为必填项
list:指定一个datalist，作为下拉提示单
pattern:指定一个正则表达式，用于检查输入是否符合正则
min/max:input能输入的最大/最小字节的长度
step:针对input的range类型，每次递增step的值
实例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>input url类型</title> </head> <body> <form method="post" action="http://www.baidu.com/" oninput="rangeoutput.value=rangename.value"> url:<input type="url" name="" value="" /><br /> email:<input type="email" name="" value="" /><br /> email multiple:<input type="email" multiple name="" value="" /><br /> date:<input type="date" name="" value="2012-1-1" /><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 /> number:<input type="number" name="" value="" /><br /> range:<input type="range" name="rangename" max='100' min='0' step='20' value="1" /> <output name='rangeoutput'>1</output><br /> tel:<input type="tel" name="" value="" pattern="[A-z]{3}"/><br /> color:<input type="color" name="" value="" /><br /> required属性：<input type="text" required name="" value="" x-errormessage='aaa'/><br /> placeholder属性:<input type="text" placeholder="请输入用户名" name="" value="" /> pattern属性:<input type="text" name="" value="" pattern="[A-z]{3}" /> 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 /> maxlength属性:<input type="text" name="" maxlength='3' value="" /> <input type="submit" name="" value="提交" /> </form> </body> </html>
具体实例链接请点击
用脚本获取不同type的input值时，直接获取value就可以。