用圖片代替表單的提交按鈕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()