用图片作为提交按钮的方式代码

有时候为了达到比较好的视觉效果,有人会使用图片代替按钮来提交或者重置表单数据。
由于需要,我收集整理了一些用图片作为提交按钮的方式,如下:

1.
<FORM name="formName" action="xxxx" >
<INPUT name="textfield2">
<INPUT type="image" height=19 width=53 src="xxx.gif" align=absMiddle border=0 name=RedImg οnclick="this.form.submit()">
<INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0 name=RedImg3 οnclick="this.form.reset()">
</FORM>

代替submit按钮的图片代码格式是
<input type="image" name="submit" src="..." οnclick="document.formName.submit()">
代替reset按钮的代码图片格式是
<a href="javascript:document.formName.reset();"><img border=0 src="..."></a>

<input type="image" name="reset" src="..." οnclick="document.formName.reset();return false">


2.
<form name="loginForm" action="xxx" method="post" >
<input name="submit" type="image" src="xxxx.gif" />
<input type="image" name="reset" src="..." onClick="document.formName.reset();return false">
</form>

如果需要在提交表单之前验证数据可以考虑在form标签的onsubmit事件加上javascript 验证函数如οnsubmit="checkForm()"

3.
<form name="formName" action="xxxx">
<INPUT name=textfield2>
<INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0 name=RedImg οnclick="formName.action='link.jsp'">
</form>

通过oncick="document.form.submit()"来提交表单;用οnclick="document.form.reset()"来复位表单,这样一来,任何一个元素(不仅是图片)都可以实现提交表单了。
在这样的情况下,还可以自定义图片的长度和宽度等。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值