placeholder是输入框的视觉提示文字，用于展示格式示例（如“138-1234-5678”），不可替代label、无无障碍支持、不参与表单提交，需配合label使用并避免必填说明或操作指令。

在HTML5中，placeholder 属性可用于在输入框（<input> 或 <textarea>）为空时，显示一段浅灰色的提示文字，帮助用户理解应输入的内容格式。它不是标签，也不影响表单提交，仅作视觉引导。

正确使用 placeholder 展示格式示例

将常见输入格式直接写进 placeholder 值中，用括号、斜杠或短横线等符号清晰分隔。浏览器会自动以较淡的颜色和较小字号渲染，不干扰实际输入：

• <input type="text" placeholder="姓名（如：张三）">
• <input type="email" placeholder="example@domain.com">
• <input type="tel" placeholder="138-1234-5678">
• <input type="date" placeholder="YYYY-MM-DD（如：2025-04-05）">

注意 placeholder 的局限性

placeholder 不是替代 label 的方案，也不具备可访问性（屏幕阅读器可能忽略或误读）。它不能用于验证，也无法在输入后保留提示逻辑：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 必须配合 <label> 使用，确保语义正确和无障碍支持
• 不要把必填说明（如“*必填”）放进 placeholder，因为它会在用户开始输入时消失
• 避免长句或复杂说明；简洁、具体、符合用户直觉的格式样例效果最好

与 CSS 配合增强可读性（可选）

可通过 CSS 微调 placeholder 的样式，使其更贴合设计风格，例如调整颜色、字体大小或透明度：

立即学习“前端免费学习笔记（深入）”；

• WebKit/Blink 浏览器：::placeholder { color: #777; font-size: 0.9em; }
• Firefox：::-moz-placeholder { color: #777; }
• 全浏览器兼容写法建议使用 autoprefixer 或手动添加多前缀规则

不推荐的 placeholder 用法

以下做法会降低用户体验或引发误解：

• 用 placeholder 替代 label（导致无标签，影响可访问性和点击聚焦）
• 写成操作指令，如“请点击此处输入”，而非格式示例
• 放入占位数据但未说明是示例（如直接写“123456”，用户可能误以为这是默认值）
• 对密码框使用含格式提示的 placeholder（安全起见，通常只用“请输入密码”）