有時候為了達到比較好的視覺效果，有人會使用圖片代替按鈕來提交或者重置表單數據。 <FORM name=RedForm action=# > 一: <INPUT name=textfield2> <INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0 name=RedImg onclick="this.form.submit()"> <INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0 name=RedImg3 onclick="this.form.reset()"> </FORM> 二: 代替submit按鈕的圖片代碼格式是 <input type="image" name="..." src="..." onClick="document.formName.submit()"> 代替reset按鈕的代碼圖片格式是 <a href="javascript:document.formName.reset();"><img border=0 src="..."></a>三: <form> <INPUT name=textfield2> <INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0 name=RedImg onClick="frm1.action='link.asp'">通過onClick="document.form.submit()"來提交表單；用onClick="document.form.reset()"來復位表單，這樣一來，任何一個元素（不僅是圖片）都可以實現提交表單了。 在這樣子的情況下，還可以自定義圖片的長度和寬度等使用圖片做按鈕的幾種方法和優劣合理的運用圖片，能夠使站點更加豐富多彩，相信有許多喜歡用圖片的設計師都遇到過一個問題：用圖片實現表單(form)的重置(reset)按鈕時，這個按鈕并不能重置表單，相反卻執行了提交表單的操作，本文說明了這個問題的原因，并給出了相應的解決方案。 出現上述問題的原因主要是：普通的按鈕是通過類型來區分的，submit 為提交按鈕，reset 為重置按鈕，而類型為圖片(type="image")的按鈕，其默認操作是提交表單。因此，如果想用圖片實現重置按鈕，就需要一些額外的設置了。 如果想用圖片代替重置按鈕，可以用下面的方法： （1）給 type 為 image 的 input 添加 onclick 事件來實現重置，并通過添加 return false 來避免默認的提交操作： <form method="post" name="testForm_2" action=""><p><input type="text" name="keyword" /></p><input type="image" src="send.gif" /><input type="image" src="reset.gif" onclick="javascript:document.forms['testForm_2'].reset(); return false;" /> </form> document.forms['testForm_2'].reset(); 是將名稱為 testForm_2 的表單重置。 return false; 是防止提交表單。 （2）直接用圖片模擬的重置按鈕 <form method="post" name="testForm_3" action=""><p><input type="text" name="keyword" /></p><input type="image" src="send.gif" /><img src="reset.gif" alt="Reset" onclick="javascript:document.forms['testForm_3'].reset();" style="cursor:pointer;" /> </form> document.forms['testForm_2'].reset(); 是將名稱為 testForm_2 的表單重置。 style="cursor:pointer;" 設置圖片懸停時，顯示手型光標。 兩種方法大同小異，在 javascript 被禁止的情況下，第二種方法按鈕不會執行任何操作，而第一種方法卻會執行提交操作。 當然，我們也可以直接把樣式交給 CSS 去處理，用背景圖的方式來實現，但是這樣需要將 value 的值留空，如果 CSS 被禁止，那么將會顯示一個沒有文字的按鈕，每個方法都有自己的問題，可以根據自己的需要來選擇解決方案。

?

轉載于:https://www.cnblogs.com/shaoshao/p/3494419.html

總結

以上是生活随笔為你收集整理的图片按钮提交表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。