[摘要]<长度> ]{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两种类型的边框作演示,其它类型的边框原理相同: 注意:边框类型的外观如下:
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表单各种样式介绍