• 文本框有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两种类型的边框作演示，其它类型的边框原理相同：
代码：style="background-color: #FFFFFF; border-color: #000099; border-style: solid; border-width: 0px 0px 1px"


代码：style="background-color: #FFFFFF; border-color: #CCCCCC black #FF0000; border-style: solid; border-width: 1px 0px"


代码：style="background-color: #FFFFFF;border-left: 1px dotted #ff0000; border-right: 1px dotted #ff0000; border-top: 1px dotted #ff0000; border-bottom:1px solid #000000" 注意：边框类型的外观如下：

• 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＞标签的属性是一样的，例如：
　　是不是只要用图片就可以代替所有的按钮呢？是的，不过，不是上面这么简单了，必须加上事件函数，不然的话，图片都是提交按钮，不能完成复位等功能，看看下面的例子就知道了：

样例17：用图片代替所有的表单按钮： 注意：

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

　　2.2 用背景图美化表单元素

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

样例18：背景图的设置

www.yesky.com redidea.com www.chinabyte.com

------------------------------------------------------------

三、表单的提交

　　既然表单是用来采集用户输入的数据，那么，就应该保证用户的数据被准确地提交到预定的地点，也就是说，我们在表单提交的时候，应该对用户的数据进行检验，一来可以避免用户误输数据，二来可以避免用户输入非法的，或者说不合格的数据；检验合格以后，还要保证用户的数据提交到特定的程序。

　　1．数据的检验

　　数据的检验，通常有两种程序：客户端检验和服务器端检验。客户端检验，比较快，服务器端检验，相对来说比较慢，为了确保安全，通常同时采用，这样就可以避免用户刻意破坏。
　　不管采用什么方式，数据检验的原理都是一样的，一旦用户输入的数据不符合规定，就报错，要求用户重新输入，客户端检验常使用Javascrip脚本，服务器端的视系统而定，本文不对数据检验的具体程序设计进行探讨，仅仅列举几个例子来说明。

　样例19：必填项，以及简单的数据类型检验 以下带*的必须输入：
姓名： *
Email： *

　　分析：

• 本例给表单添加了onSubmit事件，通过onSubmit="return CheckDate()"指定提交前，必须通过函数CheckDate()来检验，如果不合格，返回输入数据；
• 数据检验的函数如下：
  ＜scrīpt＞
  function CheckDate(){
  //取得输入的数据
  userName = document.RedForm.userName.value;
  userEmail = document.RedForm.userEmail.value;
  //如果没有输入姓名
  if (userName=="") {
  alert("请输入姓名");
  document.RedForm.userName.focus();
  return false;
  }else{
  //如果没有输入Email，或者Email地址错误(不含@)
  if ((userEmail=="")||(userEmail.indexOf("@")==-1)) {
  alert("请重新输入Email地址");
  document.RedForm.userEmail.focus();
  return false;
  }else return true;
  }
  }
  ＜/scrīpt＞

　　2．表单的分支提交

　　有的时候，表单需要根据用户的选择，提交到不同的程序，怎么做呢？
　　通过脚本来检测用户的选择分支，从而向不同的程序提交表单，看看样例：

　样例20：分支提交 用户名： 密码：
公司用户 个人用户
　　分析：这里首先用到的是form的onSubmit="TwoSubmit(this)"
然后根据选择的分支，来分别递交到不同的程序，TwoSubmit()函数如下：

＜scrīpt＞
function TwoSubmit(form){
if (form.Ref[0].checked){
form.action = "cop.asp";//这里是分之一
}else{
form.action = "ind.asp";//这里是分之二
}
form.submit();
}
＜/scrīpt＞

　　3．用任何元素提交表单

　　是不是只有按钮或者图片按钮才能提交表单呢？当然不是，实际上，任何页面元素都可以提交表单，不过嘛，都是通过脚本来完成的，下面我们就使用链接来代替Submit按钮：

　样例21：用链接来提交表单
用户名： 密码： 登录 清空
　　分析：

　　通过onClick="document.form.submit()"来提交表单；用onClick="document.form.reset()"来复位表单，这样一来，任何一个元素都可以实现提交表单了。

------------------------------------------------------------------

四、表单的常用技巧

　　这些常用技巧，往往是和事件以及脚本联系在一起，本文注重功能，至于脚本，就不一一详细分析。常见的技巧有：下拉跳转菜单，表单内容的聚焦。

　　1．下拉跳转菜单

　　在Dreamweaver中，可以很方便地建立基于表单的下拉菜单，为了兼顾非Dreamweaver用户，这里讲述一下这种技巧。

　样例22：基于表单的下拉跳转菜单 Chinabyte Sina netease
　　分析：实际上，这里用到了一个函数，用于向选择的地址跳转，

＜scrīpt language="Javascrīpt"＞
function FormMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
＜/scrīpt＞

　　然后，给下拉选择框赋予一个事件onChange="FormMenu('parent',this,0)"，就可以了。

　　2．表单内容的聚焦

　　内容聚焦，常用在Copy&Paste类网站上，用的好的话，可以方便用户。

　样例23：内容自动聚焦 把你的鼠标移上来，看看 这里的内容自动选择了
　　分析： 上面分别使用了两个事件，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!也可以，大家可以试验一下。