我們在製作表單時,會使用到 input 或是 textarea 這樣的文字欄位,在欄位中我們常會需要去加入一個 “相關提示文字” 幫助使用者去瞭解輸入的相關資訊,例如:提示輸入的格式、字元長度…等內容。
本篇文章會說明如何使用簡單的 HTML5 placeholder 去完成這個效果,請跟著文章試試看。

HTML+CSS 表單文字欄位 (input) 預設值設定

傳統在製作這樣的效果時,會使用一個假的 div 視窗覆蓋在我們的文字欄位上,這個 div 視窗裡當然擺放的是提示文字,接著使用 JS(jQuery) 來控制,當使用者對文字欄位有點擊或者是要輸入的動作時,提示視窗隱藏,反之則顯示。
這樣的做法比較複雜,你還需要去判斷欄位狀態,是否已輸入文字,欄位是否為空的各種可能性。
幸好現在網頁技術可以簡單的使用 HTML5 屬性 placeholder 去簡化這樣的效果,以下會使用 input 及 textarea 做簡單的示範,另外會再補充如何更改 placeholder 的顏色。

HTML
<input type="email" id="email" placeholder="please enter email...">
<textarea id="descript" placeholder="descript"></textarea>

製作方法很簡單,我們建立了 input 及 textarea 來作示範,只要將這兩個標籤中加入屬性 “placeholder” 即可,在屬性中輸入的文字即會以預設文字的方式顯示在頁面中,當使用者點擊並輸入內容後,預設文字就會自行消失,當內容為空白或者是使用者刪除所有文字後,預設文字就會自動重新顯示,非常簡單,只是身為設計師的你,總免不了會想要將文字改改顏色,請看下方的 CSS 教學。

CSS
::-webkit-input-placeholder{color:#09C;}
:-moz-placeholder{color:#09C;}
::-moz-placeholder{color:#09C;}
:-ms-input-placeholder{color:#09C;}
  1. 在 CSS 的部份,只針對如何改變預設文字的顏色說明,其他的部份只是依範例排版需求,不是教學重點,更改 “placeholder” 顏色主要依靠兩種方式來做,一種是“偽元素 (pseudo-elements)”,一種是 “偽類 (pseudo-classes)”
  2. code line 1 是使用偽元素的方式,使用的瀏覽器有 “Safari , Chrome , Opera15+”
  3. code line 2 是使用偽類的方式,使用的瀏覽器有 “Firefox 4-18”
  4. code line 3 是使用偽元素的方式,使用的瀏覽器有 “Firefox 19+”
  5. code line 4 是使用偽類的方式,使用的瀏覽器有 “IE”
  6. 使用上面的寫法,可以讓所有吃到此 CSS 頁面的 placeholder 屬性都套用顏色,務必確保對各瀏覽器的支援都有寫好,才不會有漏網之魚。
  7. 另外,如果只想要某個特定的文字欄位更改顏色的話,也可以在前方指定 id 或 class,例如 “#email::-webkit-input-placeholder{color:#09C;}”

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料