用图片来做提交按钮(表单通用) js点击按钮提交表单

用图片来做提交按钮(表单通用) js点击按钮提交表单

有时候为了达到比较好的视觉效果,有人会使用图片代替按钮来提交或者重置表单数据。

<FORM name=RedForm action=#>
一:
<INPUT name=textfield2>
<INPUT type=image height=19 width=53 src="xxx.gif"align=absMiddle border=0 name=RedImgonclick="this.form.submit()">

<INPUT type=image height=19 width=53src="xxx.gif" align=absMiddle border=0 name=RedImg3onclick="this.form.reset()">

</FORM>

二:
代替submit按钮的图片代码格式是
<input type="image" name="..." src="..."onClick="document.formName.submit()">
代替reset按钮的代码图片格式是
<ahref="javascript:document.formName.reset();"><imgborder=0src="..."></a>


三:
<form>

<INPUT name=textfield2>

<INPUT type=image height=19 width=53src="xxx.gif" align=absMiddle border=0 name=RedImgonClick="frm1.action='link.asp'">


通过onClick="document.form.submit()"来提交表单;用onClick="document.form.reset()"来复位表单,这样一来,任何一个元素(不仅是图片)都可以实现提交表单了。

在这样子的情况下,还可以自定义图片的长度和宽度等

使用图片做按钮的几种方法和优劣


合理的运用图片,能够使站点更加丰富多彩,相信有许多喜欢用图片的设计师都遇到过一个问题:用图片实现表单(form)的重置(reset)按钮时,这个按钮并不能重置表单,相反却执行了提交表单的操作,本文说明了这个问题的原因,并给出了相应的解决方案。

出现上述问题的原因主要是:普通的按钮是通过类型来区分的,submit 为提交按钮,reset为重置按钮,而类型为图片(type="image")的按钮,其默认操作是提交表单。因此,如果想用图片实现重置按钮,就需要一些额外的设置了。
如果想用图片代替重置按钮,可以用下面的方法:

(1)给 type 为 image 的 input 添加 onclick 事件来实现重置,并通过添加 return false来避免默认的提交操作:

<form method="post" name="testForm_2"action="">
<p><input type="text"name="keyword"/></p>
<input type="image"src="send.gif" />
<input type="image"src="reset.gif"onclick="javascript:document.forms['testForm_2'].reset(); returnfalse;" />
</form>

document.forms['testForm_2'].reset(); 是将名称为 testForm_2的表单重置。
return false; 是防止提交表单。

(2)直接用图片模拟的重置按钮

<form method="post" name="testForm_3"action="">
<p><input type="text"name="keyword"/></p>
<input type="image"src="send.gif" />
<img src="reset.gif"alt="Reset"onclick="javascript:document.forms['testForm_3'].reset();" />
</form>

document.forms['testForm_2'].reset(); 是将名称为 testForm_2的表单重置。

设置图片悬停时,显示手型光标。

两种方法大同小异,在 javascript被禁止的情况下,第二种方法按钮不会执行任何操作,而第一种方法却会执行提交操作。

当然,我们也可以直接把样式交给 CSS 去处理,用背景图的方式来实现,但是这样需要将 value 的值留空,如果 CSS被禁止,那么将会显示一个没有文字的按钮,每个方法都有自己的问题,可以根据自己的需要来选择解决方案。

  

爱华网本文地址 » http://www.413yy.cn/a/25101011/81752.html

更多阅读

gif动画怎么用软件来制作 gif动画制作软件下载

gif动画怎么用软件来制作——简介 gif图片是一种文件格式,这种图片有放多独特的特点,首先它是图片,但是它却具有普通图片不具备的功能,就是可以是连续的图片组合在一起,有很多的经验都是写怎么通过网络制作这类图片,但是通过在线的方式远

怎样用酸奶机做酸奶,酸奶机怎么做酸奶? 用酸奶机怎么做酸奶

  有朋友和我说:我刚刚买了一台酸奶机,但是做出来的口感好像不是很好,而且好像每次做的味道都不太一样?这是什么原因呢?也许这和酸奶机的使用有一定的关系吧。那就让我们来看一下通常酸奶机是怎样使用的。怎样用酸奶机做酸奶,酸奶机

面包粉怎么做面包 怎样用面包粉做面包

面包粉怎么做面包——简介可能有很多朋友会不知道面包粉和普通面粉的区别在哪里,因为肉眼看起来是差不多的,其实区别在于面粉的筋度,面包粉筋度高做出来的面包更有弹性和韧性。简单判别的方法是,用手抓一把干面粉,如果面粉很容易成团,就是

如何使用咖喱粉来做咖喱饭 咖喱饭放多少咖喱粉

如何使用咖喱粉来做咖喱饭——简介咖喱粉是一种粉末状的咖喱,可以直接撒在食材上点缀一下,也可以用来做咖喱汁,我下面就分享一下调制咖喱的方法和过程,希望对各位有所帮助!如何使用咖喱粉来做咖喱饭——食材鸡肉块 150g土豆 1个胡萝卜 1

矿泉水可以来做美容吗? 矿泉水瓶子可以做什么

矿泉水可以来做美容吗?——简介环境污染是很可怕的事情,空气不好,肌肤也是很娇弱的,很多女人在担心之余更是希望可以有更干净的更好的东西来护肤,就想到了用矿泉水来护肤。可是这样究竟是更好了,还是事倍功半了呢?矿泉水可以来做美容吗?—

声明:《用图片来做提交按钮(表单通用) js点击按钮提交表单》为网友随意低调分享!如侵犯到您的合法权益请联系我们删除