HTML5之表单详解

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

HTML5
时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵—HTML5.虽然HTML5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML5离我们不再遥远.
学习HTML5半年有余了,虽然对它的离线存储以及canvas等革新性技术还是一知半解,但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细介绍一下HTML5中对表单功能的更新.
阅读本文前建议在Opera最新版中打开样例演示页html520110220.htm" target=_blank>查看样例演示
一、表单结构更自由
XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.
比如:

view source 

print?

1
<FORM id=iform> 

2
<INPUT> 

3
    ... 

4
</FORM> 

5
<INPUT value=我在id为iform的表单外 form="foo">

二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示)
email输入类型

view source 

print?

1
<INPUT type=email name=email>

此类型要求输入格式正确的email地址,否则浏览

补充：web前端 , HTML/CSS  ,