HTML5新增元素及使用——表单篇

form相关的元素

form属性

在HTML5中表单元素可放在表单之外，通过给该元素添加form属性来指向目标表单（form属性值设为目标表单id）即可。

formaction属性

HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址。

<input formaction="new.html" type="submit" value="提交到new.html">

formmethod属性

用法同formaction。

placeholder属性

用于文本框处于未输入状态时的一种文字提示。

autofocus属性

自动获得焦点，一个页面只能有一个控件具有该属性。

<input name="username" autofocus type="text" id="username">

list属性

用于单行文本框，该属性的值为某个datalist元素的id，增加该属性后的单行文本框类似选择框(select)，但允许用户自定义输入，为了避免没有支持该元素的浏览器出现错误，我们通常使用CSS设置不显示。
<datalist> 标签:定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

<input list="list" name="order" autofocus type="text" id="order">
<datalist id="list" style="display:none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</datalist>

autocomplete属性

自动完成允许浏览器预测对字段的输入，HTML5实现了自定义设置该属性，避免了任何人都可以看到所存在的安全隐患。该属性值有“on”、”off“或“”(不指定)三种，不指定时使用浏览器的默认值。

input元素种类

• search：与text文本框类似，用于搜索；

• tel： 与text文本框类似，用于电话；

• url： 与text文本框类似，用于url格式的地址；

• email： 与text文本框类似，用于email格式的地址；

• number： 与text文本框类似，用于数值；

• range： 只允许输入一段范围内的数值，通过min和max属性来设置范围；

• color： 颜色文本框，“#000000”格式的文字；

• file： 文件选择文本框，HTML5中通过multiple属性可以多选；

• datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框；

• output： 定义不同类型的输出；

表单验证相关

• 自动验证（就是通过伪元素添加相应的属性来达到验证的要求）

• required属性：具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示。

• pattern属性：具有该属性的元素，如果内容不为空则把内容与pattern的值进行正则匹配，匹配不成功则不通过并提示。

• min属性和max属性：它们是值类型和日期类型的input元素专用属性，限制了输入的范围。

• step属性：控制元素的值增加或减少的步幅，如输入1-100之间的数字，且步幅是5，那么只能输入1、6、11…。

显示验证（除了给元素添加属性来自动验证外，在HTML5中，form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法，调用该方法可以进行手动验证，checkValidity方法以boolean的形式返回验证结果）

 function check(){
     var email=document.getElementById("email");
     if(email.checkValidity()){
     alert("email格式正确");
     }else{
     alert("email格式不正确");
     }
 }  

取消验证（取消表单验证有两个属性：用于form的novalidate和用于submit的formnovalidate）

//用于form的novalidate
        <form novalidate>
        <input type="text" name="name" id="name" required>
        <input type="submit" name="button" id="button" value="提交">
        </form>

        //用于submit的formnovalidate
        <form>
        <input type="text" name="name" id="name" required>
        <input type="submit" orfmnovalidate name="button" id="button" value="提交">
        </form>