玩转表单之花样表单（四）
首页 >> 网页设计 >> Html >> 新闻正文
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：背景图的设置
·快速精通FRAME（下）
·快速精通FRAME（上）
·表格使用的常见问题及解决方法
·活用表格美化网页
·网页表格制作进阶
·玩转表单之常用技巧（二）
·玩转表单之常用技巧（一）
·玩转表单之表单提交（二）
·玩转表单之表单提交（一）
·玩转表单之花样表单（四）
www.xxol.net
Redidea
2004-9-22 8:10:09
天极Yesky
潇湘在线
www.xxol.net www.07391.com img.hk.cn www.xianggangditu.cn www.neiyibar.com
网站运营策划 邵阳网站大全 邵阳人才网 邵阳信息网 邵阳网站建设 香港图片 香港地图 生产线 内衣品牌 情趣内衣 流水线www.sunlsx.com.cn 性感内衣 流水线
Copyright © 2002-2005 www.xxol.net All rights reserved.
潇湘在线 版权所有 ICP证：湘ICP备05000248号