placeholder仅支持<input>（text/search/url/tel/email/password/number）和<textarea>，不支持<select>等其他元素；它仅为视觉提示，不可替代<label>，也不参与提交或验证。
placeholder 属性只提供视觉提示，不能替代 label，也不参与表单提交或验证——把它当“默认值”或“无障碍说明”用，一定会出问题。
哪些元素能用 placeholder
只有原生 <input>（type 为 text、search、url、tel、email、password、number）和 <textarea> 支持 placeholder。其他一律无效：
-
<select>、<button>、<div>上加placeholder属性，浏览器完全忽略 - Vue/React 封装的输入组件，若没把
placeholderprop 透传到内部<input>，也不会显示 -
contenteditable="true"元素不支持placeholder，哪怕 JS 赋值el.placeholder = "xxx"也无效果
为什么 placeholder 不能替代 label
placeholder 是纯视觉辅助，没有语义，屏幕阅读器默认不读；而 <label> 是表单控件的必需语义锚点，决定焦点行为、可访问性等级和点击穿透区域：
- 仅靠
placeholder会导致 WCAG 2.1 4.1.2（名称-角色-值）和 3.3.2（标签或说明）失败 - 用户聚焦输入框后，
placeholder消失，此时若无<label>，视力障碍者无法确认当前字段用途 - 移动端双击放大时，缺少
<label>的输入框可能无法正确触发缩放锚点
样式控制必须用 ::placeholder 伪元素
直接在 <input> 上设 color 或 font-size 对提示文字无效；必须用 CSS 伪元素，并覆盖主流前缀：
立即学习“前端免费学习笔记（深入）”；
input::placeholder {
color: #666;
font-size: 14px;
opacity: 1; /* Firefox 默认 0.53，不设会变淡 */
}
input::-webkit-input-placeholder { color: #666; }
input::-moz-placeholder { color: #666; }
input:-ms-input-placeholder { color: #666; }- iOS Safari 对过长的
placeholder文本会自动截断为“请输入…”，且无法用 CSS 禁用该行为 -
::placeholder不支持line-height或background，多行/富文本提示必须用浮动标签（floating label）方案实现 - 动态修改时，避免直接操作
el.placeholder = "new text"，尤其在 React/Vue 中应优先走 state 驱动渲染，防止 SSR 与客户端不一致
常见误用与降级处理
IE9 及更早版本不支持 placeholder，但强行 polyfill 容易引入焦点管理 bug。更稳妥的做法是：
- 用
data-placeholder存提示文案，配合 JS 在focus/blur时手动切换value和清空逻辑（注意区分真实输入与占位模拟） - 对
type="number"等特殊类型，polyfill 需额外处理step、min、max约束，否则用户可能输入非法字符 - 不要在
required字段中仅依赖placeholder提示格式，比如placeholder="YYYY-MM-DD"，应配合pattern+title做校验反馈
最常被忽略的一点：placeholder 文本一旦设置，就无法通过 CSS 控制换行或 HTML 解析——哪怕你写 placeholder="第一行
第二行"，浏览器也只会当空格处理。真要多行提示，就得放弃原生属性，老老实实写浮动 label。
