HTML5系列：HTML5表单
1. input元素新增类型
url类型
url类型的input元素是一种用来输入url的文本框，提交时如果该文本框中内容不是url格式，则不允许提交。
<input type="url" />
email类型
email类型的input元素是用来输入email的文本框，具有一个multiple属性允许在文本框中输入一串以逗号分隔的email地址。
<input type="email" multiple />
date类型
date类型的input元素用来输入日期的文本框。
<input type="date" value="2015-04-19" />
time类型
time类型的input元素是用来输入时间的文本框。
<input type="time" value="00:19" />
month类型
month类型的input元素用来输入月份的文本框。
<input type="month" value="2015-04" />
week类型
week类型的input元素用来输入周号的文本框。
<input type="week" value="2015-W20" />
number类型
number类型input元素是用来输入数字的文本框，在提交时会检查其中的内容是否为数字，具有min、max及step属性。
<input type="number" min="1" max="100" step="5" />
range类型
range类型的input元素是只允许输入一段范围内数值的文本框，具有min、max及step属性。
<input type="range" min="0" max="100" step="1" value="0" />
2. input元素新增属性
autofocus属性
autofocus属性是一个Boolean值，在页面加载完成后，input自动获取焦点。
<input type="text" autofocus />
pattern属性
pattern是元素的验证属性，使用正则表达式验证文本输入框中的内容。
<input type="text" pattern="^[a-zA-Z]\w{5,7}$" />
placeholder属性
input元素的placeholder属性为占位属性，显示在输入框中的提示信息，当输入框中输入内容时，该提示信息自动消失；当输入框内容为空时，提示信息重新显示。
<input type="text" placeholder="请输入" />
required属性
input元素required属性用于校验输入内容是否为空。
<input type="text" required />
list属性
input元素list属性的值为某个datalist元素的id，类似于选择框(<select>)，当用户想要设置的值不在选择列表之内时，允许自行输入。
<input type="text" list="weekdays" /> <datalist id="weekdays"> <option value="Sunday">Sunday</option> <option value="Monday">Monday</option> <option value="Tuesday">Tuesday</option> <option value="Wednesday">Wednesday</option> <option value="Thursday">Thursday</option> <option value="Friday">Friday</option> <option value="Saturday">Saturday</option> </datalist>
autocomplete属性
input元素autocomplete属性用于自动完成功能，autocomplete属性可以指定“on”、“off”值。
<input type="text" autocomplete="on" list="weekdays" /> <datalist id="weekdays"> <option value="Sunday">Sunday</option> <option value="Monday">Monday</option> <option value="Tuesday">Tuesday</option> <option value="Wednesday">Wednesday</option> <option value="Thursday">Thursday</option> <option value="Friday">Friday</option> <option value="Saturday">Saturday</option> </datalist>
示例中使用datalist元素中数据作为候补输入的数据在文本框中自动显示。
formnovalidate属性
input元素formnovalidate属性用于设置在表单中不进行验证。
<input type="number" formnovalidate />
3. 新增表单元素
3.1 datalist元素
datalist元素用于附中表单中文本框的数据输入。datalist元素本身是隐藏的，与表单文本框的“list”属性绑定，“list”属性值为datalist元素的ID。
<input type="text"list="weekdays" /> <datalist id="weekdays"> <option value="Sunday">Sunday</option> <option value="Monday">Monday</option> <option value="Tuesday">Tuesday</option> <option value="Wednesday">Wednesday</option> <option value="Thursday">Thursday</option> <option value="Friday">Friday</option> <option value="Saturday">Saturday</option> </datalist>
3.2 output元素
output元素必须从属于某个form，用于在页面中显示各种不同类型表单元素的内容。output元素的“onFormInput”事件，在表单输入框输入内容时触发该事件。
<form> <input id="txtNumber1" type="number" /> * <input id="txtNumber2" type="number" /> = <output onforminput="value = txtNumber1.value * txtNumber2.value"></output> </form>
4. 表单验证
4.1 checkValidity显示验证
表单中的各元素可以利用pattern与required属性验证元素内容的有效性，每个元素都可以通过checkValidity()，校验本身是否与验证条件匹配。如果一致，返回true，否则返回false。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> function Check() { var email = document.getElementById("txtEmail"); if (email.value == "") { alert("Email不能为空！"); return false; } else if (!email.checkValidity()) { alert("Email格式错误！"); return false; } else { alert("Email输入正确！"); return true; } } </script> </head> <body> <form id="form1" onsubmit="return Check();"> <input id="txtEmail" type="email" /> <input type="submit" value="Submit" /> </form> </body> </html>
4.2 取消验证
取消表单验证的两种常用方法：
（1）利用form元素的novalidate属性，关闭整个表单的验证；
（2）利用input元素或submit元素的formnovalidate属性，让表单对单个input元素取消验证。
<form novalidate></form>
<input type="text" formnovalidate />
4.3 setCustomValidity自定义错误信息
在表单与相应规则验证时，由于使用的是系统内置的验证方法，因此在出错提示也是由系统自带的。修改验证出错信息内容调用元素或表单的setCustomValidity()方法。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> function Check() { var email = document.getElementById("txtEmail"); if (email.value == "") { alert("Email不能为空！"); return false; } else if (!email.checkValidity()) { email.setCustomValidity("Email格式错误！"); return false; } else { alert("Email输入正确！"); return true; } } </script> </head> <body> <form id="form1" onsubmit="return Check();"> <input id="txtEmail" type="email" /> <input type="submit" value="Submit" /> </form> </body> </html>
