HTML 5之表单新功用解析
日期：2014-04-01 浏览次数：21265 次
时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术改造,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵---HTML 5.虽然HTML 5发布之初,许多人(包括我)都觉得普及它还很悠远,但自发布以来,许多企业级网站对它的尝试使用(比如<!doctype html>使用,比如canvas的使用),使HTML 5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML 5离我们不再悠远.
51CTO推荐专题：HTML 5 下一代Web开发标准详解
学习HTML 5半年不足了,虽然对它的离线存储以及canvas等改造性技术还是一知半解,但我还是希望我如今所学到的能协助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细引见一下HTML 5中对表单功用的更新.。
一、表单结构更自在
XHTML中需求放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML 5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.
比如:
- <form id="iform">
- <input type="text">
- ...
- </form>
- <input value="我在id为iform的表单外" form="foo">
二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示)
email输入类型
- <input type="email" name="email">
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.
url输入类型
- <input type="url">
上面代码展现的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://. 日期时间相关输入类型(这些个很牛X的)
这一系列是很酷的一个类型,完全处理了烦琐的JS日历控件问题.但目前MS只要Opera/Chrome新版本支持,且展现效果也不一样. number输入类型
- <input type="date">
- <input type="time">
- <input type="month">
- <input type="week">
这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.
range输入类型
