新增的表单元素与属性

新增属性

form属性

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

代码如下

username:

url:

点击提交即可看到url:

代码如下

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

formaction属性

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

代码如下

username:

formmethod属性

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

代码如下

username:

placeholder属性

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

代码如下

autofocus属性

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

代码如下

list属性

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

代码如下

order:

1

2

3

autocomplete属性

自动完成允许浏览器预测对字段的输入，在HTML5之前自动完成不能自定义设置，任何人都可以看到，所以存在安全隐患，在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种，不指定时使用浏览器的默认值，这取决于各浏览器的决定。First name:

Last name:

E-mail:

新增元素

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属性

具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示

代码如下

pattern属性

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

代码如下

min属性和max属性

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

代码如下

step属性

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

代码如下

显示验证

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

代码如下

function check(){

var email=document.getElementById("email");

if(email.checkValidity()){

alert("email格式正确");

}else{

alert("email格式不正确");

}

}

取消验证

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

代码如下

据说novalidate可以用于元素，但本人没成功，有兴趣的同学可以试试。

自定义错误

在HTML5中没经过验证的表单浏览器会有默认的提示，但也提供了通过JavaScript的来设置自定义错误提示信息：

代码如下

function showErr(){

var name=document.getElementById("name");

if(name.value==""){

name.setCustomValidity("不能为空");

}

}

增强的页面元素

figure元素

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

代码如下

标志

details元素

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

代码如下

Copyright 2011.

All pages and graphics on this web site are the property of W3School.

不过支持的浏览器比较少。

mark元素

mark元素表示页面需要突出显示或高亮显示的部分，经典的是搜索结果：

代码如下

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

progress元素

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

代码如下

meter元素

定义度量衡

代码如下

high:定义度量的值位于哪个点，被界定为高的值。

low:定义度量的值位于哪个点，被界定为低的值。

max:定义最大值。默认值是 1。

min:定义最小值。默认值是 0。

optimum:定义什么样的度量值是最佳的值,如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。

value:定义度量的值。

改良的ol列表

在HTML5中为ol元素添加了start属性和reversed属性：

代码如下

3

4

5

6

7

改良的dl列表

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

代码如下

术语1

描述...

名字术语2

描述...

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