HTML5之表单详解

请在新版标准浏览器(Chrome/Opera/Firefox/Safari…)中浏览本文中的样例,否则你看到的只是一个个空白的表单! ⊙﹏⊙‖∣

HTML5
时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如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实现动态显示当前时间(12/24小时制)

今天又要用到动态显示当前时间,且要求可以切换24/12小时制, 记得很久前写过一个24小时制的,但一时没能找着, 于是又重新写了个,若有需要的朋友自行复制粘贴一份吧.
很简单的一个功能函数,实现方式不多言,用Date()对象获取到当前时间,然后用setTimeout每隔1秒获取最新的时间.
写的过程中碰到过一个小小的问题: 我最初的想法是用setInterval()每隔1秒获取最新时间,可是可以,但setInterval如果放在主函数内部,但导致内存泄漏(至于原因,暂时还没想明白),后来在Rocky的提醒下用setTimeout()才解决内存泄漏问题,感谢Rocky同学:)
核心代码及演示查看样例演示

function nowTime(ev,type){
	/*
	 * ev:显示时间的元素
	 * type:时间显示模式.若传入12则为12小时制,不传入则为24小时制
	 */
	//年月日时分秒
	var Y,M,D,W,H,I,S;
	//月日时分秒为单位时前面补零
	function fillZero(v){
		if(v<10){v='0'+v;}
		return v;
	}
	(function(){
		var d=new Date();
		var Week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
		Y=d.getFullYear();
		M=fillZero(d.getMonth()+1);
		D=fillZero(d.getDate());
		W=Week[d.getDay()];
		H=fillZero(d.getHours());
		I=fillZero(d.getMinutes());
		S=fillZero(d.getSeconds());
		//12小时制显示模式
		if(type && type==12){
			//若要显示更多时间类型诸如中午凌晨可在下面添加判断
			if(H<=12){
				H='上午 '+H;
			}else if(H>12 && H<24){
				H-=12;
				H='下午 '+fillZero(H);
			}else if(H==24){
				H='下午 00';
			}
		}
		ev.innerHTML=Y+'年'+M+'月'+D+'日 '+' '+W+' '+H+':'+I+':'+S;
		//每秒更新时间
		setTimeout(arguments.callee,1000);
	})();
}

写在农历2011年初…

农历卯兔年, 第八天, 回归了平稳的日常工作生活学习.
混混噩噩, 新年期间把HTML5画布与HTML5离线弄明白的计划被搁置, 博客也有半月之久没有更新.
每年都为自己写一个简单的年终总结. 2011, 也不会例外.
2010悄然远去. 有得有失,有悲有喜.没有感慨.生活的本质亦是如此,谁也不能预示未来的样子.但,可以好好的把握现在. 我不信鬼神.
2010, 家人身体健康顺心如意;
2010, 感情稳定,身体欠佳,工作努力中;
2010, 付出有所回报, 自己的专业技能有质的飞跃;
2010, 存够了2010年初的预定数额,但在物价飞涨的和谐国度里此钱已非彼钱.
生活要继续,工作要继续,学习永不停歇.新的一年,不给自己太多压力.努力就好.在心里给自己画个小圈圈,记下几个小小的目标.
年轮流转.少年与青年之间刹那而已.站在80后的尾巴上,与90后00后渐行渐远.想起5年前青涩的自己(有文末不成文的小诗为证). 为事处人, 思而后行.
努力健康,多喝水少熬夜. 另外, 还要做一个艰难的决定:少吃肉!
新的一年,没有豪言壮语,没有旦旦誓言.好好工作,好好学习,健康生活,多读史书,爱生活,爱老婆.

附: 写于2006农历年初的《又一年》:

烟花飞扬的夜晚
寂寞的时钟静静地流转
一段往事如烟散尽
轮回的歌里开始了又一年

频频回首
眼眸流落无尽的怀念
昨日的梦想渐行渐远
如爱阑珊

双手紧捂呆滞的双眼
指缝间浪迹着仓皇的着恋
多少美丽的故事
发黄成古旧的照片

刻画着苍凉的脸上
命轮依然默默的延碾
又一年的又一个春天
是否会温暖


渔夫科技