Placeholder 是什麼？
placeholder是 HTML5 裡的新屬性，顧名思義它是一種屬性，而不是 HTML 標籤元素，因此當你需要用 CSS 去修改它的樣式時，不是使用元素選擇器，而是使用偽元素選擇器，比如你想修改placeholder的樣式，那麼它的 CSS 應寫作::placeholder{}。
Placeholder 的功能是什麼？
placeholder可以讓 input 或 textarea 顯示預設的文字，並且當使用者輸入文字時，它將會自動消失，當使用者移除文字時，它會再次顯示。
在以往是沒有此功能的，以前需要透過 JS 或 CSS 去控制它，不僅在設計上很繁瑣且容易跑位，自從 HTML5 推出此功能後就大幅降低設計者的時間，只需要在 HTML 中加上 placeholder="自訂的文字" 即可。
<input type="text" placeholder="請輸入文字">
範例
當然你可以修改樣式，預設的文字與背景顏色有時候對比度很低，容易影響閱讀，透過 CSS 可以改為自訂的樣式，例如下面這樣。
範例
Placeholder 帶來的問題
由於當使用者輸入文字時就會消失，因此有可能會導致使用者輸入到一半時忘記這個欄位要輸入什麼，因此建議在輸入框外面再加上欄位標題，Placeholder 通常用於輔助說明。
範例
不過有時候為了排版需求可能會不希望把標題寫在外面，例如手機版欄位會變得很小，這時候也可以改用 icon 圖示，這也是不少網站採用的方式之一。
範例
當然一般註冊或登入的表單很短，只用placeholder並沒有什麼問題，我個人也比較傾向只使用placeholder，不僅美觀也乾淨簡潔，只有在很長的表單才會考慮另外加上label標籤。
本文是否對您有幫助？