HTML 教程 / 使用 placeholder 为表单字段添加提示

要在空的 HTML 表单字段中显示简短提示，请使用属性 placeholder。字段名称使用 label，实际初始值使用 value。将占位符与值分开，可以防止示例文本作为用户数据提交。

label、placeholder 和 value 之间的区别

一个 label 用于标识一个字段，例如“电子邮件”或“消息”。placeholder 是一个小提示，当字段的值为空时会显示在字段中。input 上的 value 属性用于设置其初始值。

例如，“电子邮件”可以用作字段标签，而“例如 alex@example.com”用作输入提示。在空白联系表单中使用value给出示例地址，可能会给人真实地址的印象，因此请为此示例使用placeholder。另一方面，显示已保存地址的账户更改表单则需要一个真实的初始值。

向字段添加提示文本

将placeholder="填写提示"添加到输入字段的起始标签中。此示例显示电子邮件地址作为提示，当字段为空时显示。

<label for="email">电子邮件</label>
<input type="email" id="email" name="email"
       placeholder="例如 alex@example.com">

让 label 的 for 属性值与输入字段的 id 一致，以将它们关联起来。name 在提交的数据中标识该字段。这些属性具有不同的功能：设置 id 并不替代 name 的必要性。有关更多示例，请参阅 label 和 input 正确关联。

HTML 标准支持 placeholder 的输入类型有：text、search、tel、url、email、password 和 number。日期字段不支持此属性。请将重要说明保存在字段外部，即使是数字，也要确保在输入时可见。HTML 对 placeholder 的定义以及按输入类型的 属性表 解释了它的应用范围。

向文本字段添加提示文本

接受多行文本的元素 textarea 也支持 placeholder。要仅显示占位符，请将其开闭标签之间的区域留空。可用使用 textarea、select、option 和 button中的完整示例，比较多行输入与选择列表。

<label for="message">消息</label>
<textarea id="message" name="message" rows="4"
          placeholder="例如 我的订单什么时候到？"></textarea>

文本区域的初始值来自其标签之间的文本，而不是 value 属性。在以下示例中，“请告诉我我的订单什么时候到。”是一个实际可编辑的值，而不是占位符。

<textarea name="message">请告诉我我的订单什么时候到。</textarea>

文本区域标签之间的空格或缩进可能是值的一部分。如果看似为空的文本区域未显示其占位符，请检查标签之间是否还有残余文本。HTML文本区域的规范定义了其初始值和占位符行为。

在输入过程中保持重要说明可见

提示文本在用户输入值后会消失，因此它不能替代字段名称或重要说明。将像“电子邮件”这样的名称保留在可见标签中，并在单独的文本中提供用户在输入过程中所需的说明。

<label for="email">电子邮件（必填）</label>
<input type="email" id="email" name="email"
       placeholder="例如 alex@example.com"
       aria-describedby="email-help" required>
<p id="email-help">请输入您希望收到回复的电子邮件地址。</p>

可访问性属性 aria-describedby 将输入与额外的说明文本关联。将 aria-describedby 的值设置为说明元素的 id。这样，屏幕阅读器等辅助技术就可以将描述与字段关联起来。请同时保留可见说明，如本示例所示。W3C 表单指南教程 展示了这种方法。

完整示例：必填字段电子邮件及可选说明

将以下代码保存为 form-guide.html，使用 UTF-8 编码保存，然后在浏览器中打开。电子邮件字段为必填项，消息为可选项。占位符的颜色选择了适合白色背景的颜色，字段会根据较小屏幕上的表单宽度进行自适应。可通过表单验证：必填项、文本长度与数值范围中的边界值，比较必填要求与格式、范围限制。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>输入提示示例</title>
  <style>
    body {
      margin: 24px;
      color: #222;
      font-family: sans-serif;
      line-height: 1.6;
    }
    form { max-width: 440px; }
    label { display: block; font-weight: bold; }
    input, textarea {
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      border: 1px solid #777;
      border-radius: 4px;
      font: inherit;
    }
    input::placeholder, textarea::placeholder {
      color: #666;
      opacity: 1;
    }
    .help { margin-top: 4px; }
    button { padding: 8px 20px; font: inherit; }
  </style>
