【www.bbyears.com--html5教程】
新增的表单元素与属性
新增属性
form属性
在HTML5中表单元素可放在表单之外,通过给该元素添加form属性即可,如:
url:
点击提交即可看到url:
formaction属性
HTML5给提交按钮(如button、submit、image等)增加了formaction属性,以便提交到不同的服务器地址,如:
formmethod属性
既然对提交按钮有了formaction属性,就相应的有了formmethod属性:
placeholder属性
给文本框(text或textarea)处于未输入状态时的一种文字提示:
autofocus属性
自动获得焦点,一个页面只能有一个控件具有该属性:
list属性
HTML5为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id,增加该属性后的单行文本框类似选择框(select),但允许用户自定义输入,为了避免没有支持该蒜素的浏览器出现错误,我们通常使用CSS设置不显示:
order:
autocomplete属性
自动完成允许浏览器预测对字段的输入,在HTML5之前自动完成不能自定义设置,任何人都可以看到,所以存在安全隐患,在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种,不指定时使用浏览器的默认值,这取决于各浏览器的决定。
新增元素
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的形式返回验证结果。
<script type="text/javascript">
function check(){
var email=document.getElementById("email");
if(email.checkValidity()){
alert("email格式正确");
}else{
alert("email格式不正确");
}
}
</script>
取消验证
取消表单验证有两个属性:用于form的novalidate和用于submit的formnovalidate:
据说novalidate可以用于元素,但本人没成功,有兴趣的同学可以试试。
自定义错误
在HTML5中没经过验证的表单浏览器会有默认的提示,但也提供了通过JavaScript的来设置自定义错误提示信息:
<script type="text/javascript">
function showErr(){
var name=document.getElementById("name");
if(name.value==""){
name.setCustomValidity("不能为空");
}
}
</script>
增强的页面元素
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用于标识“小型文本”等。