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属性：可以让表单控件定义在标签之外。
• 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    提交，无动作，重置按钮
具体用法如下：

单行文本框：

不能编辑的文本框：

密码框：


隐藏框：

第一组单选框：

红：
绿：
蓝：

两个复选框：

leegang.org:
crazyit.org:

文件上传框：

图像域：

下面是四个按钮：

    当然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:生成一个专门用于输入搜索关键字的文本框

color文本框：


date文本框：

time文本框：

datetime-local文本框：

month文本框：

week文本框：

email文本框：

tel文本框：

url文本框：

number文本框：

range文本框：0100


search文本框：

---

#label

    label元素是用于定义标签的，使标签与表单控件之间存在联系。共有两种方式：

• 隐式使用for属性
• 显示关联

有如下代码：

单行文本框:



密码框：

---

#button

    前面提到了input可以定义按钮元素，除了它之外，还可以通过button元素来定义按钮。具体可以如下定义：

提交
重置

---

#select 和option

    select元素用于创建列表框或下拉菜单，必须与option元素结合。可以通过如下代码显示：

下面是简单的下拉菜单：


Java语言
C语言
ruby语言

下面是允许多选的列表框：


Java疯狂讲义
and讲义
ee讲义 
 

下面是允许多选的列表框：



java讲义
and讲义
ruby讲义


权威指南
ror讲义


提交 

---

#textarea

    textarea用于生成多行文本框。含有cols,rows,readonly等属性，详细可以参考： 菜鸟教程http://www.runoob.com/try/try.php?filename=tryhtml_textarea

---

#fieldset和legend

    fieldset元素课用于对表单元素进行分组。legend是标题。具体用法如下：

基本信息
用户名：


密码：


附加信息
身高：

出生地：

所在学校：


提交

---

#output

    output元素用于显示输出。用法如下：

range文本框：0100

---

#meter和progress

    meter显示的是计数仪表，progress显示的是进度条，具体如下：

行车速度：0200千米/小时

任务完成比：030/100100

这基本上就是对HTML5中form元素的介绍了，如果想要了解更多的HTML5知识，可以访问菜鸟教程http://www.runoob.com/html/html5-intro.html