</head>
<body>
  <h1>联系我们</h1>
  <form method="get">
    <p>
      <label for="email">电子邮件（必填）</label>
      <input type="email" id="email" name="email"
             placeholder="例如 alex@example.com"
             aria-describedby="email-help" required>
    </p>
    <p id="email-help" class="help">请输入您希望收到回复的电子邮件地址。</p>
    <p>
      <label for="message">消息（可选）</label>
      <textarea id="message" name="message" rows="4"
                placeholder="例如 我的订单什么时候到？"></textarea>
    </p>
    <button type="submit">发送</button>
  </form>
</body>
</html>

两个字段最初都会显示占位符。一旦输入电子邮件地址，其示例将消失，但“电子邮件（必填）”及其下方说明仍然可见。完全清空字段后，占位符文本将重新显示。

1. 将电子邮件字段留空，然后按发送。通过 required 检查将阻止正常的浏览器提交。
2. 在电子邮件字段中输入 abc，然后再次发送。格式检查 type="email" 将阻止提交。
3. 输入像 alex@example.com 这样的正确格式地址，并将消息留空。该表单可以在可选字段为空时发送。

required 检查空值，type="email" 检查电子邮件格式。格式正确的地址并不证明该地址存在。错误信息及其显示方式因浏览器和语言设置而异。

这个示例不包含存储消息的服务器。由于省略了 GET 表单 action，普通提交将指向当前文档的地址。如果文件由 Web 服务器提供，URL 的查询字符串中可以显示提交的值。本地打开文件时的处理可能有所不同。一个可工作的服务需要一个服务器端点和合适的提交方法。

提交的是什么：占位符文本还是值？

占位符文本不会作为输入值提交，但空值仍可能包含在提交的数据中。 例如，一个未禁用且具有 name="email" 的字段，如果为空且没有必填验证阻止提交，在 GET 查询字符串中仍可能产生 email=。没有 name 或带有 disabled 的字段将从常规表单数据中省略。这些区分遵循 HTML 生成表单数据的规则 。

<form id="compare-form">
  <label for="default-name">默认值</label>
  <input id="default-name" type="text" name="default_name" value="Alex">
  <label for="hint-name">提示示例</label>
  <input id="hint-name" type="text" name="hint_name" placeholder="例如 Alex">
</form>

在一个单独的 HTML 文件中打开此代码，然后在浏览器的开发者工具控制台中执行以下代码。FormData 会生成一个表单字段名称及其当前值的列表。此代码会检查列表，而不会将其发送到服务器。

Array.from(new FormData(document.getElementById("compare-form")).entries())

如果两个字段都保持不变，结果如下。通过 value 提供的“Alex”将被包含。占位符文本“例如 Alex”不会被包含。

[["default_name", "Alex"], ["hint_name", ""]]

在第二个字段中输入“Sam”，然后再次执行代码：hint_name 的值将为“Sam”。如果用户更改第一个字段，将包含其当前值，而不是原始值。

即使设置了 required，使用 value 预填的示例文字也可能通过简单的非空检查，因此不能把示例地址误当成用户填写的实际值。创建 FormData 对象也不会触发必填字段的验证。在浏览器提交时以及构建数据列表时，将这些检查作为独立的操作处理，并在真正的服务端对输入进行验证。

如果占位符文本缺失或难以阅读

• 检查该字段是否已经有值。 输入的初始值、文本区域的内容、浏览器或脚本的自动填充可能会阻止占位符文本的显示。
• 检查输入类型。对于具有特殊界面的控件，如日期字段，请在字段外提供说明。
• 保持说明简短。在字段中提供一个简短的示例，并在可见的说明文本中提供详细条件。不要在提示文本中使用换行符。
• 检查文本和背景的颜色。颜色过淡或不透明度低可能会影响提示的可见性。在调整样式后，也要检查在移动屏幕上的可读性。

使用 CSS 伪元素 ::placeholder 来设置提示文本的样式。CSS（层叠样式表）控制页面的外观；完整示例使用它来设置提示的颜色和不透明度。有关更多样式示例，请参阅 提示文本样式（韩文）。对于字段名称使用标签，对于简短示例使用提示文本，对于必须保持可见的说明使用单独的描述。