HTML表单使用简介

为什么要用表单？

在我们浏览网页的时候，尤其是各种论坛，一般都会要求我们登陆账号，在我们输入完账号密码后，这些数据就需要通过表单来传递给网站后台数据库，来完成网站后台服务器对我们账号及密码的验证，所以，总的来说表单的作用就是客户端向服务器端提交数据  也可以说为交互功能。

表单语法

语法：

<form action="url" method="get|post" enctype="..." target="...">.

<input type="" name="" valule="" placeholder="">

</form>

属性解释见下表：

action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.

method=get或post指明提交表单的HTTP方法.可能的值为： 

GET（默认方法）：

表单提交是被动的（比如搜索引擎查询），并且没有敏感信息使用。

当您使用 GET 时，表单数据在页面地址栏中是可见的

GET 适合少量数据的提交。浏览器会设定容量限制。

POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）使用。

POST 安全性更加，因为在页面地址栏中被提交的数据是不可见的。

enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"

TARGET="..."指定提交的结果文档显示的位置： _blank ：在一个新的、无名浏览器窗口调入指定的文档； _self ：在指向这个目标的元素的相同的框架中调入文档； _parent ：把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self； _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.

表单类型

<input>元素是最重要的表单元素。

input包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框等，用于采集用户的输入或选择的数据。

1.单行文本框<input type="text">（input 的type 属性的默认值就是"text"）

以下是单行文本框的主要属性：

size：指定文本框的宽度，以字符个数为单位；在大多数浏览器中，文本框的缺省宽度是20个字符。

value：指定文本框的默认值，是在浏览器第一次显示表单或者用户单击按钮之后在文本框中显示的值。

maxlength：指定用户输入的最大字符长度。

readonly：只读属性，当设置readonly属性后，文本框可以获得焦点，但用户不能改变文本框中的value。

disabled：禁用，当文本框被禁用时，不能获得焦点，当然，用户也不能改变文本框的值。并且在提交表单时，浏览器不会将该文本框的值发送给服务器。

2.密码框<input type="password">

3.单选按钮<input type="radio">

使用方式：使用name相同的一组单选按钮，不同radio设定不同的value值，这样通过取指定name的值就可以知道谁被选中了，不用单独的判断。单选按钮的元素值由value属性显式设置，表单提交时，选中项的value和name被打包发送，不显式设置value。

4.复选框<input type="checkbox">

使用复选按钮组，即name相同的一组复选按钮，复选按钮表单元素的元素值由value属性显式设置，表达提交时，所有选中项的value和name被打包发送

5.隐藏域<input type="hidden"

隐藏域通常用于向服务器提交不需要显示给用户的信息。

6.文件上传<input type="file">

使用file，则form的enctype必须设置为multipart/form-data，method属性为POST。

7.下拉框<select></select>

<select>标记创建一个列表框,<option>标记创建一个列表项,<select>与嵌套的<option>一起使用，共同提供在一组选项中进行选择的方式。

将一个option设置为选中：<option selected>北京</option> 或者 <option selected="selected">北京</option>就可以将这个项设定为选择项。

8.多行文本<textarea></textarea>

cols表示列数，rows表示行数，若不设置则采用浏览器默认显示

9.<label></label>标签

在<input type="">前可以写普通的文本来修饰，但是单击修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修饰的控件的id

10.提交按钮<input type="Submit">、重置按钮<input type="Reset">、普通按钮<input type="button">

按提交按钮时，表单数据会提交给标签的action属性所指定的服务器处理程序。

按重置钮时，表单中的值被重置为初始值。在用户提交表单时，重置按钮的name和value不会提交给服务器。

普通按钮通常用于单击执行一段脚本代码。