h5表单新增元素与属性form、formaction、formmethod、formenctype、formtarget、autofocus、required、labels

表单内元素的form属性

h5中可以把表单内从属元素书写在页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以生命该元素从属于指定表单了

<form id="textform"></form><textarea form="textform"></textarea>

表单位元素的formaction属性

h4中一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在h5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。

<form id="textform"><input type="submit" name="x1" value="y1" formaction="1.html" /><input type="submit" name="x2" value="y2" formaction="1.html" /></form>

表单位元素的formmethod属性

h4中一个表单只能有一个action属性来对表单内所有元素统一制定提交页面，所以每个表单内页只有一个method属性来统一指定提交方法。在h5中可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。（post和get区别？）

<input type="submit" name="s1" value="v1" formmethod="post" formaction="1.html" />post提交<input type="submit" name="s2" value="v2" formmethod="get" formaction="2.html" />get提交

表单位元素的formenctype属性

h4中表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在h5中，可使用formenctype属性对表单元素分别指定不同的编码

<input type="text" formenctype="text/plain" /><!--表单中的数据空格被转化为+号，但不对表单中特殊字符进行编码 --><input type="text" formenctype="multipart/form-data"/><!--不对字符进行编码，在使用包含文件上传的控件时必须使用该值 --><input type="text" formenctype="application/x-www-form-urlencoded" /><!--发送前编码所有字符，当表单元素的action属性为get时，浏览器则用当前的编码方式，把表单数据转化为一个字符-->

表单位元素的formtarget属性

h4中表单元素target属性用于指定在何处打开表单提交后所需加载的页面。在h5中，可以对多个提交按钮分贝使用formtarget属性来指定提交后在何处打开所需加载的页面。

<input type="submit" name="m1" value="n1" formtarget="_blank" formaction="1.html" />在新窗口页面中打开<input type="submit" name="m1" value="n1" formtarget="_self" formaction="1.html" />formatarget默认值在相同框架frame中打开<input type="submit" name="m1" value="n1" formtarget="_parent" formaction="1.html" />在当前框架的父框架打开<input type="submit" name="m1" value="n1" formtarget="_top" formaction="1.html" />在当前窗口中打开<input type="submit" name="m1" value="n1" formtarget="framename" formaction="1.html" />在指定框架中打开

表单位元素的autofocus属性

为文本框、选择框或者按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。一定是第一优先级的使用这个属性。

<input type="text" autofocus="autofocus" /><!--或者 <input type="text" autofocus-->

表单位元素的required属性

h5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。

<form id="testform"><input type="text" required="required" /><button type="submit">提交</button></form>

表单位元素的labels属性

在h5中为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属于值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。

<form id="testform"><label id="lable" for="txt_name">姓名</label><input id="txt_name" /><input type="button" id="btnValidate" value="验证" onclick="Validate()" /></form><script>function Validate() { //创建函数var txtName = document.getElementById("txt_name"); //获取idvar button = document.getElementById("btnValidate"); //获取button的idvar form = document.getElementById("testform"); //获取form表单idif(txtName.value.trim() == "") { //判断是否为空、空格（加上.trim()的作用）var label = document.createElement("label"); //创建新的元素label.setAttribute("for","txt_name"); //为新元素添加属性form.insertBefore(label,button);//放置在button前面，label表示依赖到父级空间txtName.labels[1].innerHTML = "请输入姓名"; //前面已经有个label，故此下标为1txtName.labels[1].setAttribute("style","font-size: 18;color: royalblue;"); //给样式}}