up
down
Close
架站盒子
Web Development Box
 

Placeholder 是什麼?如何在 input 中顯示預設文字

│ 7053 Views │ HTML
Placeholder 是什麼?如何在 input 中顯示預設文字
Placeholder 是什麼?如何在 input 中顯示預設文字
  1. Placeholder 是什麼?
  2. Placeholder 的功能是什麼?
  3. Placeholder 帶來的問題

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標籤。

延伸閱讀

本文是否對您有幫助?