在 HTML 5 的規範裡，對於 Input 文字輸入欄位有很多新的屬性，像是 Readonly, required, maxlength, min, max...等等。
其中有一個新屬性非常好用，但也同時有很多陷阱，一旦用不好，反而會產生更糟的使用者體驗，這個新屬性就是：Placeholder。

為什麼說他非常好用，但又有很多陷阱呢？
今天我們就來跟大家聊一聊這個新屬性的用法和應該留意的幾個小點。

Placeholder 是什麼？怎麼用呢？

Placeholder，是專門放在 input 這個文字輸入欄位裡面的一個輔助的屬性，他的作用是，一旦用 Placeholder 指定了任何的字串，那麼這個文字輸入欄位就會自動顯示這個字串在欄位裡面。
用意就是可以作為提醒、欄位說明等等的輔助性的功能。

我們直接來舉個例子好了。

<label>日期：</label>

<input type="text" name="date_field" 

placeholder="請輸入 DD/MM/YYYY的日期格式" />

<label>電話：</label>

<input type="text" name="tel_field" 

placeholder="請輸入包含區碼的固定電話(如：02-1234-5678)" />

網頁顯示結果：

大家可以在上面的例子中，看到我們指定了 Placeholder 的字串是提醒日期輸入的格式，於是在網頁顯示時，這個文字欄位就會自動的顯示出這個提示的文字。
電話的欄位也會顯示提醒使用者，要鍵入包含區碼的市話號碼。

很方便，也很貼心的小功能，是不是。

記得以往在 HTML5 的這個新的規範出來以前，要做到這種在欄位內部顯示提醒字串的效果，真的會有些大費周章。
不是得動用 Javascript 下 Code，就是要用 CSS 橋很久，才能把提示字串橋到欄位裡面的固定的位置。
而且最終為了不干擾使用者輸入，還是要再用 JS 來控制，當這個 Input 欄位開始輸入時，把這個字串隱藏起來。
同時也不能省麻煩，當欄位裡文字去除清空的時候，又要再把這個文字字串回復...

光是想想這個寫 JS 的流程，就已經不太想做這個功能了 XD

那麼，這麼好用的特色，會有什麼陷阱呢？

Placeholder 的屬性的限制

雖然從上面的例子中，可以立刻感受到這個新屬性帶來的便利，可是這個屬性也是有一些限制(起碼在現階段)，一旦使用不當，那麼很可能會反過來，破壞了使用者體驗，甚至讓網友不知道怎麼輸入欄位了。

屬性的限制是這樣的：

1. 當欄位一開始輸入文字，Placeholder 就會自動消失。
    
   
2. Placeholder 預設的提示文字顏色，對比太小，不易閱讀。
    
   
3. 改變了 Placeholder 預設的文字顏色，又怕造成使用者已填入的混淆。

我們一項一項的來解說一下。

1. 當欄位一開始輸入文字，Placeholder 會自動消失

這個原本是一個很貼心的設計，就像之前說的，以往為了要做到這個效果，要用 JS 寫很多流程才能控制。
可是這個便利也連帶著產生了另一個問題，就是一旦使用者輸入第一個文字，所有的提醒字串就看不到了，如果使用者寫到一半忘了呢？

別以為不會忘喔，大部分在網頁上進行互動的使用者，基本上專注力都是很有限的，明明在按下鍵盤前，想著說：嗯～要用 DD/MM/YYYY 的日期格式...打入第一個日期的數字，就會開始混沌了：咦～剛剛他是說要月份在前還是年份在前？...不對，年份是最後的，是月份在前吧？....

這種情況發生時，等於直接要求你的使用者刪掉他之前輸入的每一個字串，然後再看一次，重新輸入。
這樣可不是很好的設計喔。

2. Placeholder 預設的顏色，不易閱讀

