HTML5表单及其他新增和改良元素

1、表单内元素的form属性
在H4中，表单的从属元素必须书写在表单的内部，而在H5中，可以把它们书写在页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id

上述代码中，input被写在form表单中，不用再为它指定form属性，textarea元素被书写在form表单之外，但它从属于form表单，所以将form表单的id指定给textarea元素的form属性。

2、表单内元素的formaction属性
在H4中，一个表单内的所有元素只能通过表单的action属性统一提交到另一个页面，而在H5中，可以为所有的提交按钮，诸如：<input type="submit">/<input type="image">/<button type="submit">等增加不用的formaction属性，使得在单击不同的按钮时可以将表单提交到不同的页面。

<form id="testForm" action="test.jsp">    <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1.jsp    <input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s1.jsp    <input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到s1.jsp</form>

3、表单元素内的formmethod属性
在H4中一个表单内只有一个action属性用来对表单内所有元素统一指定 提交到页面，所以每个表单也只有一个method属性来统一指定提交方法，在H5中，可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。

<form id="testForm" action="test.jsp">姓名：<input type="text" name="name"><input type="submit" value="post方式提交" formmethod="post">姓名：<input type="text" name="name"><input type="submit" value="get方式提交" formmethod="get"></form>

4、表单元素内的formenctype属性
在H4中，表单元素只有一个enctype属性，该属性用于指定在表单发送到服务器之前应该对表单内的数据进行编码。
表单元素的enctype属性值
application/x-www-form-urlcoded：在发送前编码所有字符，当表单元素的action属性值为get时，浏览器用x-www-form-urlcoded的编码方式把表单数据转换成一个字符串，如“?name=1=value=1&name2=value2……”，然后把这个字符串添加到提交的目标URL地址的后面，使其成为新的目标URL地址；该属性为表单元素的enctype属性的默认属性值
multipart/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值；
text/plain：表单数据中的空格被转换为”+”加号，但不对表单数据中的特殊字符进行编码；

<form action="test.jsp" method="post">    <input type="text" name="name" value="test">    <input type="file" name="files">    <input type="submit" value="上传" formaction="uploadFile.jsp" formenctype="multipart/form-data"></form>

5、表单元素内的formtarget属性
在H4中，表单属性具有一个target属性，该属性用于指定在何处打开表单提交后需要加载的页面
_blank：在新的浏览器窗口打开
_self：target属性默认值，在相同的框架(frame)中打开
_parent：在当前框架(frame)的父框架(frame)中打开
_top：在当前浏览器窗口中打开
framename：在指定的框架(frame)中打开

6、表单元素内的autofocus属性
为文本框，选择框加上autofocus属性，当画面打开时，该空间会自动获得光标焦点。目前做到这一点需要使用javascript，比如：“control.focus()”。autofocus属性的使用方法如下:

<input type="text" autofocus>

一个页面中只能有一个空间具有autofocus属性，从实用角度上来说，不要滥用该属性，笔者强烈建议当一个页面以使用某个控件为目的的时候，才对该控件使用autofocus属性，如：搜索页面的搜索文本框

1、表单内元素的form属性
在H4中，表单的从属元素必须书写在表单的内部，而在H5中，可以把它们书写在页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id

<form id="testForm">    <input type="text"></form>

<textarea form = "testForm"></textarea>

上述代码中，input被写在form表单中，不用再为它指定form属性，textarea元素被书写在form表单之外，但它从属于form表单，所以将form表单的id指定给textarea元素的form属性。

2、表单内元素的formaction属性
在H4中，一个表单内的所有元素只能通过表单的action属性统一提交到另一个页面，而在H5中，可以为所有的提交按钮，诸如：<input type="submit">/<input type="image">/<button type="submit">等增加不用的formaction属性，使得在单击不同的按钮时可以将表单提交到不同的页面。

<form id="testForm" action="test.jsp">    <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1.jsp    <input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s1.jsp    <input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到s1.jsp</form>

3、表单元素内的formmethod属性
在H4中一个表单内只有一个action属性用来对表单内所有元素统一指定 提交到页面，所以每个表单也只有一个method属性来统一指定提交方法，在H5中，可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。

<form id="testForm" action="test.jsp">    姓名：<input type="text" name="name">    <input type="submit" value="post方式提交" formmethod="post">    姓名：<input type="text" name="name">    <input type="submit" value="get方式提交" formmethod="get"></form>

4、表单元素内的formenctype属性
在H4中，表单元素只有一个enctype属性，该属性用于指定在表单发送到服务器之前应该对表单内的数据进行编码。
表单元素的enctype属性值
application/x-www-form-urlcoded：在发送前编码所有字符，当表单元素的action属性值为get时，浏览器用x-www-form-urlcoded的编码方式把表单数据转换成一个字符串，如“?name=1=value=1&name2=value2……”，然后把这个字符串添加到提交的目标URL地址的后面，使其成为新的目标URL地址；该属性为表单元素的enctype属性的默认属性值
multipart/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值；
text/plain：表单数据中的空格被转换为”+”加号，但不对表单数据中的特殊字符进行编码；

<form action="test.jsp" method="post">    <input type="text" name="name" value="test">    <input type="file" name="files">    <input type="submit" value="上传" formaction="uploadFile.jsp" formenctype="multipart/form-data"></form>

5、表单元素内的formtarget属性
在H4中，表单属性具有一个target属性，该属性用于指定在何处打开表单提交后需要加载的页面
_blank：在新的浏览器窗口打开
_self：target属性默认值，在相同的框架(frame)中打开
_parent：在当前框架(frame)的父框架(frame)中打开
_top：在当前浏览器窗口中打开
framename：在指定的框架(frame)中打开

