被遺忘掉的button標籤_HTML/Xhtml_網頁製作

註：這篇文章已經有人翻譯過重新認識button 標籤，但覺得其中有很多地方值得推敲，不太好理解。因此本人結合個人學習體會重新翻譯而成此文。
英文原文：http://particletree.com/features/rediscovering-the-button-element/
對於每個程式設計者來說，為使用者提供一個風格統一的介面是一項不變的要求。但在網頁上實現這種風格統一卻顯得格外困難，因為不同作業系統、不同瀏覽器對網頁內容的表現方式存在著差異，而且這種差異幾乎毫無規律性。在處理表單元素過程中這個問題顯得格外突出，其中，讓許多人束手無策的就是「Submit」按鈕表現標準統一化的問題。
比如說，屬性為type="submit"的input標籤在不同的瀏覽器中要么顯得非常醜陋（在Firefox中），要么就是存在這樣那樣的缺陷（在Internet Explorer），甚至表現得十分死板（在Safari中）。應對這個問題的解決方法通常是透過設定input的屬性為image然後自己動手設計一個按鈕圖片出來。但我們卻因此而不得不在每次需要使用按鈕時增加大量額外煩人的工作。因此，我們需要一個更好的解決方案，一個對設計者來說更具彈性、更有意義的方法。幸運的是，這種方法實際上已經存在，需要的是我們再做一點點工作。朋友們，現在請允許向大家介紹我們這位可愛的小盆友同學！
Input VS Button
下面是你正在使用的提交按鈕標籤：

他們在不同的瀏覽器中的表現樣式分別如下：

而我們使用創建如上按鈕時代碼：
Submit
他們表現樣式如下：

這些按鈕和我們上面創建的按鈕在運行和表現行為中沒有任何區別。除了用他們來提交表單為，你還可以設定他們為不可用，添加快捷鍵或設定一個tabindex等。還好，除了表現樣式不同外，Safari都支援這些功能（和input的按鈕相比，Safari中button按鈕缺少表面的液態效果）。 標籤最酷的功能就是我們可以在其內部放置一些有用的HTML元素，例如可以使用下面的程式碼加入圖片：
Submit
他們在瀏覽器的外觀如下：

還不錯哦。實際上，根據W3C的定義，元素就是為了解決這些表現上的差異才應運而生的。
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON el that contains an have 是is set to “image”, but the BUTTON element type allows content.
The Button Element - W3C
因此我們要為此尋找一個設計方案，好在擁有海量資料的互聯網可以為我們提供一些有用的幫助來解決這個問題。這的確很方便，但是不幸的是很設計者和網站開發者甚至不知道這個元素的存在。在我決定用button元素替換掉Wufoo（本文作者的一款網路產品，dudo註）前，我得肯定這個標籤和CSS能滿足以下的需求：
需求條件：
1、他們必須具有按鈕的外觀
2、在不同瀏覽器中有相同的表現樣式
3、button中所應用的樣式同樣可以在超級連結上使用（因為Wufoo中的互動總是使用表單提交的方式和連結觸發Ajax的方式中的某一個實現的，他們可能經常會緊挨在一起，因此我需要他們具有相同的表現樣式）
4、在不同的情況下標籤能夠表現靈活，易於修改
5、對於訊息傳遞過程中發生的事件能夠用圖示和顏色有效地區分
面對上面的問題，我先寫出一些CSS來，然後再解決跨瀏覽器的問題。接下來我們會看到：
最終結果

這並沒有什麼大驚小怪的，他很簡單，但是卻非常的有效。我之所以喜歡用這種方式和處理按鈕是因為我不必為創建10000個圖標而去啟動Photoshop一一創建。如果我們仔細觀察一下程式碼，你會發現後面兩個按鈕其實是兩個連結。

儲存



更改密碼

更改密碼