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

　　例如：
　　＜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 隐藏域

　　隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

　　代码格式：＜input type="hidden" name="..." value="..."＞

　　属性解释：
　　type="hidden"定义隐藏域；
　　name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
　　value属性定义隐藏域的值
　　例如：＜input type="hidden" name="ExPws" value="dd"＞


1.2.5 复选框

　　复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

　　代码格式：＜INPUT type="checkbox" name="..." value="..."＞

　　属性解释：
　　type="checkbox"定义复选框；
　　name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
　　value属性定义复选框的值

样例4： yesky.com Chinabyte.com

样例4代码：
　　＜input type="checkbox" name="yesky" value="09"＞yesky.com
　　＜input type="checkbox" name="Chinabyte" value="08"＞Chinabyte.com

1.2.6 单选框

　　当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。

　　代码格式：＜input type="radio" name="..." value="..."＞

　　属性解释：
　　type="radio"定义单选框；
　　name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
　　value属性定义单选框的值，在同一组中，它们的域值必须是不同的。

　样例5： yesky.com Chinabyte.com

样例5代码：
　　＜input type="radio" name="myFavor" value="1"＞yesky.com
　　＜input type="radio" name="myFavor" value="2"＞Chinabyte.com


1.2.7 文件上传框

　　有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
　　注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成POST。

　　代码格式：＜input type="file" name="..." size="15" maxlength="100"＞

　　属性解释：
　　type="file"定义文件上传框；
　　name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
　　size属性定义文件上传框的宽度，单位是单个字符宽度；
　　maxlength属性定义最多输入的字符数。

　样例6：

样例6代码：

＜input type="file" name="myfile" size="15" maxlength="100"＞


1.2.8 下拉选择框

　　下拉选择框允许你在一个有限的空间设置多种选项。

　　代码格式：
　　＜select name="..." size="..." multiple＞
　　＜option value="..." selected＞...＜/option＞
　　...
　　＜/select＞

　　属性解释：
　　size属性定义下拉选择框的行数；
　　name属性定义下拉选择框的名称；
　　multiple属性表示可以多选，如果不设置本属性，那么只能单选；
　　value属性定义选择项的值；
　　selected属性表示默认已经选择本选项。

　样例7： yesky.com chinabyte.com

样例7代码：
　　＜select name="mySel" size="1"＞
　　＜option value="1" selected＞yesky.com＜/option＞
　　＜option value="d2"＞chinabyte.com＜/option＞
　　＜/select＞

　样例8：
　　 yesky.com chinabyte.com internet.com 按Ctrl可以多选

样例8代码：
　　＜select name="mySelt" size="3" multiple＞
　　＜option value="1" selected＞yesky.com＜/option＞
　　＜option value="d2"＞chinabyte.com＜/option＞
　　＜option value="3"＞internet.com＜/option＞
　　＜/select＞

1.3 表单按钮

　　表单按钮控制表单的运作。

1.3.1 提交按钮

　　提交按钮用来将输入的信息提交到服务器。

　　代码格式：＜input type="submit" name="..." value="..."＞

　　属性解释：
　　type="submit"定义提交按钮；
　　name属性定义提交按钮的名称；
　　value属性定义按钮的显示文字；

　样例9：

样例9代码：

＜input type="submit" name="mySent" value="发送"＞

1.3.2 复位按钮

　　复位按钮用来重置表单。

　　代码格式：＜input type="reset" name="..." value="..."＞

　　属性解释：
　　type="reset"定义复位按钮；
　　name属性定义复位按钮的名称；
　　value属性定义按钮的显示文字；

　样例10：

样例10代码：

＜input type="reset" name="myCancle" value="取消"＞

1.3.3 一般按钮

　　一般按钮用来控制其他定义了处理脚本的处理工作。

　　代码格式：＜input type="button" name="..." value="..." onClick="..."＞

　　属性解释：
　　type="button"定义一般按钮；
　　name属性定义一般按钮的名称；
　　value属性定义按钮的显示文字；
　　onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；

样例11：

样例11代码：
　　＜input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')"＞
-------------------------------------------------------------

二、表单外观的美化

　　很多时候，我们仅仅为了实现数据采集这个功能来使用表单，常看到的表单都是“千人一面”、毫无生气，本专题尝试着来改变这一现象，试图赋予表单一个丰富多彩的面貌。
表单的外观，也是最为直接的花样，可以通过改变它来实现特效，本文分两个出发点来讲述：CSS魔法和图像魔法。

