html5-智能form表单新属性

emptyhan · 发表于 2013-1-29 13:38:54

转载自【http://www.656463.com/article/335】
HTML5 智能form表单新属性，主要包括智能表单介绍和智能表单使用与规范。但在不同支持HTML5的浏览器效果有所差异，使用的时候要注意
智能表单介绍

1、XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。
<FORM id=foo>
…
</FORM>
<INPUT … form="foo">

2、HTML5提供了多样的输入类型和风格，让设计界面更加丰富

<input type="text" list="mydata" /> <datalist id="mydata"> <option label="Top1" value="让子弹飞"> <option label="Top2" value="非诚勿扰2"> <option label="Top3" value="大笑江湖"> <option label="Top4" value="赵氏孤儿"> <option label="Top5" value=“PHP100"></datalist>新属性介绍：autofocus 载入时自动获得焦点required 必填项目placeholder 点击input内容消失pattern 验证正则表达式

3、实例
<!DOCTYPE html><head><meta charset=gbk><title>HTML5视频教程-canvas</title></head><body><form action="" method="get" id="foo">邮件<input type="email" placeholder="请输入正确mail地址"><br>网址<input type="url"><br>日期<input type="date"><br>月份<input type="month"><br> 周 <input type="week"><br>时间<input type="time"><br>数字<input type="number"><br>滑动<input type=range min="0" max="3" step="1"><br>搜索<INPUT type=search results="n" value="搜索"><br>颜色<INPUT type=color><br>正则测试<input type="text" pattern="[789]+" required /><input type="text" list="mydata" /> <datalist id="mydata"> <option label="Top1" value="656463"> <option label="Top2" value="HTML5"> <option label="Top3" value="Javascript"> <option label="Top4" value="赵氏孤儿"> <option label="Top5" value="初恋这件小事"></datalist><input type="submit" value="sub"></form></body></html>

		自动登录	找回密码
密码			立即注册