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

打印页面