您当前的位置: 首页 > 前端教程 > HTML教程 > HTML中使用图片做提交按钮

HTML中使用图片做提交按钮

作者:不详 来源:网络 发布时间: 2010-05-14 18:49 点击:
有时候为了达到比较好的视觉效果,有人会使用图片代替按钮来提交或者重置表单数据。 FORMname=RedFormaction=# 一: INPUTname=textfield2 INPUTtype=imageheight=19width=53src=xxx.gifalign=absMiddleborder=0name=RedImgonclick=this.form.submit() INPUTtype=imageh

HTML中使用图片做提交按钮

  有时候为了达到比较好的视觉效果,有人会使用图片代替按钮来提交或者重置表单数据。
  
  <FORMname=RedFormaction=#>
  
  一:
  
  <INPUTname=textfield2>
  
  <INPUTtype=imageheight=19width=53src="xxx.gif"align=absMiddleborder=0name=RedImgonclick="this.form.submit()">
  
  <INPUTtype=imageheight=19width=53src="xxx.gif"align=absMiddleborder=0name=RedImg3onclick="this.form.reset()">
  
  </FORM>
  
  二:
  
  代替submit按钮的图片代码格式是
  
  <inputtype="image"name="..."src="..."onClick="document.formName.submit()">
  
  代替reset按钮的代码图片格式是
  
  <ahref="javascript:document.formName.reset();"><imgborder=0src="..."></a>
  
  三:
  
  <form>
  
  <INPUTname=textfield2>
  
  <INPUTtype=imageheight=19width=53src="xxx.gif"align=absMiddleborder=0name=RedImgonClick="frm1.action='link.asp'">
  
  通过onClick="document.form.submit()"来提交表单;用onClick="document.form.reset()"来复位表单,这样一来,任何一个元素(不仅是图片)都可以实现提交表单了。
  
  在这样子的情况下,还可以自定义图片的长度和宽度等
  
  使用图片做按钮的几种方法和优劣
  
  合理的运用图片,能够使站点更加丰富多彩,相信有许多喜欢用图片的设计师都遇到过一个问题:用图片实现表单(form)的重置(reset)按钮时,这个按钮并不能重置表单,相反却执行了提交表单的操作,本文说明了这个问题的原因,并给出了相应的解决方案。
  
  出现上述问题的原因主要是:普通的按钮是通过类型来区分的,submit为提交按钮,reset为重置按钮,而类型为图片(type="image")的按钮,其默认操作是提交表单。因此,如果想用图片实现重置按钮,就需要一些额外的设置了。
  
  如果想用图片代替重置按钮,可以用下面的方法:
  
  (1)给type为image的input添加onclick事件来实现重置,并通过添加returnfalse来避免默认的提交操作:
  
  <formmethod="post"name="testForm_2"action="">
  
  <p><inputtype="text"name="keyword"/></p>
  
  <inputtype="image"src="send.gif"/>
  
  <inputtype="image"src="reset.gif"onclick="javascript:document.forms['testForm_2'].reset();returnfalse;"/>
  
  </form>
  
  document.forms['testForm_2'].reset();是将名称为testForm_2的表单重置。
  
  returnfalse;是防止提交表单。
  
  (2)直接用图片模拟的重置按钮
  
  <formmethod="post"name="testForm_3"action="">
  
  <p><inputtype="text"name="keyword"/></p>
  
  <inputtype="image"src="send.gif"/>
  
  <imgsrc="reset.gif"alt="Reset"onclick="javascript:document.forms['testForm_3'].reset();"style="cursor:pointer;"/>
  
  </form>
  
  document.forms['testForm_2'].reset();是将名称为testForm_2的表单重置。
  
  style="cursor:pointer;"设置图片悬停时,显示手型光标。
  
  两种方法大同小异,在javascript被禁止的情况下,第二种方法按钮不会执行任何操作,而第一种方法却会执行提交操作。
  
  当然,我们也可以直接把样式交给CSS去处理,用背景图的方式来实现,但是这样需要将value的值留空,如果CSS被禁止,那么将会显示一个没有文字的按钮,每个方法都有自己的问题,可以根据自己的需要来选择解决方案。

分享到:
本文"HTML中使用图片做提交按钮"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(4)
100%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4