HTML 屬性：placeholder

**placeholder** 屬性定義了表單控制元件在沒有值時顯示的文字。佔位符文字應向用戶簡要提示應在控制元件中輸入的資料型別。

有效的佔位符文字包括一個單詞或短語，暗示預期的資料型別，而不是解釋或提示。佔位符不能替代<label>。由於如果表單控制元件的值不為 null，則佔位符不可見，因此使用placeholder代替<label>作為提示會損害可用性和可訪問性。

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

注意：placeholder 屬性不能包含任何換行符 (LF) 或回車符 (CR)。如果值中包含任何一個，佔位符文字將被截斷。

無障礙訪問問題

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

<label> 文字在視覺上和程式上與其對應的表單控制元件相關聯。螢幕閱讀器預設情況下不會宣佈佔位符內容，但會宣佈標籤內容；標籤是告知輔助技術使用者應在控制元件中輸入什麼資料的關鍵。標籤還能提升使用指向裝置的使用者體驗：當用戶點選、觸控或輕觸<label> 時，焦點將移動到標籤關聯的表單控制元件上。

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

示例

HTML

html
<form action="/en-US/docs/Web/HTML/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>

結果

規範

規範
HTML 標準
# attr-input-placeholder
HTML 標準
# attr-textarea-placeholder

瀏覽器相容性

html.elements.input.placeholder

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

html.elements.textarea.placeholder

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