HTML - placeholder 屬性

HTML placeholder 屬性用於定義簡短的提示，幫助使用者進行資料輸入。

當輸入欄位中沒有值時，它會顯示出來；當用戶開始在欄位中輸入值時，它會自動消失。提示只是一個示例值或對預期格式的簡短描述。placeholder 屬性適用於搜尋、文字、數字、電子郵件、密碼型別的輸入。

語法

<tag placeholder = "value"></tag>

應用於

以下列出的元素允許使用 HTML placeholder 屬性

元素	描述
<input>	HTML <input> 標籤用於接受使用者各種型別的輸入。
<textarea>	HTML <textarea> 標籤用於表示多行純文字編輯控制元件。

HTML placeholder 屬性示例

下面的例子將說明 HTML placeholder 屬性，以及我們應該在哪裡以及如何使用這個屬性！

文字輸入的佔位符

在下面的例子中，我們將把 placeholder 屬性與 input type=text 一起使用。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'placeholder' Attribute</title>
   <style>
      input {
         width: 200px;
         padding: 7px;
      }

      button {
         padding: 7px;
      }
   </style>
</head>

<body>
   <h3>
      Example of HTML 'placeholder' Attribute
   </h3>
   <form onsubmit="return false;">
      <h3>Login page</h3>
      <input type="text" 
             placeholder="Username(email or mobile)">
      <br>
      <br>
      <input type="password" 
             placeholder="Password">
      <br>
      <br>
      <button>Login</button>
   </form>
</body>

</html>

textarea 元素的佔位符

考慮另一種情況，我們將把 placeholder 屬性與 textarea 欄位一起使用。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'placeholder' Attribute</title>
   <style>
      input {
         width: 200px;
         padding: 7px;
      }

      button {
         padding: 7px;
      }
   </style>
</head>

<body>
   <h3>
      Example of the HTML 'placeholder' Attribute
   </h3>
   <form>
      <textarea cols="30" rows="5" 
                placeholder="Write your feedback...."></textarea>
      <br>
      <button>Submit</button>
   </form>
</body>

</html>

支援的瀏覽器

屬性
placeholder	支援 10.0	支援 10.0	支援 4.0	支援 5.0	支援 11.0

html_attributes_reference.htm

列印頁面