盾怪网教程:是一个免费提供流行杀毒软件教程、在线学习分享的学习平台!

html中对于Form表单各种样式介绍

时间:2024/8/9作者:未知来源:盾怪网教程人气:

[摘要]<长度> ]{1,4}边框宽度用一到四个值来设置元素的边框宽度,它们分别被应用于上、右、下和左边框宽度。如果只给出一个值,它被应用于所有边框宽度。如果两个或三个值给出了,省略了的值与对边相等例如:<...
<长度> ]{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>标签的属性是一样的,例如:
  是不是只要用图片就可以代替所有的按钮呢?是的,不过,不是上面这么简单了,必须加上事件函数,不然的话,图片都是提交按钮,不能完成复位等功能,看看下面的例子就知道了:
样例17
:用图片代替所有的表单按钮: 注意:

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

  • <input type="image" name="..." src="..." onClick="document.formName.submit()">
  • 代替reset按钮的代码图片格式是

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

  • <a href="javascript:document.formName.reset();"><img border=0 src="..."></a>

  2.2 用背景图美化表单元素

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

以上就是html中关于Form表单各种样式介绍的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:html中对于Form表单各种样式介绍




Copyright © 2012-2018 盾怪网教程(http://www.dunguai.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版