用图片代替表单的提交按钮submit和重置按钮reset

1. 1、用图片代替提交按钮submit和重置按钮reset，给图片加onclick事件
3. <script language="javascript">
4. function fsubmit(obj){
5. obj.submit();
6. }
7. function freset(obj){
8. obj.reset();
9. }
10. </script>
11. <form id="form1" name="form1" method="post" action="login.asp">
12. 姓名： <input type="text" name="textfield" />
13. <img src="uploads/200707/30_145425_001.jpg" onClick="javascript:fsubmit(document.form1);">
14. <img src="uploads/200707/30_145428_002.jpg" onClick="javascript:freset(document.form1);"> 
15. </form>
17. 2、给1的图片加上style，用于弥补方法1鼠标移到图片上无反应，未能给客户好的浏览体验
19. <script language="javascript">
20. function fsubmit(obj){
21. obj.submit();
22. }
23. function freset(obj){
24. obj.reset();
25. }
26. </script>
27. <form id="form1" name="form1" method="post" action="login.asp">
28. 姓名： <input type="text" name="textfield" />
29. <img src="uploads/200707/30_145425_001.jpg" style="cursor:hand;" onClick="javascript:fsubmit(document.form1);">
30. <img src="uploads/200707/30_145428_002.jpg" style="cursor:hand;" onClick="javascript:freset(document.form1);"> 
31. </form>
33. 3、用图片代替提交按钮submit和重置按钮reset，并加上链接，效果同2
35. <script language="javascript">
36. function fsubmit(obj){
37. obj.submit();
38. }
39. function freset(obj){
40. obj.reset();
41. }
42. </script>
43. <form id="form1" name="form1" method="post" action="login.asp">
44. 姓名： <input type="text" name="textfield" />
45. <a href="javascript:fsubmit(document.form1);"><img src="uploads/200707/30_145425_001.jpg" border="0" /></a>
46. <a href="javascript:freset(document.form1);"><img src="uploads/200707/30_145428_002.jpg" border="0" /></a>
47. </form>
49. 4、使用图像域。由于默认图像域点击时都是提交表单，因而要进行适当的处理：
51. <script language="javascript">
52. function fsubmit(obj){
53. obj.submit();
54. }
55. function freset(obj){
56. obj.reset();
57. }
58. </script>
59. <form id="form1" name="form1" method="post" action="login.asp">
60. 姓名： <input type="text" name="textfield" />
61. <input type="image" name="imageField" onClick="javascript:fsubmit(document.form1);return false;" src="uploads/200707/30_145425_001.jpg">
62. <input type="image" name="imageField2" onClick="javascript:freset(document.form1);return false;" src="uploads/200707/30_145428_002.jpg">
63. </form>
65. 要注意的是JS中表单提交和重置事件后必须加()，如submit()和reset()