H5新增表单属性
form属性
以前，表单内的从属元素必须书写在表单内部。但在H5中可以把表单内的从属元素书写在任何地方，然后给该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。
<form id="testform">
<input type="text">
</form>
<input type="text" form="testform">
placeholder属性
placeholder是指当前文本框处于未输入状态时文本框中显示的输入提示。
<input type="text" placeholder="请输入账号">
autofocus属性
指定控件自动获得焦点。一个页面上只能有一个控件具有该属性。
<input type="text" autofocus>
表单的input类型
对于不支持新增input元素的浏览器来说，统一将这些input元素视为text类型。另外， H5中也没有规定这些元素在各浏览器中的外观形式 ， 所以同样的input元素在不同的浏览器中可 能会有不同的外观。
search类型
search类型的input元素用于输入搜索关键词的文本框。search类型与普通text类型的input仅在外观上有区别。search类型类型的文本框外观可以用css样式进行改写。
iniput[type="search"]{ -webkit-appearance: textfield; }
email类型
email类型的input元素是一种专门用来输入email地址的文本框。
提交时如果该文本框中内容不是email地址格式的文字则不允许提交，但是它并不检查该email地址是否存在。提交时该文本框可以为空，可以通过加上required属性指定必填。
email类型的文本框具有一个multiple属性。它允许在该文本框中输入一串以逗号分隔的email地址。当然，并不强制要求用户输入该email地址列表。
<input type="email" name="email">
number类型
number类型的input元素是一种用来输入数字的文本框。提交时会检查内容是否为数字。它有min、max和step属性。
<input name="number1" type="number" step="5" min="10" max="100" value="25">
range类型
range类型的input元素是一种只允许输入一段范围内数值的文本框。
它有min和max属性，可以设定最小值和最大值（默认是0和100），它还有step属性，可以指定每次拖动的步幅。
<input name="range" type="range" step="5" min="0" max="100" value="10">
tel类型
tel类型的input元素是一种专门用来输入电话号码的文本框。
它没有特殊的检验规则，不强制输入数字，因为许多电话号码带有其他文字（如86-8688888）。但可以通过pattern属性来指定对于输入的电话号码的格式的验证。
<input type="tel">
url类型
url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中的内容不是url地址格式的文字，则不允许提交。
<input name="url" type="url" value="http://www.baidu.com">
date类型
date类型的input元素以日历的形式方便用户输入。
<input name="date1" type="date" value="2010-10-02">
time类型
time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查。它的外观取决于浏览器，可能是简单的文本框，只在提交时检查是否在其中输入了有效的时间，也可能以时钟形式出现，还可以携带时区。
<input name="time1" type="time" value="10:00">
datetime类型
datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。
<input name="datetime1" type="datetime">
datetime-Iocal类型
datetime-Iocal类型的input元素是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。
<input name="datetime-local1" type="datetime-local">
month类型
month类型的input元素是一种专门用来输入月份的文本框，并且在提交时会对输入的月份的有效性进行检查。
<input name="month1" type="month" value="2010-10">
week类型
week类型的input元素是一种专门用来输入周号的文本框，并且在提交时会对输入的周号之有效性进行检查。它可能是一个简单的输入文本框，允许用户输入一个数字；也可能更复杂、更精确。
<input name="week1" type="week" value="2010-W40">
color类型
color 类型的input元素用来选取颜色，它提供了一个颜色选取器。
<input name="color" type="color">
output元素
output元素定义不同类型的输出，比如计算结果或脚本的输出。output元素必须从属于某个表单，也就是说，必须将它书写在表单内部，或 者对它添加form属性。
<form id="testform">
请选择一个数值：
<input name="range1" type=range min=0 max=100 step=5/>
<output onforminput="value=range1.value">50</output>
</form>
表单验证
自动验证
在H5中，通过对元素使用属性的方法，可以实现在表单提交时执行自动验证的功能。
required属性
在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素中必须输入内容。
pattern属性
对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。
min属性与max属性
min与max这两个属性是数值类型或日期类型的input元素的专用属性，它们限制了在input元素中输入的数值与日期的范围。
step属性
step属性控制input元素中的值增加或减少时的步幅。例如当你想让用户输入的值在0与100之间，但必须是5的倍数时、你可以指定step为5。
显式验证
除了对input元素添加属性进行元素内容有效性的自动验证外，在H5中，form元素与input元素 (包括select元素与textarea元素)都具有一个checkValidity方法。调用该方法，可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity方法以boolean的形式返回验证结果。
<script language="javascript">
function check(){
var email = document.getElementById("email");
if(email.value==""){
alert("请输入Email地址");
return false;
}
else if(!email.checkValidity())
alert("请输入正确的Email地址");
else
alert("您输入的Email地址有效");
}
</script>
<form id=testform onsubmit="return check();">
<label for=email>Email</label>
<input name=email id=email type=email /><br/>
<input type=submit>
</form>
另外，在H5中，form元素与input元素都还存在一个validity属性，该属性返回一个ValidityState对象。该对象具有很多属性，但最简单、最重要的属性为valid属性，它表示了表单内所有元素内容是否有效或单个input元素内容是否有效。
取消验证
有时我们可能想要把表单临时提交一下，但又不想让它进行表单中所有元素内容的有效性检查。
有两种方法取消表单验证，第一种方法是利用form元素的novalidate属性，它可以关闭整个表单验证。
譬如，一个非常大的表单需要分成两部分，在第二部分中有个文本框中内容是必须要填的，如果填每一部分内容则会耗时较多，或填完第一部分之后，第二部分要过一段时间再填，在这种情况下应该允许用户先提交保存第一部分内容。但是同时需要临时取消第二部分的内容表单验证。
当整个表单的第二部分需要验证的内容比较多，但又想先提交表单的第一部分内容时，可以使用novalidate属性。先把该属性设为true，关闭表单验证，提交第一部分内容。然后在提交第二部分时再把它设为false，打开表单验证，提交第二部分内容。
第二种方法是利用input元素或submit元素的formnovalidate属性，利用input元素的formnovalidate属性可以让表单验证对单个input元素失效，当表单的第二部分中需要验证的元素数量很少时，可以只利用这些元素的formnovalidate属性，让表单验证对这些元素失效。
而如果对submit按钮使用了formnovalidate属性，点击该按钮时，相当于利用了form元素的novalidate属性，整个表单验证都失效了。
利用这一点，可以实现"假提交"与"真提交"的效果，例如一个提交按钮，不带表单验证，提交时不进行数据有效性检查，提交时临时保存到文件或什么地方， 另一个提交接钮为真提交，提交后保存到数据库中。
自定义错误信息
在H5中，可以使用JS调用各input元素的setCustomValidity方法来自定义错误信息。
<script language="javascript">
function check(){
var pass1=document.getElementById("pass1");
var pass2=document.getElementById("pass2");
if(pass1.value!=pass2.value)
pass2.setCustomValidity("密码不一致。");
else
pass2.setCustomValidity("");
var email=document.getElementById("email");
if(!email.checkValidity())
email.setCustomValidity("请输入正确的Email地址。");
}
</script>
<form id="testform" onSubmit="return check();">
密码：<input type=password name="pass1" id="pass1" /><br/>
确认密码：<input type=password name="pass2" id="pass2"/><br/>
Email:<input type=email name="email1" id="email"/><br/>
<input type="submit" />
</form>
