placeholder仅支持text、search、tel、url、email、password、number和textarea；不支持select、date、file、checkbox等元素；不能替代label，非无障碍内容，不参与表单提交。
直接用 placeholder 属性就行，但加了不等于用对了——它既不是默认值，也不算无障碍标签，更不能当格式校验用。
哪些 input type 支持 placeholder
只对 text、search、tel、url、email、password、number 和 textarea 有效。其他如 select、input type="date"、input type="file"、input type="checkbox" 都不支持，加了也白加。
-
type="number"在部分旧版 Android WebView 中可能不显示提示文字 -
type="tel"和type="search"是最稳妥的，适合写格式示例（比如placeholder="138-1234-5678"） - 别给自定义组件或
div加placeholder属性——它只是无效字符串，浏览器完全忽略
为什么 placeholder 不能替代 label
屏幕阅读器基本不读 placeholder 内容，它没有语义，纯属视觉辅助。用户聚焦输入框时，如果没配 label，辅助工具根本不知道这是干啥的字段。
- 必须用
for/id关联：<label for="email">邮箱地址</label><input id="email" placeholder="example@domain.com"> - 或嵌套写法：
<label>手机号<input placeholder="11位数字"></label> - 别在
placeholder里重复label文字，比如label已写“用户名”，placeholder就别写“用户名”，而该写“例如：zhangsan2024”
移动端 placeholder 显示异常怎么调
iOS Safari 对 placeholder 的垂直对齐特别敏感，容易被截顶、偏上或缩略成“请输入…”。
- 给
input设定明确的height和line-height，且两者必须相等 - 避免只靠
padding-top撑高，会导致基线计算错乱 - 自定义字体时，确保
::placeholder里显式声明font-family，否则可能 fallback 到等宽字体 - 在 iOS 开启「辅助功能 → 显示缩放」后手动验证是否仍完整可见
样式和动态切换的坑
改颜色、透明度、字体大小，只能用伪元素，且前缀必须写全；JS 动态赋值 el.placeholder = "xxx" 看似简单，实则容易引发重绘闪动或安卓 WebView 兼容问题。
- 兼容写法必须包含：
input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder - 务必加
opacity: 1—— Firefox 默认半透明，其他浏览器不透明，不统一就会颜色深浅不一 - 想根据状态换提示文案？推荐预设多组
placeholder值 +class切换，而不是频繁 JS 赋值 -
placeholder不参与表单提交，也不影响required校验逻辑——清空输入框后提交，照样报错
真正麻烦的不是加属性，而是判断什么时候不该用它：必填说明、错误提示、长段说明、富文本需求，都得绕开 placeholder 另找方案，比如浮动标签或独立提示区域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
