轻松玩转花招表单(一)表单概述
日期：2013-09-15 浏览次数：20865 次
本专题从最基础的表单知识，到表单的高级使用，让你有一个比较全面地认识，置信你在读完本专题当前，一定会对表单非常熟悉。
一、表单概述
表单，在网页中的作用不可小视，次要担任数据采集的功用，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
1、表单的组成
一个表单有三个基本组成部分：
- 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
- 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- 表单按钮：包括提交按钮、复位按钮和普通按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理任务。
为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：
1.1 表单标签＜form＞＜/form＞
功用：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器或者电子邮件里。
语法：＜FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."＞. . .＜/FORM＞
属性解释见下表：
| action=url | 指定一来处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址. |
| method=get或post | 指明提交表单的HTTP方法.可能的值为：
|
| enctype=cdata | 指明用来把表单提交给服务器时(当method值为"post")的互联网媒体方式.这个特性的缺省值是"application/x-www-form-urlencoded" |
| TARGET="..." | 指定提交的结果文档显示的位置：
|
例如：
＜form action="http://www.yesky.com/test.asp" method="post" target="_blank"＞...＜/form＞
表示表单将向http://www.yesky.com/test.asp以post的方式提交，提交的结果在新的页面显示，数据提交的媒体方式是默认的application/x-www-form-urlencoded方式；
1.2 表单域
表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式：
1.2.1 文本框
文本框是一种让访问者本人输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞
属性解释：
type="text"定义单行文本输入框；
name属性定义文本框的名称，要保证数据的精确采集，必须定义一个独一无二的名称；
size属性定义文本框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
value属性定义文本框的初始值
样例1：
样例1代码：
＜input type="text" name="example1" size="20" maxlength="15"＞
1.2.2 多行文本框
也是一种让访问者本人输入内容的表单对象，只不过能让访问者填写较长的内容。
代码格式：＜TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"＞＜/TEXTAREA＞
属性解释：
name属性定义多行文本框的名称，要保证数据的精确采集，必须定义一个独一无二的名称；
cols属性定义多行文本框的宽度，单位是单个字符宽度；
rows属性定义多行文本框的高度，单位是单个字符宽度；
wrap属性定义输入内容大于文本域时显示的方式，可选值如下：
- 默认值是文本自动换行；当输入内容超过文本域的左边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
- Off，用来避免文本换行，当输入的内容超过文本域左边界时，文本将向左滚动，必须用Return才能将插入点移到下一行；
- Virtual，允许文本自动换行。当输入内容超过文本域的左边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
- Physical，让文本换行，当数据被提交处理时换行符也将被一同提交处理。
样例2：
样例2代码：
＜TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"＞＜/TEXTAREA＞
1.2.3 密码框
是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
代码格式：＜input type="password" name="..." size="..." maxlength="..."＞
属性解释：
type="password"定义密码框；
name属性定义密码框的名称，要保证数据的精确采集，必须定义一个独一无二的名称；
size属性定义密码框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
样例3：
样例3代码：
＜input type="password" name="example3" size="20" maxlength="15"＞
1.2.4 隐藏域
