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

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

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()"来复位表单，这样一来，任何一个元素（不仅是图片）都可以实现提交表单了。
在这样的情况下，还可以自定义图片的长度和宽度等。