不要使用img標籤來當作button!

這個問題已經遇到不只一次，今天又被我遇到了…之前也寫過類似的，但比較著重於ASP.NET MVC的部分 ( 請參閱這裡 )，所以這此我要把這個問題特別拉出來寫。

<a href="#">
<img src="" alt="send" name="Test" width="150"
height="37" border="0" id="Test"
onclick="send();" />
</a>

以上程式碼是滿常見的一種寫法，就是使用img標籤搭配上onclick來達到按下此圖就會有某種效果的作法，簡單的說，就是把img標籤當作按鈕來使用，然後因為滑鼠移動到img上面，並不會改變滑鼠的鼠標，所以外面又包了一個a標籤…

這個做法看起來沒什麼 ( 但問題超大… )，但對於不熟悉HTML的設計師來講，這也算是達到了想要的結果，也不能說這就是網頁設計師的錯之類的，畢竟經歷過瀏覽器亂七八糟的歷史，有各種方法，也不覺得奇怪了，但未來的標準越來越重要，所以這樣的寫法，也必須要修正一下。

首先，這樣寫法的問題，其實還不一定會產生問題，像我這次碰到的例子，就是這種寫法加上Firefox再加上jQuery和jQuery UI，都好好的沒發生啥問題，但是同樣組合，運作在IE9上，恭喜!，jQuery就會發生錯誤。

就如我之前的那篇MVC 2和AJAX問題一樣，這種寫法，也不是一定會產生問題，但當產生問題的時候，也讓人往往不知所措。

那到底怎樣寫呢?

<input type="image" src=""  alt="send" name="Test" id="Test"
onclick="send();" />

是的，請使用input標籤，然後配上image屬性，這才是比較好的做法，所以不要再使用img標籤當作Button了，img標籤就是顯示圖片用，就是這樣單純。

最後，至於要改變鼠標，也請使用CSS的方式來修改，也不要再濫用a標籤了，a標籤會哭的喔…