HTML5新增表单元素、属性、表单验证及增强的页面元素总结
新增的表单元素与属性
新增属性
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>
新增元素
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 定义不同类型的输出；
表单验证
自动验证
所谓自动验证，就是通过为元素添加相应的属性来达到验证的要求
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> | |
显示验证
除了给元素添加属性来自动验证外，在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> | |
取消验证
取消表单验证有两个属性：用于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可以用于元素，但本人没成功，有兴趣的同学可以试试。
自定义错误
在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> | |
增强的页面元素
figure元素
figure是个组合元素，可以带标题figcaption，一个figure只允许放置一个figcaption：
| 代码如下 | |
<figure> <img src="logo.png"> <figcaption>标志</figcaption> </figure> | |
details元素
details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法：
| 代码如下 | |
<details> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details> | |
不过支持的浏览器比较少。
mark元素
mark元素表示页面需要突出显示或高亮显示的部分，经典的是搜索结果：
| 代码如下 | |
<mark>osEye</mark> 的理念以开源项目为中心进行相关的问题讨论。 | |
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> | |
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:定义度量的值。
改良的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> | |
改良的dl列表
dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn
| 代码如下 | |
<dl> <dt>术语1</dt> <dd>描述...</dd> <dt><dfn>名字</dfn>术语2</dt> <dd>描述...</dd> </dl> | |
另外还有cite用于表示作者，small用于标识“小型文本”等。
