HTML5表单

新增的表单元素与属性

1. 新增属性
   • form属性
     在HTML5中表单元素可放在表单之外，通过给该元素添加form属性即可，如：

     <form method="get" id="test">
      username:<input name="username" type="text" id="username" value="oseye">
      <input type="submit" value="提交">
     </form>
     url:<input form="test" name="url" type="text" id="url" value="http://www.oseye.net">

     点击提交即可看到url:

     ?username=oseye&button=提交&url=http%3A%2F%2Fwww.oseye.net

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

     <form method="get" id="test">
         username:<input name="username" type="text" id="username" value="oseye">
       <input formaction="a.html" type="submit" value="提交到a.html">
       <input formaction="b.html" type="submit" value="提交到b.html">
     </form>

   • formmethod属性
     既然对提交按钮有了formaction属性，就相应的有了formmethod属性：

     <form method="get" id="test">
       username:<input name="username" type="text" id="username" value="oseye">
       <input formaction="a.html" formmethod="get" type="submit" value="get提交到a.html">
       <input formaction="b.html" formmethod="post" type="submit" value="post提交到b.html">
     </form>

   • placeholder属性
     给文本框(text或textarea)处于未输入状态时的一种文字提示：

     <input name="username" placeholder="oseye" type="text" id="username">

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

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

   • list属性
     HTML5为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id，增加该属性后的单行文本框类似选择框(select)，但允许用户自定义输入，为了避免没有支持该蒜素的浏览器出现错误，我们通常使用CSS设置不显示：

     order:<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之前自动完成不能自定义设置，任何人都可以看到，所以存在安全隐患，在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种，不指定时使用浏览器的默认值，这取决于各浏览器的决定。

     <form action="/autocomplete.html" method="get" autocomplete="on">
         First name:<input type="text" name="fname" /><br />
         Last name: <input type="text" name="lname" /><br />
         E-mail: <input type="email" name="email" autocomplete="off" /><br />
         <input type="submit" />
     </form>

2. 新增元素
   HTML5大幅度地增加和改良了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 定义不同类型的输出；

表单验证

1. 自动验证
   所谓自动验证，就是通过为元素添加相应的属性来达到验证的要求
   • required属性
     具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示

     <form>
       <input required type="text">
       <input type="submit" value="提交">
     </form>

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

     <form>
       <input pattern="d+" type="text">
       <input type="submit" value="提交">
     </form>

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

     <form>
       <input min="10" max="100" type="number">
       <input type="submit" value="提交">
     </form>

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

     <form>
       <input min="11" max="100" step="5" type="number">
       <input type="submit" value="提交">
     </form>

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

   <form name="form1" method="post" action="">
     <input type="email" name="email" id="email">
     <input type="button" name="button" id="button" value="按钮" onClick="check()">
   </form>
   <script type="text/javascript">
   function check(){
   	var email=document.getElementById("email");
   	if(email.checkValidity()){
   		alert("email格式正确");
   	}else{
   		alert("email格式不正确");
   	}
   }
   </script>

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

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

   据说novalidate可以用于元素，但本人没成功，有兴趣的同学可以试试。
4. 自定义错误
   在HTML5中没经过验证的表单浏览器会有默认的提示，但也提供了通过JavaScript的来设置自定义错误提示信息：

   <form>
     <input type="text" name="name" id="name" required>
     <input type="submit" name="button" id="button" onClick="showErr();" value="提交">
   </form>
   <script type="text/javascript">
   	function showErr(){
   		var name=document.getElementById("name");
   		if(name.value==""){
   			name.setCustomValidity("不能为空");
   		}	
   	}
   </script>

增强的页面元素

1. figure元素
   figure是个组合元素，可以带标题figcaption，一个figure只允许放置一个figcaption：

   <figure>
   	<img src="logo.png">
   	<figcaption>标志</figcaption>
   </figure>

2. details元素
   details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法：

   <details>
   	<summary>Copyright 2011.</summary>
   	<p>All pages and graphics on this web site are the property of W3School.</p>
   </details>

   不过支持的浏览器比较少。
3. mark元素
   mark元素表示页面需要突出显示或高亮显示的部分，经典的是搜索结果：

   <mark>osEye</mark> 的理念以开源项目为中心进行相关的问题讨论。

4. progress元素
   可以给progress设置value和max属性，value表示已经进行的，max表示总数，value和max只能为有效的浮点数，value必须大于0小于等于max。如果不给progress设置这两个属性，则是动态显示正在进行，进度不确定。

   <p><progress /></p>
   <p><progress value="20" max="100" /></p>
   <p><progress value="0.5" /></p>

5. meter元素
   定义度量衡

   <p><meter value="0.3"></p>
   <p><meter value="10" max="100" low="20"></meter></p>
   <p><meter value="20" max="100" high="60"></meter></p>
   <p><meter value="80" max="100" high="60"></meter></p>

   • high:定义度量的值位于哪个点，被界定为高的值。
   • low:定义度量的值位于哪个点，被界定为低的值。
   • max:定义最大值。默认值是 1。
   • min:定义最小值。默认值是 0。
   • optimum:定义什么样的度量值是最佳的值,如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
   • value:定义度量的值。
6. 改良的ol列表
   在HTML5中为ol元素添加了start属性和reversed属性：

   <ol start="3" reversed>
   	<li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
   </ol>

7. 改良的dl列表
   dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn

   <dl>
       <dt>术语1</dt>
       <dd>描述...</dd>
       <dt><dfn>名字</dfn>术语2</dt>
       <dd>描述...</dd>
   </dl>

8. 另外还有cite用于表示作者，small用于标识“小型文本”等。