一、form表单有什么作用？

2012080516253421.jpg

表单的作用：

表单在网页中主要负责数据采集功能，把用户填写的信息提交到网站的后台服务器。

一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

二、form标签的常用属性分类：

form是表单的外壳，内包属性。

举例：

 First name: 
 Last name:

1.action是提交的地址

语法：

值为url 。demo_form.php代表，确认提交后填写的数据将被提交到当前域名下这个路径的路由上面。
绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）
相对 URL - 指向站点内的文件（比如 src="example.htm"）

2.method是表单提交的方法，分为两种，post和get

规定用于发送 form-data 的 HTTP 方法。

如果采用 POST 方法，浏览器会按照两步来发送数据。
首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

3.target：在何处打开action

语法
value值如下

_blank 在新窗口中打开。
_self 默认。在相同的框架中打开。
_parent 在父框架集中打开。
_top 在整个窗口中打开。
framename 在指定的框架中打开。

4.enctype：规定在发送表单数据之前如何对其进行编码

语法：
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。

默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。

三、最常用标签——input标签用法小结：

标签用于搜集用户信息。
语法：
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

type：规定元素类型

button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox 复选框
file 上传文件，定义输入字段和 "浏览"按钮，供文件上传。accept：mime 类型，多个以,分割。
hidden 定义隐藏的输入字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。
image 定义图像形式的提交按钮。必须把 src 属性和 alt 属性与结合使用。
password 密码字段中的字符会被掩码（显示为星号或原点）。
radio 定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项，命名要相同。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。
text 文本输入框（单行输入），默认宽度为 20 个字符。

label：为 input 元素定义标注

label 元素不会向用户呈现任何特殊效果，只是为鼠标用户改进了可用性。在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。"for" 属性可把 label 绑定到另外一个元素。

select ：可创建单选或多选菜单

元素中的标签用于定义列表中的可用选项，实际运作中后端以select标签的name获取选中的option的value。

Html中form表单的简单用法