　　1、CSS魔法

CSS，就是大家知道的层叠样式单，它可以定义页面元素的外观，包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等等，下面就从这几个方面出发，讨论怎样将CSS应用到表单中，彻底美化它！

　　1.1 字体样式的应用

　　字体样式包括：字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font)，具体的定义方法，在这里不详细讲述，可以参考它的资料。
　　也许你已经注意到，按钮上的文字不漂亮，其实可以通过CSS字体样式来解决，同样地，其它的几个涉及到文字的表单项，例如，文本框、多行文本框、口令框、下拉选择框都可以应用字体样式。
　　为了充分展示这些应用，下例特别设计了几种样式，在实际应用中，不必这么凌乱，灵活运用：

　样例12：表单元素的字体样式展示

• 文本框里的文字是加粗的，大小是9pt，字体是宋体，代码：
  ＜input type="text" name="formExam" size="10" maxlength="10" style="font-family:宋体; font-size: 12px; font-weight: bold" value="加粗"＞
• 口令框文字是红色的，代码：
  ＜input type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" size="8" maxlength="8"＞
• 下拉框文字颜色是红色的，字体是Verdana，大小是9pt，代码：
  ＜select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"＞
  ＜option value="2" selected＞yesky.com＜/option＞
  ＜option value="1"＞redidea.net＜/option＞
  ＜/select＞
• 多行文本框了的字体是Verdana，有下划线，大小是9pt，代码：
  ＜TEXTAREA name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right＞underline css style＜/TEXTAREA＞
• 发送1和发送2按钮的文字不同，是因为发送1按钮使用了9pt的宋体文字，所以比较美观，发送1按钮的代码：
  ＜input type="submit" name="Submit" value="发送1" style="font-family:宋体; font-size: 9pt;"＞

　　小结：只要我们对字体的样式熟悉了，就可以灵活多变，不一定要在标签里面使用style来定义，完全可以在＜head＞里定义，或者外部引用CSS文件，用到的时候引用一下就能达到预期的效果。

1.2 背景颜色和图像样式的应用

　　有很多时候，网页由于颜色的搭配，不得不对表单的背景颜色和图像样式进行设计，背景颜色利用background-color属性，背景图像利用background-image属性，颜色和图像同样能够得到意想不到的效果。

　样例13： 表单元素的背景展示

• 文本框背景是黑色的，字体是白色的，代码：
  ＜input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000"＞
• 口令框背景是灰色的，代码：
  ＜input type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999"＞
• 单选和复选按钮的背景是红色的，代码：
  ＜input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000"＞
  ＜input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000"＞
• 下拉选择框的选项是丰富多彩的背景，代码：
  ＜select name="select2" size="1"＞
  ＜option selected style="background-color: #FF0000"＞yesky.com＜/option＞
  ＜option style="background-color: #0000CC"＞redidea.com＜/option＞
  ＜option style="background-color: #009900"＞chinabyte.com＜/option＞
  ＜option style="background-color: #ff33cc"＞sina.com＜/option＞
  ＜option style="background-color: #999999"＞sohu.com＜/option＞
  ＜/select＞
• 多行文本框的背景是一个图像，代码：
  ＜TEXTAREA name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(back.gif)"＞＜/TEXTAREA＞
• submit1按钮的背景是黄色的，代码：
  ＜input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900"＞
• submit2按钮的背景是一个图像，代码：
  ＜input type="submit" name="Submit22" value="Submit2" style="background-image: url(back.gif)"＞

　　小结：用好background-color属性和background-image属性，就可以设计很出“色”表单了。

1.3 边框样式的应用

　　也许你觉得表单的边框过于死板，我们能否设计单线条，或者其它的边框样式呢？当然可以！

　　和边框有关的属性有：边框式样border-style、上边框border-top、右边框border-right、下边框border-bottom、左边框border-left、边框颜色border-colr、边框宽度 border-width、上边框宽度border-top-width、右边框宽度border-right-width、下边框宽度border-bottom-width、左边框宽度border-left-width、边框 border，这里不作详细的讲述，请参考有关资料。

　样例14： 8种边框形式的展示

