html5关于form元素的介绍
众所周知，在web编程中，表单主要用于收集用户输入的数据。HTML5在保留原有HTML表单控件，属性的基础上，大大增强了表单，表单控件的功能。下面我将介绍一些HTML5表单及其控件的知识。
#form
form元素用于生成输入表单，该元素不会可视化，它除了包含像id,class等基本属性和像onclick等事件属性外，还包含了action,method等属性。##action 指定表单被提交的地址。
##method 指定提交表单的请求类型。有post和get两种方式
##enctype 指定对表单内容进行编码所使用的字符集
##name 表单的唯一标识
##target 指定打开目标url的方式。有_blank,_self,_parent,和_top四个值
除此之外，html5还新增了一些属性。
- form属性：可以让表单控件定义在<form…/>标签之外。
- formaction属性：可以通过该属性使得两个按钮提交到不同的地址
- form****属性：像formtarget,formmethod,用法与formaction相似。
- autofocus属性：自动获得焦点
- placeholder属性：在文本框中显示对用户的提示信息。
- list属性：相当于文本框和下拉菜单结合的组件。
- autocomplete属性：自动完成功能，浏览器会根据用户上次提交的数据生成列表框供用户选择。
- labels属性：可以通过访问文本框来访问对应的label元素。
- selectionDirection属性用于返回文本框的文字选择方向。
- indeterminate属性：表明复选框是否处于“不确定”状态。
#input
input元素是表单控件中功能最丰富的。type有如下一些类型：##text 单行文本框
##password 密码输入框
##hidden 隐藏框
##radio 单选框
##checkbox 复选框
##image 图像域
#file 文件上传域
##submit,button,reset 提交，无动作，重置按钮
具体用法如下：
<!DOCTYPE html> <html><head></head> <body> <form action="#" method="get"> <label>单行文本框：<input id="username" name="ursename" type="text"/></label><br/> 不能编辑的文本框：<input id="username2" name="username2" type="text" readonly="readonly" value="abc"/><br/> <label for="password">密码框：</label> <input id="password" name="password" type="password"/><br/> 隐藏框：<input id="hidden" name="hidden" type="hidden" value="123"/><br/> 第一组单选框：<br/> 红：<input id="red" name="color" type="radio" value="red"/> 绿：<input id="green" name="color" type="radio" value="green"/> 蓝：<input id="blue" name="color" type="radio" value="blue"/><br/> 两个复选框：<br/> leegang.org:<input id="a" name="website" type="checkbox" value="leegang.org"/> crazyit.org:<input id="b" name="website" type="checkbox" value="crazyit.org"/><br/> 文件上传框：<input id="file" name="file" type="file"/><br/> 图像域：<input type="image" src="images/logo.png" alt="上传图像失败" width="97" height="61"/><br/> 下面是四个按钮：<br/> <input id="ok" name="ok" type="submit" value="提交"/> <input id="dis" name="dis" type="submit" value="提交" disabled/> <input id="cancle" name="cancle" type="reset" value="重置"/> <input id="no" name="no" type="button" value="无动作"/> </form>
当然input元素也存在一些属性，像checked,disabled等，在这里就不一一介绍了。如果想要进一步了解，可以参考菜鸟教程http://www.runoob.com/html/html-forms.html来加深理解。
另外HTML5也增加了一些属性及元素：
- color:颜色选择器
- date:日期选择器
- time:时间选择器
- datetime-local:本地日期，时间选择器
- week:一个选择第几周的文本框
- month:月份选择器
- email:生成一个只能输入符合email格式的文本框
- tel:生成一个只能输入电话号码的文本框
- url:生成一个url输入框
- number:生成一个只能输入数字的文本框
- range:拖动条
- search:生成一个专门用于输入搜索关键字的文本框
<form action="#" method="post">
color文本框：<input type="color" name="color" onchange="a.value=this.value"/>
<output name="a" for="color"></output><br/>
date文本框：<input type="date" name="date"/><br/>
time文本框：<input type="time" name="time"/><br/>
datetime-local文本框：<input type="datetime-local" name="datetime-local"/><br/>
month文本框：<input type="month" name="month"/><br/>
week文本框：<input type="week" name="week"/><br/>
email文本框：<input type="email" name="email"/><br/>
tel文本框：<input type="tel" name="tel"/><br/>
url文本框：<input type="url" name="url"/><br/>
number文本框：<input type="number" name="number" min="0" max="100" step="5"/><br/>
range文本框：0<input type="range" name="range" min="0" max="100" step="5" onchange="b.value=this.value"/>100
<output name="b" for="range"></output><br/>
search文本框：<input type="search" name="search" required pattern="\d{3}-\d-\d{5}"/><br/>
#label
label元素是用于定义标签的，使标签与表单控件之间存在联系。共有两种方式：- 隐式使用for属性
- 显示关联
有如下代码：
<form action="#" method="get"> <!--隐式关联--> <label for"username">单行文本框:</label> <input id="username" name="username" type="text"/><br/> <!--显示关联--> <label>密码框： <intout id="password" type="password"/></label> </form>
#button
前面提到了input可以定义按钮元素，除了它之外，还可以通过button元素来定义按钮。具体可以如下定义：<form action="#" method="get"> <button type="submit">提交</button> <button type="reset">重置</button> </form>
#select 和option
select元素用于创建列表框或下拉菜单，必须与option元素结合。可以通过如下代码显示：<form action="#" method="get"> 下面是简单的下拉菜单：<br/> <select id="skills" name="skills"> <option value="java">Java语言</option> <option value="c"selected>C语言</option> <option value="ruby">ruby语言</option> </select><hr/> 下面是允许多选的列表框：<br/> <select id="books" name="books" size="4" multiple> <option value="java">Java疯狂讲义</option> <option value="and">and讲义</option> <option value="ee">ee讲义</option> </select> <hr/> 下面是允许多选的列表框：<br/> <select id="leegang" name="leegang" size="6" multiple> <optgroup label="疯狂Java图书"> <option value="java">java讲义</option> <option value="and">and讲义</option> <option value="ruby">ruby讲义</option> </optgroup> <optgroup label="其他图书"> <option value="s">权威指南</option> <option value="ror">ror讲义</option></optgroup> </select><br/> <button type="submit">提交</button> </form>
#textarea
textarea用于生成多行文本框。含有cols,rows,readonly等属性，详细可以参考： 菜鸟教程http://www.runoob.com/try/try.php?filename=tryhtml_textarea#fieldset和legend
fieldset元素课用于对表单元素进行分组。legend是标题。具体用法如下：<form action="#" method="get"> <fieldset name="basic"> <legend>基本信息</legend> <label id="nameLD" for="username">用户名：</label> <input id="username" name="username" type="text" autofocus placeholder="请输入用户名"/><br/> <label>密码：<input id="password" name="password" type="password" placeholder="请输入密码"/></label> </fieldset> <fieldset name="exter"> <legend>附加信息</legend> <label>身高：<input id="height" name="height" type="text"/><br/></label> <label>出生地：<input id="birth" name="birth" type="text" list="bir"/><br/></label> <label>所在学校：<input id="school" name="school" type="text"/><br/></label> </fieldset> <button type="submit">提交</button>
#output
output元素用于显示输出。用法如下：range文本框：0<input type="range" name="range" min="0" max="100" step="5" onchange="b.value=this.value"/>100 <output name="b" for="range"></output>
#meter和progress
meter显示的是计数仪表，progress显示的是进度条，具体如下：行车速度：0<meter name="speed" value="20" min="0" max="200" low="20" high="160"></meter>200千米/小时<br/> 任务完成比：0<progress value="30" max="100">30/100</progress>100<br/>
这基本上就是对HTML5中form元素的介绍了，如果想要了解更多的HTML5知识，可以访问菜鸟教程http://www.runoob.com/html/html5-intro.html