如何將按鈕(Button)變成圖片按鈕
正常按鈕的Html語法會是這樣寫：
<form id="form1" name="form1" method="post" action="" >
<input type="submit" name="submit_Btn" id="submit_Btn" value="送出" />
<input type="reset" name="reset_Btn" id="reset_Btn" value="取消" />
</form>
若是要把正常的按鈕換成圖片按鈕來顯示，可以將寫法改為：
<form id="form1" name="form1" method="post" action="" >
送出按鈕： <input type="image" name="submit_Btn" id="submit_Btn" img src="XXX.jpg" onClick="document.form1.submit()" >
取消按鈕： <input type="image" name="reset_Btn" id="reset_Btn" img src="XXX.jpg" onClick="document.form1.reset()" >
</form>
或是：
<form id="form1" name="form1" method="post" action="" >
送出按鈕： <button type="button" name="submit_Btn" id="submit_Btn" onClick="document.form1.submit()"><img src="XXX.jpg"></button>
取消按鈕： <button type="button" name="reset_Btn" id="reset_Btn" onClick="document.form1.reset()"><img src="XXX.jpg"></button>
</form>
也可以這樣：
<form id="form1" name="form1" method="post" action="" >
送出按鈕： <a href="javascript:document.form1.submit()"><img src="XXX.jpg"></a>
取消按鈕： <a href="javascript:document.form1.reset()"><img src="XXX.jpg"></a>
</form>
或是利用CSS：
<form id="form1" name="form1" method="post" action="" >
送出按鈕： <input type="button" name="submit_Btn" id="submit_Btn" onClick="document.form1.submit()" style="background-image:url(XXX.jpg);width:30px;height:30px;">
取消按鈕： <input type="button" name="reset_Btn" id="reset_Btn" onClick="document.form1.reset()" style="background-image:url(XXX.jpg);width:30px;height:30px;">
</form>
參考或是複製語法時，別忘了留個言喔 ^ ^ ~