placeholder 属性仅支持 <input type="text/search/tel/url/email/password"> 和 <textarea>，不支持 number、date、select 等标签；它非可访问内容，不应替代 <label>，也不等同于默认值或提示说明。
哪些 HTML 标签支持 placeholder 属性
placeholder 不是所有表单标签都能用，它只对可编辑的、单行文本输入类元素有效。浏览器会忽略在不支持的标签上写的 placeholder —— 不报错，也不显示，容易误以为写错了。
明确支持的标签有：
<input type="text"><input type="search"><input type="tel"><input type="url"><input type="email">-
<input type="password">（部分老版本 iOS Safari 有渲染异常） <textarea>
常见误用场景：<input type="number">、<input type="date">、<select>、<input type="checkbox"> 都不支持 placeholder。加了也白加，别指望它显示出来。
placeholder 的文字到底算不算“可访问内容”
它不是 label，也不是辅助技术（如屏幕阅读器）默认播报的内容。多数屏幕阅读器默认跳过 placeholder，用户可能根本不知道该填什么。
正确做法始终配 <label>：
<label for="username">用户名</label> <input type="text" id="username" placeholder="请输入手机号或邮箱">
如果实在要用提示文字引导格式（比如“示例：admin@example.com”），建议改用 <small> 或 aria-describedby 关联说明段落，而不是依赖 placeholder。
移动端和旧版浏览器的兼容性坑点
IE 9 及更早版本完全不支持 placeholder；iOS Safari 在 input[type=password] 上曾长期不显示占位符（iOS 12.2+ 才修复）。这些情况不会报错，但用户看到的是空输入框。
若需兼容，可手动模拟：
- 用 JS 监听
focus/blur切换 value 和样式 - 注意：不能简单用
value模拟，否则会干扰表单提交和受控组件逻辑 - 现代项目推荐用
useEffect+ref（React）或addEventListener（原生）做轻量 fallback
不过，只要目标环境明确支持（比如只跑在 Chrome 80+ 或微信内置浏览器），直接用原生 placeholder 更轻量、更稳定。
别把 placeholder 当成“默认值”或“提示说明”来用
它的语义就是“临时提示”，用户开始输入时自动消失，且不会参与表单验证、不触发 change 事件、不被 form.reset() 清除——这些行为常被误判。
典型混淆场景：
- 想让用户“不填时也提交某个默认字符串”？用
value="默认值"，不是placeholder - 想在用户未输入时显示帮助文案？用
<span class="hint">配合 JS 显示/隐藏 - 需要动态更新提示文字？
placeholder支持 JS 修改（el.placeholder = "新提示"），但频繁操作可能引发重排，慎用于高频交互
最常被忽略的一点：当 input 被设为 disabled 或 readonly 时，placeholder 通常不可见（各浏览器表现不一），这时候它就彻底失效了。