6、表单元素内的autofocus属性
为文本框，选择框加上autofocus属性，当画面打开时，该空间会自动获得光标焦点。目前做到这一点需要使用javascript，比如：“control.focus()”。autofocus属性的使用方法如下:

<input type="text" autofocus>

一个页面中只能有一个空间具有autofocus属性，从实用角度上来说，不要滥用该属性，笔者强烈建议当一个页面以使用某个控件为目的的时候，才对该控件使用autofocus属性，如：搜索页面的搜索文本框

12、文本框的autocomplete属性
辅助输入所用的自动完成功能，是一个既节省输入时间又十分方便的功能，在H5之前，因为谁都可以看见输入的值，所以在安全方面存在 缺陷，只要使用autocomplete属性，也可以在安全性方面得到很好的控制；
对于autocomplete属性，可以指定“on”、“off”与“”(不指定)这三个值，在不进行指定时，使用浏览器的默认值(取决于各个浏览器决定)。把该属性设为“on”时，可以显示指定候补数据的数据列表。使用datalist元素与list属性提供候补输入的数据列表，在执行自动完成时，可以 将datalist元素中的数据作为候补输入的数据在文本框中自动显示。

<input type="text" name="greeting" autocomplete="on" list="greeting">

13、文本框的pattern属性
在H5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式时，在提交时 会对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合给定 的格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定的格式。

<form>    请输入指定格式的内容<input type="text" pattern="[0-9][a-z]{3}" name="pattern">    <input type="submit"></form>

P.S.：一个数字三个字母

14、文本框的selectionDirection属性
针对input元素以及textarea元素，H5增加了selectionDirection属性，当用户在这两个元素中用鼠标选取部分文字时，可以用过该属性来获取选取方向，当用户正向选取文字时，该属性值为“forward”，当用户反向选取文字时，该属性值为”backward”，当用户没有选取任何文字时，该属性值为“forward”。

15、对复选框的indeterminate属性
对复选框checkbox来说，过去只有选取与非选取两种状态，在H5中，可以在javascript脚本代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。
在javascript脚本代码中，使用布尔类型的值对indeterminate属性进行赋值，。当属性值为true时，浏览器中的复选框将显示为不明状态。需要注意的是，indeterminate属性与checked属性是两种不同的属性。如果只考虑将indeterminate属性与checked属性结合使用可能会被认为复选框具有“两个属性值均为false”、两个属性值均为“true”与“checked=fasle、indeterminate=false”这4种状态，但实际上复选框只具有选取、非选取与不明这三种状态，因此，在javascript脚本 代码中对复选框的状态进行判断时，应该先判断复选框的indeterminate属性值，然后判断复选框的checked属性值；

if(checkbox.indeterminate){    //复选框处于不明状态    }else{    if(checkbox.checked){    //复选框处于选取状态    }else{    //复选框处于非选取状态    }}

16、image提交按钮的height属性与width属性
针对类型为image的input元素(用于表单提交的图片按钮)，H5新增了以下两个属性
height：用于指定图片按钮这种图片的高度
width：用于图片按钮中图片的宽度

17、textarea元素的maxlength属性与wrap属性
针对textarea属性，H5增加了maxlengtj属性以及wrap属性——
maxlength：使用整型数值进行设定，用于限定textarea元素中可输入的文字的个数
wrap：可指定属性值为soft与hard，当属性值为hard时，如果向textarea元素中输入的文字个数超出使用textarea元素的cols属性所限定的每行中可现实文字个数而导致文字换行时(注意不是用户通过按回车或其他方法的换行标志)，提交表单时会在换行处加入一个换行标志。当属性值为soft时不加入 换行标志。当设定wrap属性值为hard时，必须指定cols属性值

18、大幅度增加与改良input元素的种类

<input type="date" max="2017-10-10" min="2015-12-12" name="date">

19、output元素的追加
在H5中，追加了新的元素output。output元素定义不同类型的输出，比如计算结果或者脚本的输出。output元素必须从属于某个表单，也就是说，必须将它书写在表单内部或者对他添加form属性。

<script>    function value_change(){    var number = document.getElementById("range1").value;    document.getElemetById("output1").value=number;}</script><form id="testForm">    <input id="range1" type="range" max = 100 min=0 setup=5 value=10 onchange="value_change()"></form>

20、取消验证
有两种方法取消表单验证——
第一种方法是利用form元素的novalidate属性来关闭整个表单验证。当整个表单的第二部分需要验证的内容比较多且想先提交表单的第一部分内容时，可以使用这种方法。先把novalidate属性设为true，关闭表单验证，提交第一部分内容，然后在提交第二部分时再把它设为false，打开表单验证，提交第二部分内容。
第二种方法是利用input元素或是submit元素的formnovalidate属性，利用这个属性可以让单个input元素失效，当表单的第二部分需要验证的元素数量很少时，可以利用这些元素的formnovalidate，让表单验证对这些元素失效。

21、显示验证
除了对input元素添加属性进行元素内容有效性的自动验证外，在H5中，form元素与input元素(包括select元素与textarea元素)都具有一个checkValidity方法。调用该方法，可以显式的队表单内所有元素内容或者单个元素进行有效性验证。checkValidity方法将验证结果用boolean的形式进行返回。
另外还要提到的是，在H5中，form元素与input元素都还存在一个validity属性，该属性返回一个ValidityState对象。该对象具有很多属性，其中最简单的、最重要的属性为valid属性，它表示表单内所有元素是否有或单个input元素内容是否有效。

22、新增的figure元素与figcaption元素
figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部，可以书写在figure元素内的其他从属元素的前面或者后面。一个figure元素内最多只允许放置一个figcaption元素，但允许放置多个其他元素。