如何將按鈕(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>

出處：果凍 的 程式備忘簿