PHP小码农

Appearance

placeholder 占位提示 ​

placeholder 属性为空的输入框提供简短的提示文字，帮助用户理解应该输入什么内容。它会在输入框为空时以灰色浅色文本显示，一旦用户开始输入就会自动消失。需要注意，placeholder 不能替代 <label> 标签。

前置知识

阅读本节前，建议先了解：name 与 value

基础概念 ​

什么是 placeholder ​

placeholder 属性显示的占位文本是一种用户提示，特征如下：

  • 灰色显示：以浅灰色文本呈现在输入框中
  • 自动消失：用户输入时立即消失
  • 非提交数据：placeholder 文本不会作为表单数据提交
  • 无语义值：不含实际数据意义

与 label 的对比 ​

特性<label>placeholder
语义控件标签（必需）提示文字（辅助）
位置控件外部控件内部
持久性始终可见输入时消失
可访问性屏幕阅读器朗读可能不朗读
提交数据不提交不提交
样式控制独立元素伪元素 ::placeholder

语法 ​

基本用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>placeholder 基本示例</title>
</head>
<body>
    <h2>登录表单</h2>
    <form>
        <!-- 始终使用 label + placeholder 配合 -->
        <div>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名">
        </div>
        <div>
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码">
        </div>
        <button type="submit">登录</button>
    </form>
</body>
</html>

各控件类型的支持 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>placeholder 支持范围</title>
</head>
<body>
    <h2>各控件类型的 placeholder</h2>
    <form>
        <!-- 支持 -->
        <input type="text" placeholder="文本输入">
        <input type="email" placeholder="邮箱地址">
        <input type="password" placeholder="输入密码">
        <input type="url" placeholder="https://example.com">
        <input type="tel" placeholder="手机号码">
        <input type="search" placeholder="搜索关键词">
        <input type="number" placeholder="请输入数字">
        <textarea placeholder="请输入描述内容..."></textarea>

        <br><br>
        <!-- 不支持 placeholder 的类型（忽略） -->
        <input type="radio" placeholder="选项"><!-- 无效 -->
        <input type="checkbox" placeholder="选项"><!-- 无效 -->
        <input type="file" placeholder="选择文件"><!-- 无效 -->
        <input type="color" placeholder="颜色"><!-- 无效 -->
        <select placeholder="请选择"><!-- 无效，select 不支持 -->
    </form>
</body>
</html>

详细说明 ​

CSS 自定义 placeholder 样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>placeholder CSS</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
        input {
            width: 100%;
            padding: 10px 14px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            box-sizing: border-box;
            margin-bottom: 12px;
        }

        /* 默认 placeholder 样式 */
        .default::placeholder {
            color: #999;
        }

        /* 自定义颜色 */
        .custom-color::placeholder {
            color: #4a90d9;
            font-style: italic;
        }

        /* 省略号截断 */
        .truncate {
            text-overflow: ellipsis;
        }
        .truncate::placeholder {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 聚焦时隐藏 */
        .focus-hide:focus::placeholder {
            color: transparent;
        }

        /* 跨浏览器兼容写法 */
        .cross-browser::placeholder { color: #e74c3c; }
        .cross-browser::-webkit-input-placeholder { color: #e74c3c; }
        .cross-browser::-moz-placeholder { color: #e74c3c; }
        .cross-browser:-ms-input-placeholder { color: #e74c3c; }
    </style>
</head>
<body>
    <h2>placeholder 样式定制</h2>

    <input class="default" type="text" placeholder="默认灰色占位符">

    <input class="custom-color" type="text" placeholder="蓝色斜体占位符">

    <input class="cross-browser" type="text" placeholder="红色占位符（跨浏览器）">

    <input class="focus-hide" type="text" placeholder="聚焦时隐藏">
</body>
</html>

placeholder 与 label 的配合 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>placeholder 与 label</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
        .form-group { margin-bottom: 16px; }
        label {
            display: block;
            font-weight: 600;
            margin-bottom: 4px;
            color: #333;
        }
        input {
            width: 100%;
            padding: 8px 12px;
            border: 2px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
        }
        input:focus { border-color: #4a90d9; outline: none; }
    </style>
</head>
<body>
    <h2>正确的表单设计</h2>
    <form>
        <div class="form-group">
            <!-- label 提供永久的字段标识 -->
            <label for="email">邮箱地址</label>
            <!-- placeholder 提供输入格式提示 -->
            <input type="email" id="email" name="email"
                   placeholder="your@email.com" required>
        </div>

        <div class="form-group">
            <label for="phone">手机号码</label>
            <input type="tel" id="phone" name="phone"
                   placeholder="13800138000">
        </div>

        <div class="form-group">
            <label for="website">个人网站</label>
            <input type="url" id="website" name="website"
                   placeholder="https://yoursite.com">
        </div>
    </form>
</body>
</html>

JavaScript 检测 placeholder 支持 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>placeholder 兼容检测</title>
</head>
<body>
    <h2>placeholder 兼容性检测</h2>
    <input type="text" id="test-input" placeholder="测试">
    <p id="support-msg"></p>

    <script>
        // 检测浏览器是否支持 placeholder
        function supportsPlaceholder() {
            const input = document.createElement('input');
            return 'placeholder' in input;
        }

        const msg = document.getElementById('support-msg');
        if (supportsPlaceholder()) {
            msg.textContent = '当前浏览器支持 placeholder';
            msg.style.color = 'green';
        } else {
            msg.textContent = '当前浏览器不支持 placeholder';
            msg.style.color = 'red';
        }
    </script>
</body>
</html>

实战示例 ​

搜索框 placeholder ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
        .search-box {
            position: relative;
            max-width: 400px;
        }
        .search-box input {
            width: 100%;
            padding: 12px 16px;
            padding-right: 40px;
            border: 2px solid #ddd;
            border-radius: 24px;
            font-size: 16px;
            box-sizing: border-box;
        }
        .search-box input:focus {
            border-color: #4a90d9;
            outline: none;
        }
        .search-box input::placeholder {
            color: #aaa;
        }
        .search-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: #999;
        }
    </style>
</head>
<body>
    <h2>搜索框</h2>
    <div class="search-box">
        <input type="search" placeholder="搜索产品、文章、帮助...">
        <span class="search-icon">&#128269;</span>
    </div>
</body>
</html>

注意事项 ​

placeholder 不能替代 label ​

placeholder 在输入后消失，如果省略 <label>，用户无法在输入后回忆字段含义：

html
<!-- 不推荐：缺少 label -->
<input type="text" placeholder="姓名">

<!-- 推荐：有 label 和 placeholder -->
<label for="name">姓名</label>
<input type="text" id="name" placeholder="请输入真实姓名">

可访问性考量 ​

部分屏幕阅读器不会朗读 placeholder，因此 <label> 是必需的。

placeholder 不是验证提示 ​

placeholder 提供的是格式提示，不是验证规则描述。验证规则应使用 pattern + title。

不要在 placeholder 中放重要信息 ​

placeholder 在用户开始输入后就会消失，不要在其中放置重要信息。

最佳实践 ​

  1. 始终配合 label 使用：placeholder 作为辅助提示，label 作为主标识
  2. 提供格式示例：placeholder 中放格式示例比"请输入..."更有用
  3. 保持简洁：placeholder 文本尽量简短
  4. CSS 定制：确保 placeholder 在各种背景下可读
  5. select 使用第一个 option：<select> 不支持 placeholder，使用第一个空的 <option> 模拟

下一节

继续学习：required 必填验证

参考链接 ​