首页 » 建站技术 » 浏览内容

玩转花样表单 (3)


2005-05-15 09:39:08 4,006 0 发表评论 字体: 作者:C.K.

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

From:http://www.netbei.com/Article/art/art5/200409/2329_3.html

点击查看效果页面:http://netbei.com/demo/js/0906/form.htm 或者 http://a.linji.cn/attachment/1116119826.htm

  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,这里不作详细的讲述,请参考有关资料。

  (观看效果页样例13)

  分析:

  文本框有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-color: <颜色>{1,4}

  边框颜色用一到四个值来设置元素的边框颜色。如果四个值都给出了,它们分别被应用于上、右、下和左边框颜色。如果只给出一个值,它被应用于所有边框颜色。如果两个或三个值给出了,省略了的值与对边相等。
  对于多行文本框以及按钮,设置边框的方法和文本框一样,不再陈述;

  由于下拉选择框Select不支持边框的设置,所以对它设置是徒劳的;

  单选按钮和复选按钮的边框,设置的效果不十分协调,所以建议不要对它们设置,不然有“画蛇添足”之感;

  边框的特殊设计展示

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

  (观看效果页样例14)

  代码:style=”background-color: #FFFFFF; border-color: #000099; border-style: solid; border-width: 0px 0px 1px”

  (观看效果页样例15)

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

  (观看效果页样例16)

  代码: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 用图像代替按钮

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

  用图像代替提交按钮:

  当只有一个提交按钮的时候,可以简单地实现,不用加事件函数,代码是:
  <input type=”image” name=”…” src=”url” width=”” height=”…” border=”…”>
  除了标签改为input type=”image”以外,其它的属性和<img>标签的属性是一样的。

  (观看效果页样例17)

  是不是只要用图片就可以代替所有的按钮呢?是的,不过,不是上面这么简单了,必须加上事件函数,不然的话,图片都是提交按钮,不能完成复位等功能,看看下面的例子就知道了:
  用图片代替所有的表单按钮:

  (观看效果页样例18)

  注意:

  代替submit按钮的图片代码格式是

  <input type=”image” name=”…” src=”…” onClick=”document.formName.submit()”>

  代替reset按钮的代码图片格式是

  <input type=”image” name=”…” src=”…” onClick=”document.formName.reset()”>

  注:这里的formName是表单的name属性值。

  2.2 用背景图美化表单元素

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

  背景图的设置

  (观看效果页样例19)

  三、表单的提交

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

  1.数据的检验

  数据的检验,通常有两种程序:客户端检验和服务器端检验。客户端检验,比较快,服务器端检验,相对来说比较慢,为了确保安全,通常同时采用,这样就可以避免用户刻意破坏。

  不管采用什么方式,数据检验的原理都是一样的,一旦用户输入的数据不符合规定,就报错,要求用户重新输入,客户端检验常使用Javascrip脚本,服务器端的视系统而定,本文不对数据检验的具体程序设计进行探讨,仅仅列举几个例子来说明。

  必填项,以及简单的数据类型检验

  (观看效果页样例20)

  分析:

  本例给表单添加了onSubmit事件,通过onSubmit=”return CheckDate()”指定提交前,必须通过函数CheckDate()来检验,如果不合格,返回输入数据;

  数据检验的函数如下:

<script>
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;
}
}
</script>

网站统计 Statistics

  • 创建时间: 2005年1月3日 距今5067 天
  • 日志总数: 2461
  • 评论总数: 630
  • 标签总数: 654
  • 链接总数: 273
  • 最后更新: 2018-8-31 17:57:04
  • 您是本站第 14172360 位访客

广告区 Guǎng Gào