CSS必知必會集錦（六）：介面元件

編者注：本集錦摘編自圖靈新書[《CSS設計師指南（第3版）》][1]第6章“介面元件”，是作者從相關主題中提煉出來的短小精悍的提示和法則。其中，既包含業界公認的CSS最佳實踐，又不乏作者獨到的一家之言，還有很多有價值的參考資料。理解這些CSS知識點，對夯實基礎，開闊視野是至關重要的。

HTML5與表單

HTML5為input元素新增了13種新型別（type屬性），也對錶單進行了大幅增強，包括特別特別棒的placeholder屬性，可以在文字框中顯示說明文字（例如“在這裡填寫使用者名稱”），只要使用者一開始輸入它就會消失。

要了解新增的HTML5表單標籤和屬性，以及瀏覽器對它們的支援情況，可以參考這個網頁 http://wufoo.com/html5，還有這個http://www.html5rocks.com/en/tutorials/forms/html5forms。

說起設計表單，我強烈向大家推薦Luke Wroblewski專門寫表單的書Web Form Design: Filling in the Blanks：http://www.lukew.com/resources/web_form_design.asp。

要了解關於input元素更詳細的介紹，可以參考這兩篇文章：http://htmlhelp.com/reference/html40/forms/input.html，還有http://www.javascript-coder.com/html-form/html-form-tutorial-p1.phtml。

想學習伺服器如何處理表單資料？推薦看看這個網頁：http://www.javascript-coder.com/html-form/html-form-tutorial-phtml。這個網頁底部還有不少與表單相關的連結，也值得一讀。

在確定這些控制元件的名字時，最好跟程式設計人員以及資料庫管理員共同協商，得到一個大家都認可的命名方案。

for屬性與id屬性通過相同的值關聯起來後，使用者點選標註文字也可以選擇單選按鈕和核取方塊。

要想知道input元素的type屬性的所有值，可以參考這裡：https://developer.mozilla.org/en-US/docs/HTML/Element/Input。

要知道HTML中的所有表單元素，可以參考這裡：http://reference.sitepoint.com/html/elements-form。

在為name屬性設定同一個名字的情況下，核取方塊和單選按鈕的行為就像一個組一樣。提交表單時，它們的name值與value值，將分別作為“名=值”對中的“名”和“值”。