HTML placeholder 属性

HTML placeholder 语法

在 HTML 中，placeholder 属性用于为文本框添加一个提示内容，通常是描述用户应该输入什么类型的信息。

只有以下元素支持 placeholder 属性。

input：适用于 type 为 text、search、url、tel、email、password、number。
textarea。

语法：

<input type="text" placeholder="提示文本">

<textarea placeholder="提示文本"></textarea>

说明：

当用户点击输入框或开始输入内容时，提示文本会自动消失。

例如，下面是一个带有 placeholder 的输入框，提示用户输入电子邮件地址：

<input type="email" placeholder="请输入您的电子邮件地址">

默认情况下，placeholder 颜色是浅灰色。如果需要修改它的颜色或字体，我们可以使用 CSS 的 ::placeholder 伪元素来实现，比如：

input::placeholder {
    color: #999;
    font-style: italic;
}

注意:

placeholder 属性并不适合作为表单字段的关键描述信息。因为一旦用户开始输入，提示文本会消失，无法为后续的用户提供信息。
我们应该使用 label 元素来提供字段的明确描述，它对辅助技术（如屏幕阅读器）的支持更为完善，且在表单交互时始终可见。

HTML placeholder 摘要

适用元素	input 或 textarea
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML placeholder 示例

接下来，我们通过几个简单的例子来讲解一下 HTML placeholder 属性是如何使用的。

示例 1：placeholder 属性用于 input 元素

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="/register" method="post">
        <p>
            <label>
                账号：
                <input type="text" name="account" placeholder="请输入您的账号">
            </label>
        </p>
        <p>
            <label>
                密码：
                <input type="password" name="password" placeholder="请输入您的密码">
            </label>
        </p>
        <p>
            <button type="submit">登录</button>
        </p>  
    </form>
</body>
</html>

页面效果如下图所示。

分析：

placeholder 属性最常用于为文本框添加一个提示文本，从而增强用户体验。

示例 2：placeholder 用于其他类型的 input 元素

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="/register" method="post">
        <p>
            <label>
                电子邮件：
                <input type="email" name="email" placeholder="例如：yourname@example.com">
            </label>
        </p>
        <p>
            <label>
                电话号码：
                <input type="tel" name="number" placeholder="例如：138XXXXXXXX">
            </label>
        </p>
        <p>
            <button type="submit">注册</button>
        </p>  
    </form>
</body>
</html>

页面效果如下图所示。

分析：

placeholder 属性可以用于多种 type 类型的 input 元素，以提供特定格式的提示。

示例 3：placeholder 用于 textarea 元素

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="/feedback" method="post">
        <p>
            <label>
                意见反馈：
                <textarea name="feedback" rows="5" cols="40" placeholder="请在这里输入您的建议或反馈..."></textarea>
            </label>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

分析：

textarea 元素也支持 placeholder 属性，常用于多行文本输入区域。