一樣的，大家可以透過上面的例子看到，標準的 Placeholder 字串的顏色就是灰灰的，雖然不同的瀏覽器，預設顯示的顏色色碼略有不同，但多半都是淺灰色的。

這樣的顏色對比太低，閱讀起來不是很容易，尤其是行動裝置。

又好比，若是欄位的字級太小，這個字串作為干擾人的程度，還多過它輔助性的功能。

3. 改變了 Placeholder 預設的文字顏色，又怕造成使用者已填入的混淆

延續上面的限制，有朋友會想說，如果預設的顏色對比太低，那麼就用 CSS 來加強一下不就好了嗎？

是這樣沒錯，我們可以用 CSS 來改變 Placeholder 的顏色，可是一旦改了比較顯目的顏色，又怕會造成一些混淆。
萬一表單上的欄位比較多，那麼很可能使用者在填寫到一半，會以為有些欄位他已經填過了，因為 Placeholder 顯示的文字字串顏色很顯目的話，看起來就是這個欄位已經被填寫過了，那麼就會造成使用者體驗不佳。
特別是有必填欄位檢查的時候，你的系統一直跳出說有個欄位是必填的，可是使用者乍看起來，那個欄位『已經填寫了呀』？
這樣就很麻煩了。

Placeholder 怎麼用比較好？

當然，這麼好的新功能，不用實在太可惜了。

怎麼用比較好呢？
下面我們列出幾種 Do 和 Do Not 的用法建議：

1. 絕對不要用 Placeholder 來取代欄位名稱。
    
   
2. 所有的『重要』提示字串，都單獨另外寫在欄位上方，或是下方。
    
   
3. Placeholder 用在『增加互動性』而不是用於『必要性』。

1. 絕對不要用 Placeholder 來取代欄位名稱

自從 Placeholder 這個屬性開始運作以後，我們就蠻常看到有很多的網頁上的表單，欄位都沒有欄位名稱了，直接把名稱用 Placeholder 來顯示。

就好像下面這個例子：

應該是這樣比較好：

為什麼呢？
原因就是上面提到的第一點，當使用者輸入任何一個字母，這個『欄位名稱』就會消失，很快使用者就會『忘了』這個欄位是要輸入什麼資訊了。

2. 『重要』提示字串，單獨另外寫在欄位上方或下方

這個是很重要的。

不管是欄位輸入的格式要求，或是特殊的說明等等，把說明放在欄位上方，或是下方，用強調的樣式來提醒。

3. Placeholder 用在『互動性』、『輔助性』而不要用於『必要性』

必要性的資訊，透過上面的說明大家應該能理解為什麼盡量不要用 Placeholder 來顯示了。

那麼 Placeholder 可以用來顯示什麼呢？

例如...嗯～？其實就是『例如』耶。
例如用 Placeholder 來顯示『例如』的部分，像是你的欄位要別人填寫興趣、嗜好，有了書寫格式之後(寫在欄位上方)，那麼欄位裡面就可以顯示：『例如：吃飯、睡覺、想事情』。
又好比用在搜尋欄位，可以提示填入關鍵字。

總結

是不是一定要使用 Placeholder 呢？

其實也是不一定的。
雖然這個屬性實在很好用。更多的心情比較像是因為之前沒有 HTML5 的時候，為了這種類似的功能，花去不少時間，一旦有了這個內建的新功能之後，實在免不了的就想用。

用了之後，才發現這個功能，在使用者體驗上(UX)，其實有很多地方還沒有很完備，也或許出來沒多久，經驗值還不夠，或許再過一陣子，HTML會制訂出更多的細節，也或許主流的瀏覽器，會預設提供更多的支援也說不定。

總之提醒大家，
不管是什麼功能，除了功能本身提供的效果外，使用者的體驗這一項，一定要擺在第一位，盡可能的不要為了 CODE 而 CODE，或是為了展示新技術而展示新技術。

我們也有臉書專頁了，歡迎大家按讚加入喔： @5min.reading