Html图片按钮

 分享一下关于用图片实现提交按钮

分析与阐释：用图片实现表单的reset按钮时，这个按钮并不能重置表单，相反却知性了提交表单的操作。普通按钮是通过类型来区分的，submit为提交按钮，reset为重置按钮，而（type="image"）的按钮，其默认操作为提交表单，如果想用图片代替重置按钮，就需要一些额外的设置了。

（1）

<input type="image" height="50" width="100" scr="" aglin=""border=""name="" onclick="this.form.submit()">//提交

<input type="image" height="50" width="100" scr="" aglin=""border=""name="" onclick="this.form.reset()">//重置

<input type="image" height="50" width="100" scr="" aglin=""border=""name="" onclick="window.close">//关闭

通过用onclick="document.form.submit"提交表单，用onclick="document.form.reset"复位表单，那么用任何一个元素（不仅仅是图片）都可以实现提交复位功能，还可以自定义图片的宽度和长度

（2）

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

<form methhod="post" name="testform_2"action="">

<p><input type="text" name="keyword"/></p>

<input type="image" src="send.gif"/>

<inputv type="image" src="restet'gif" onclick="javascript:document.forms['testform_2'].reset();return false;"/>

</form>

Document.forms['testform_2'].reset();是将名字testform_2的表单重置；return false是防止提交表单。

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

<form method="post"name="being"action="">

<input type="image" src="send.gif"/>

<inputv type="image" src="restet'gif" onclick="javascript:document.forms['being'].reset();"

Style="cursor:pointer;"/>

</form>

style="cursor:pointer"设置图片悬停时，显示手型光标。（下篇将提到)