placeholder绝对不能当label用，因其无语义权重、不被屏幕阅读器稳定播报、未进入无障碍树，且W3C明确禁止替代label；必须使用显式label或aria-label确保可访问性合规。
placeholder 属性不能替代 label，也不该承载关键提示或格式要求——这是最常被忽略、也最容易引发可访问性与用户体验问题的硬边界。
为什么 placeholder 不能当 label 用
屏幕阅读器会读出 placeholder，但它不是语义化标签，不绑定表单控件的“所属关系”。用户聚焦输入框时，只听到提示文字，却不知道这个字段叫什么、是否必填、属于哪个业务模块。
常见错误现象：仅写 <input type="email" placeholder="邮箱地址">，没配 <label></label>；或者把 required 提示塞进 placeholder 里，比如 placeholder="用户名（必填）"。
- 用户开始输入后，
placeholder消失，“必填”二字就没了，容易漏填 - 视障用户依赖
label的for/id关联获取上下文，placeholder不提供这个能力 - 某些浏览器（如旧版 Safari）在缩放或高对比度模式下可能隐藏
placeholder文字，但label始终可见
placeholder 该放什么内容
它只适合放「输入样例」或「轻量格式引导」，且必须简短、无歧义。一旦涉及规则、约束、条件分支，就该交给 pattern、title、inputmode 或后端验证。
立即学习“前端免费学习笔记（深入）”；
使用场景示例：
- 搜索框：
placeholder="搜索商品名称或编号"—— 描述输入意图，非格式 - 电话输入：
placeholder="138-XXXX-XXXX"—— 纯视觉参考，实际仍需pattern+title做提交校验 - 密码框：
placeholder="至少8位，含大小写字母和数字"—— ❌ 错误！应拆解为title提示 + 前端实时强度检测 + 后端规则校验
性能影响小，但滥用会导致表单逻辑碎片化：前端靠 placeholder 暗示，后端靠另一套规则，中间没对齐，用户提交失败时一脸懵。
样式控制要兼顾多浏览器前缀
::placeholder 伪元素虽已标准化，但 Safari 12 及更早、Firefox 18–63、IE 10–11 仍需厂商前缀，否则颜色/字体设置无效。
正确写法必须包含全部主流前缀：
.form-control::placeholder {
color: #6c757d;
}
.form-control::-webkit-input-placeholder {
color: #6c757d;
}
.form-control::-moz-placeholder {
color: #6c757d;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #6c757d;
}
容易踩的坑：
- 只写
::placeholder，结果在 Firefox 60 以下或 IE 11 里文字变成默认浅灰，对比度不足，看不清 - 忘了给
::-moz-placeholder加opacity: 1，Firefox 默认是 0.53，文字发虚 - 用 CSS 变量动态改色时，未在各前缀规则中同步变量，导致部分浏览器颜色不一致
长提示文本显示不全怎么办
原生 input 的 size 属性默认约 20 字符宽，超长 placeholder 会被截断，尤其在移动端小屏上几乎不可读。
解决思路不是加 width 百分比（会破坏响应式布局），而是用 JS 动态设 size：
const el = document.getElementById('search-input');
if (el && el.placeholder) {
el.size = Math.min(60, el.placeholder.length + 4); // +4 防止紧贴边框
}
注意点：
- 别直接设
el.style.width，这会覆盖 CSS 媒体查询的响应式宽度 -
size是字符单位，不是像素，值太大（如 200）会让输入框撑满整行，反而难用 - 如果 placeholder 内容动态变化（如多语言切换），记得重新计算并更新
size
真正难处理的是中英文混排、emoji、全角字符——placeholder.length 返回的是 UTF-16 码元数，一个 emoji 可能占 2 个长度，但视觉宽度未必翻倍。这种场景建议优先精简文案，而非硬调 size。
