HTML 屬性：placeholder

placeholder 屬性定義了當表單控制元件為空值時顯示的文字。佔位符文字應為使用者提供關於應輸入到控制元件中的資料的預期型別的簡要提示。

有效的佔位符文字應包含一個詞或短語，提示預期的輸入型別，而不是解釋或提示。佔位符不得替代 <label>。由於佔位符在表單控制元件的值不為空時不可見，因此使用 placeholder 代替 <label> 作為提示會損害可用性和可訪問性。

placeholder 屬性支援以下輸入型別：text、search、url、tel、email 和 password。它也支援 <textarea> 元素。下面的示例展示了 placeholder 屬性的使用，用於解釋輸入欄位的預期格式。

注意：在 <textarea> 元素中，placeholder 屬性不能包含任何換行符（LF）或回車符（CR）。如果值中包含任何一個，佔位符文字將被截斷。

可訪問性考慮

佔位符僅應用於顯示應輸入到表單中的資料型別的示例；切勿作為 <label> 元素的替代品；這樣做會損害可訪問性和使用者體驗。

<label> 文字在視覺上和程式上都與其對應的表單控制元件相關聯。螢幕閱讀器預設不會播報佔位符內容，但會播報標籤內容；正是標籤通知了輔助技術使用者應該在控制元件中輸入什麼資料。標籤還能改善指標裝置使用者的體驗：當用戶單擊、觸控或點選 <label> 時，焦點會移到與標籤關聯的表單控制元件上。

即使對於不依賴輔助技術的使用者，也不能依靠佔位符來替代標籤。佔位符文字的顯示對比度低於預設表單控制元件文字。這是故意的，因為您不希望使用者混淆佔位符文字和已填寫的表單欄位。然而，這種對比度不足可能會給低視力使用者帶來問題。此外，當用戶開始輸入文字時，佔位符文字會從表單欄位中消失。如果佔位符文字包含的說明資訊或示例消失了，可能會讓有認知障礙的使用者感到困惑，如果佔位符包含標籤，則可能使表單無法訪問。

示例

HTML

html

<form action="/en-US/docs/Web/HTML/Reference/Attributes/placeholder">
  <label for="name">Enter your name:</label>
  <input type="text" id="name" name="name" placeholder="e.g. Mike Shinoda" />
  <button type="submit">Submit</button>
</form>