HTML5原生placeholder属性直接写在input标签中，支持text、search等类型，中文空格emoji均可显示；非JS/CSS属性，错误操作会导致失效；需配合label实现无障碍，::placeholder伪元素须兼容各浏览器前缀。
placeholder 属性直接写在 input 标签里就行
不用 JavaScript、不用 CSS 伪类、也不用额外库——HTML5 原生支持 placeholder 属性，只要加在 <input> 标签上，浏览器就会自动显示灰色提示文本。
常见错误是把它当成 JS 属性或 class 名去操作，比如写成 input.placeholder = "请输入邮箱"（无效），或者试图用 style="placeholder: ..."（语法错误）。
-
placeholder是 HTML 属性，不是 CSS 属性，也不是 DOM 属性名 - 只对部分
type有效：支持text、search、url、tel、email、password、number等，但不支持hidden、checkbox、radio、file - 中文、空格、emoji 都能正常显示，无需编码
placeholder 文本被截断或不显示？检查这些点
不是所有浏览器都“老实”渲染 placeholder，尤其在自定义样式后容易出问题。
- CSS 中写了
input { font-size: 0; }或line-height: 0;→ placeholder 会消失或压扁 - 用了
appearance: none;但没补全各浏览器前缀 → 某些 Safari 版本下 placeholder 不出现 - 设置了
input::placeholder { color: transparent; }却忘了重置 → 文本变成看不见的“隐形提示” - 在表单重置（
form.reset()）后 placeholder 没恢复？那是你手动清空了 value，而 placeholder 本身不会被 JS 影响，它只随标签属性存在
想让 placeholder 在 focus 后淡出？用 ::placeholder 伪元素控制
原生 placeholder 不带动画，但可以通过 CSS 伪元素微调表现。注意：不同浏览器前缀必须写全，否则失效。
立即学习“前端免费学习笔记（深入）”；
input::placeholder {
color: #999;
font-size: 14px;
}
input:focus::placeholder {
opacity: 0.3;
transition: opacity 0.2s;
}
-
::placeholder是标准写法，但旧版 Chrome/Safari 需要::-webkit-input-placeholder - Firefox 用
::-moz-placeholder（注意是单冒号），且需单独设opacity才生效 - 不要在
::placeholder里设display: none—— 这会导致整个提示消失，且无法通过 focus 恢复
placeholder 不是 label，别拿它当表单说明用
这是最容易被忽略的设计陷阱：placeholder 会在用户输入时立刻消失，无法被屏幕阅读器稳定读取，也不参与表单验证逻辑。
- 无障碍要求：每个
input必须配<label for="xxx">，不能只靠 placeholder 说明用途 - 用户输入中途失焦再回来，placeholder 已不见，如果没 label，用户可能忘记字段要填什么
- placeholder 不能替代空值校验提示，比如提交时提示“请填写手机号”，不能指望用户靠 placeholder 记住格式
- 国际化项目中，placeholder 很难做 i18n 替换（不像
label可绑定数据），硬编码多语言易出错
真正该动脑筋的，不是怎么让 placeholder 更炫，而是怎么让它和 label、aria-describedby、输入反馈一起工作——毕竟用户不关心你用了几个伪元素，只关心输得对不对、看得清不清。
