html5表单新增的元素与属性

1.表单内元素的form属性

在html4中，表单内的从属元素必须书写在表单内部，

而在html5中，可以把他们书写在页面上任何地方，

然后为该元素指定一个form属性，属性值为该表单的id,这样就可以声明该元素从属于表单了。

<form id="testform">

     <input type="text">

</form>

<textarea form="testform"></textarea>

2.表单内元素的formaction属性

在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，

而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。

<form id="testform">

     <input type="submit" name="s1" value="v1" formaction="1.jsp">提交到1.jsp页面

     <input type="submit" name="s2" value="v2" formaction="2.jsp">提交到2.jsp页面

     <input type="submit" name="s3" value="v3" formaction="3.jsp">提交到3.jsp页面

</form>

3.表单内元素的formmethod属性和formenctype属性

在html4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面，

所以每个表单内页只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性

来对每一个表单元素分别指定不同的提交方法。

<form id="testform">

     <input type="submit" name="s1" value="v1" formmethod="post" formaction="1.php">提交

     <input type="submit" name="s2" value="v2" formmethod="get" formaction="2.php">提交

</form>

4.表单内元素的formenctype属性

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

在html5中，可以使用formenctyp属性对表单元素分别指定不用的编码方式。

<form id="formtest">

     <input type="text" formenctype="text/plain">

     (表单数据中的空格被转化成加号+,但不对表单中的特殊字符进行编码。)

     <input type="text" formenctype="multipart/form-data">

     （不对字符进行编码，在使用包含文件上传控件的表单时，必须使用该值）

     <input type="text" formenctype="application/x-www-form-urlencoded">

     （在发送前编码所有字符，当表单元素的formmethod属性给get时，浏览器则用当前的编码方式把表单数据转换成一个字符。）

</form>

5.表单内元素的formtarget属性

在html4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。

在html5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。

_blank   新的窗口

_self     当前窗口

_parent    当前框架的父窗口打开

_top    当前窗口

framename   指定窗口

<form id="testform">

     <input type="submit" name="s1" formtarget="_blank" value="v1" formmethod="post" formaction="1.php">提交

     <input type="submit" name="s2" formtarget="_self" value="v2" formmethod="get" formaction="2.php">提交

</form>

6.表单内元素的autofocus属性

为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。

7.表单内元素的required属性

html5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，

同时在浏览器中显示信息提示文字。

<form action="123.php">

     <input type="text" required="required">

      <button type="submit">提交</button>

</form>

8.表单内元素的labels属性

在html5中，为所有可使用标签的表单元素，button、select元素等，定义一个labels属性，属性值为一个nodelist对象，

代表该元素所绑定的标签元素所构成的集合。

<form id="testform">

     <label id="label" 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");

     var button=document.getElementById("btnValidate");

     var form=document.getElementById("testform");

     if(txtName.value.trim()==""){

          var label=document.createElement("label");

          label.setAttribute("for","txt_name");

          form.insertBefore(label,button);

          txtName.labels[1].innerHTML="请输入姓名 ";

          txtName.labels[1].setAttribute("style","font-size:9px;color:red;");

     }

}

</script>