• 文本框有8种类型边框样式，即border-style，分别展示在本例中，
  边框宽度的设置有一个规律：
  border-width: [ thin | medium | thick | ＜长度＞ ]{1,4}
  边框宽度用一到四个值来设置元素的边框宽度，它们分别被应用于上、右、下和左边框宽度。如果只给出一个值，它被应用于所有边框宽度。如果两个或三个值给出了，省略了的值与对边相等
  例如：＜input type="text" name="RedF" style="border-color: #006600; border-style: dotted; border-width: 1px"＞
  边框颜色的设置有一个规律：
  border-colr: ＜颜色＞{1,4}
  边框颜色用一到四个值来设置元素的边框颜色。如果四个值都给出了，它们分别被应用于上、右、下和左边框颜色。如果只给出一个值，它被应用于所有边框颜色。如果两个或三个值给出了，省略了的值与对边相等。
• 对于多行文本框以及按钮，设置边框的方法和文本框一样，不再陈述；
• 由于下拉选择框Select不支持边框的设置，所以对它设置是徒劳的；
• 单选按钮和复选按钮的边框，设置的效果不十分协调，所以建议不要对它们设置，不然有“画蛇添足”之感；

　样例15：边框的特殊设计展示

　　聪明的读者一定会想到，如果设计单边框，一定更加漂亮，对！下面我们来尝试以下部分边框的设置效果，本例仅仅以Solid和dotted两种类型的边框作演示，其它类型的边框原理相同：

• none ：无边框。与任何指定的border-width值无关；
• dotted ：点线；
• dashed ：虚线；
• solid ：实线边框；
• double ：双线边框。两条单线与其间隔的和等于指定的border-width值；
• groove ：3D凹槽；
• ridge ：边框突起；
• inset ：3D凹边；
• outset ：3D凸边；

　　2、图像魔法

　　图像，是网页的重要元素，能否应用到表单中呢？接下来，我们用图像来改造死板的表单，分两个部分来探讨：用图像代替按钮、用背景图美化表单元素。

　　2.1 用图像代替按钮

由于默认的表单按钮太丑陋，绝大多数的网站采用了图像按钮，那么，我们通过两个实例来看看怎样实现的：

样例16：用图像代替提交按钮：

　　当只有一个提交按钮的时候，可以简单地实现，不用加事件函数，代码是：
＜input type="image" name="..." src="url" width="" height="..." border="..."＞

　　除了标签改为input type="image"以外，其它的属性和＜img＞标签的属性是一样的，例如：

• 代替submit按钮的图片代码格式是
  ＜input type="image" name="..." src="..." onClick="document.formName.submit()"＞
• 代替reset按钮的代码图片格式是
  <a href="javascript:document.formName.reset();">＜img border=0 src="..."＞</a>
  注：这里的formName是表单的name属性值。

　　2.2 用背景图美化表单元素

　　其实，前面已经提到过，用background-image:url()属性来定义表单元素的背景图，这里仅举一例，可以看到，除了select没有效果以外，其它的都可以配合网页的背景来设置它们。

样例18：背景图的设置

　　分析： 上面分别使用了两个事件，Email的是onFocus="this.value=''"，自动选择的是onMouseOver="this.select()"

　　3．去掉表格和表单间的空隙

　样例24：表格和表单的空隙处理

　　表格，我们常用来构架页面，可是，表格里的表单总是和表格的内容有一个空隙，对照一下：

这里有空隙

这里没有空隙

　　分析：为什么右边没有空隙呢，看看右边的代码就知道了。

＜table width="100%" border="1" cellspacing="1" cellpadding="1"＞
＜tr＞
＜form name="form3" method="post" action=""＞
＜td＞ ＜input type="text" name="textfield2"＞＜br＞
＜input type="submit" name="Submit22" value="Submit"＞
这里没有空隙 ＜/td＞
＜/form＞
＜/tr＞
＜/table＞

　　也就是说，把＜form＞标签放到＜tr＞和＜td＞中间，对应的＜/form＞放在＜/td＞和＜/tr＞中间！

　　4．用Email提交表单(只适合Outlook用户，不适合Foxmail用户)

　样例25：Email提交表单

主题：
内容：

　　分析：看看我们的表单＜form＞标签就知道了，格式如下：
＜form name="..." action="mailto:xxxxx@xxx.xxx?Subject=表单反馈" enctype="text/plain" method="post"＞...＜/form＞
这里的mailto:后面加上要接受信息的地址，?Subject是设置默认的Email标题，enctype="text/plain"是必要的，表示信息以文本方式提交，没有任何加密，所以这种方法常用于没有Asp/Php/cgi支持的空间，也只是一个代用的方法，用户必须安装Outlook，并且是默认的邮件程序，才能顺利执行提交，据说TheBat!也可以，大家可以试验一下。

朱岩 2007-07-20 09:12 发表评论

]]>