边框样式的应用

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种边框形式的展示
<INPUT style="BORDER-RIGHT: #006600 1px dotted; BORDER-TOP: #006600 1px dotted; BORDER-LEFT: #006600 1px dotted; BORDER-BOTTOM: #006600 1px dotted" size=10 value=dotted name=RedF> <INPUT style="BORDER-RIGHT: 3px dashed; BORDER-TOP: 1px dashed; BORDER-LEFT: 3px dashed; BORDER-BOTTOM: 1px dashed" size=10 value=dashed name=RedF2> <INPUT style="BORDER-RIGHT: 3px double; BORDER-TOP: 3px double; BORDER-LEFT: 3px double; BORDER-BOTTOM: 3px double" size=10 value=double name=RedF3> <INPUT style="BORDER-RIGHT: 2px groove; BORDER-TOP: 2px groove; BORDER-LEFT: 2px groove; BORDER-BOTTOM: 2px groove" size=10 value=groove name=RedF4> <BR><INPUT style="BORDER-RIGHT: 3px inset; BORDER-TOP: 3px inset; BORDER-LEFT: 3px inset; BORDER-BOTTOM: 3px inset" size=10 value=inset name=RedF5> <INPUT style="BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BORDER-LEFT: 2px outset; BORDER-BOTTOM: 2px outset" size=10 value=outset name=RedF6> <INPUT style="BORDER-RIGHT: 3px ridge; BORDER-TOP: 3px ridge; BORDER-LEFT: 3px ridge; BORDER-BOTTOM: 3px ridge" size=10 value=ridge name=RedF7> <INPUT style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" size=10 value=solid name=RedF8> <BR><TEXTAREA style="BORDER-RIGHT: #006600 1px dotted; BORDER-TOP: #006600 1px dotted; BORDER-LEFT: #006600 1px dotted; BORDER-BOTTOM: #006600 1px dotted" name=RedF9 rows=3 wrap=VIRTUAL cols=30></TEXTAREA> <BR><INPUT style="BORDER-RIGHT: #006600 1px dotted; BORDER-TOP: #006600 1px dotted; BORDER-LEFT: #006600 1px dotted; BORDER-BOTTOM: #006600 1px dotted" type=checkbox value=checkbox name=checkbox2> 复选 <INPUT style="BORDER-RIGHT: #006600 1px dotted; BORDER-TOP: #006600 1px dotted; BORDER-LEFT: #006600 1px dotted; BORDER-BOTTOM: #006600 1px dotted" type=radio value=radiobutton name=radiobutton> 单选 <INPUT style="BORDER-RIGHT: 3px double; BORDER-TOP: 3px double; BORDER-LEFT: 3px double; BORDER-BOTTOM: 3px double" type=submit value=发送 name=Submit4> <INPUT style="BORDER-RIGHT: 3px dashed; BORDER-TOP: 1px dashed; BORDER-LEFT: 3px dashed; BORDER-BOTTOM: 1px dashed" type=submit value=取消 name=Submit23> </FORM><STRONG><BR>

复选 单选
　　分析：

    文本框有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：背景图的设置


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



三、表单的提交

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

　　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：基于表单的下拉跳转菜单
　　分析：实际上，这里用到了一个函数，用于向选择的地址跳转，

＜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:[e-mail]?Subject=表单反馈" enctype="text/plain" method="post"＞...＜/form＞
这里的mailto:后面加上要接受信息的地址，?Subject是设置默认的Email标题，enctype="text/plain"是必要的，表示信息以文本方式提交，没有任何加密，所以这种方法常用于没有Asp/Php/cgi支持的空间，也只是一个代用的方法，用户必须安装Outlook，并且是默认的邮件程序，才能顺利执行提交，据说TheBat!也可以，大家可以试验一下。