placeholder是输入框的视觉提示文字，用于展示格式示例（如“138-1234-5678”），不可替代label、无无障碍支持、不参与表单提交，需配合label使用并避免必填说明或操作指令。
在HTML5中，placeholder 属性可用于在输入框（<input> 或 <textarea></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 的方案，也不具备可访问性（屏幕阅读器可能忽略或误读）。它不能用于验证，也无法在输入后保留提示逻辑：
- 必须配合
<label></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（安全起见，通常只用“请输入密码”）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
