玩转表单

 

OM: #000000 1px solid; BACKGROUND-COLOR: #ffffff" type=button value=按钮3 name=Submit32>
代码：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="..." onClick="document.formName.submit()"＞
• 代替reset按钮的代码图片格式是
  ＜input type="image" name="..." src="..." onClick="document.formName.reset()"＞
  注：这里的formName是表单的name属性值。

　　2.2 用背景图美化表单元素

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

样例18：背景图的设置

godjiahui.cnblogs.com godjiahui.cnblogs.com