请在新版标准浏览器(Chrome/Opera/Firefox/Safari…)中浏览本文中的样例,否则你看到的只是一个个空白的表单! ⊙﹏⊙‖∣
时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵—HTML5.虽然HTML5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML5离我们不再遥远.
学习HTML5半年有余了,虽然对它的离线存储以及canvas等革新性技术还是一知半解,但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细介绍一下HTML5中对表单功能的更新.
阅读本文前建议在Opera最新版中打开样例演示页查看样例演示
一、表单结构更自由
XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.
比如:
二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示)
email输入类型
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.
url输入类型
上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.
日期时间相关输入类型(这些个很牛X的)
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.
number输入类型(这些个很牛X的)
这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.
range输入类型
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.
search输入类型
此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.
tel输入类型
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.
color输入类型
此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中.
三、新增的表单属性
placeholder属性
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.
require/pattern属性
表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.
autofocus属性
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().
list属性
该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.
max/min/step属性
限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯.
autocomplete属性
此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.
路漫漫其修远兮，吾将上下而求索.前端之路,学无止尽.痛并快乐着. ╰(￣▽￣)╮
不错，学习了，这些新应用，省去了很多js的验证啊。而且整html的结构代码看着也很干净！
[回复]
就不用使用验证插件了~
[回复]
好好学习一下，很好~~~~
[回复]
Mr Think,你好，一直在通过您的博客学习，有些问题自己不太明白在网上搜过，感觉不知道是谁抄袭谁的，相似的离谱，还有些说的很离谱，所以还是想问下你本人，如果有时间方便，劳烦您给一下确定的解答，不胜感激！
1.下面这个是做什么用的，我访问过去后显示：XML-RPC server accepts POST requests only，
2. 文档声明
这么写跟传统的方式比有什么优点么？
3. <link rel="alternate" 这个属性是用来声明什么内容的
[回复]
Mr.Think 回复:
三月 16th, 2011 at 12:26
@youzi_friend,
声明一下，本文非原创内容均会浏览转载或引用出处。当然，技术性的参数或属性，也会参考相关的手册。你提出的问题均未在本文中讲到，是否是看我网站的源码？
1.不明白你指什么；
2.文档声明最大的好处当然是简洁，并且兼容性良好；
3.这个是一个引用，具体我也不太清楚是何用义，是WP源码中带的，可能对订阅信息的相关属性。这个问题我觉得没有必要去深究。
[回复]
youzi_friend 回复:
三月 22nd, 2011 at 15:19
@Mr.Think, 不好意思，没说清楚，这个是在你的源码上看到的
[回复]
Mr.Think 回复:
三月 22nd, 2011 at 16:37
@youzi_friend, 那个是XML-PRC。即使用了HTTP作为传输协议、XML作为数据内容实现远程方法调用的一个标准（类似WebService）。详细的可以Google一下。
我前端也不行…HTML CSS 都很菜…直接迈向HTML5,博主觉得靠谱不？
[回复]
Mr.Think 回复:
三月 14th, 2011 at 13:55
@黑虫, 不明白为什么你连CSS、XHTML都没弄明白就开始学HTML5。HTML5只是HTML的一个子集，是XHTML的一个更新版本。不管学什么，基础都是最重要的。千万别为了新技术而拔苗助长。
[回复]
嗯，前端之路，确实痛并快乐着~~~
[回复]
http://www.cssmoban.com 免费网站模板 能与站个换个链接吗？：）
[回复]
Mr.Think 回复:
二月 28th, 2011 at 19:47
@网页模板,抱歉,本站不接受非技术类博客.
[回复]
头像之家 http://www.touxianghome.com/ 期待能和您做个友情连接 求回复我qq381510016
[回复]
Mr.Think 回复:
二月 23rd, 2011 at 17:08
@您好, 抱歉,本站不接受非技术类博客.
[回复]
支持度不够，不过确实是蛮不错的改进，期待浏览器们的大支持
[回复]
Mr.Think 回复:
二月 23rd, 2011 at 10:13
@ZH CEXO, 哈,不远了..只要IE6灭亡了就成功80%.
[回复]
唉，太Out了！都在整HTML5了，我XHTML还没整明白！
[回复]
Mr.Think 回复:
二月 23rd, 2011 at 10:14
@前端菜鸟, 学习切忌浮躁.一步一个脚印.把基础打牢比什么都重要.
[回复]