label是语义锚点，必须通过for/id绑定或嵌套确保可访问性；placeholder仅为临时视觉提示，不参与语义、校验或表单逻辑，二者不可混用。
label 和 placeholder 完全不是一回事，混用会导致可访问性失效、自动填充异常、表单重置行为错乱 —— 它们一个管“语义与交互”，一个只管“空状态下的视觉提示”。
label 是表单控件的语义锚点，必须存在
浏览器和屏幕阅读器靠 label 知道这个输入框“叫什么、干什么”。它通过 for 属性绑定到控件的 id，或直接包裹控件。用户点击 label 文本，焦点自动落到对应输入框上——这对触摸屏、键盘导航、视障用户都关键。
常见错误现象：
- 删掉
label只留placeholder：VoiceOver/NVDA 不读字段用途，表单无法被键盘用户 tab 导航到正确上下文 - 写
<label>邮箱</label><input type="email">却没设for或包裹：语义断裂，辅助技术无法建立关联 - 用
display: none隐藏label：等同于删除，视觉隐藏必须用visually-hidden类
placeholder 仅在 value 为空时显示，且不参与任何逻辑
placeholder 是纯视觉层的临时文本，只在 input 的 value 为空字符串时渲染，一旦用户输入、粘贴、甚至 JS 设置了 value = "" 后又清空，它就出现；但只要 DOM 中 value 不为空，它就消失 —— 它不触发校验、不随表单提交、不被 form.reset() 清除（reset() 只清 value，placeholder 属性值始终在）。
使用场景限制明确：
- 只支持
text、search、tel、url、email、password、number和textarea；对select、checkbox、file写了也无效 - 不能放业务规则：“6–12位字母数字”这类文字一聚焦就消失，移动端还常被截断
- 不要中英文混写占位符（如“用户名 username”），多语言项目必须走 i18n 系统
样式控制必须用伪元素，且前缀不能少
直接写 input { color: #666 } 对 placeholder 完全无效。它由浏览器独立渲染，只能用伪元素：
input::placeholder {
color: #666;
font-size: 14px;
}
input::-webkit-input-placeholder { color: #666; }
input::-moz-placeholder { color: #666; opacity: 1; }
input:-ms-input-placeholder { color: #666; }
容易踩的坑：
- 漏写旧版前缀：Safari 15.4 之前需
::-webkit-input-placeholder，Firefox 会默认加opacity: 0.53，不显式设opacity: 1就发灰 - 给
::placeholder设padding或background：静默忽略，不报错也不生效 - 在微信 WebView 中同时设
value=""和placeholder：某些 WebKit 版本会优先渲染空value，导致 placeholder 不显示
移动端 placeholder 显示异常的三个典型诱因
iOS Safari 和微信内置浏览器里 placeholder “时有时无”，往往不是代码写错，而是触发了底层渲染边界条件：
- input 上用了
transform: scale(0.95)或perspective：破坏 placeholder 文本层叠上下文，部分安卓机型也会错位 - viewport 设了
user-scalable=no：微信 WebView 偶发渲染延迟，建议改用maximum-scale=1 - 页面加载后 JS 动态设置了
input.value = ""：某些 WebKit 版本不会重新触发 placeholder 渲染，需手动input.blur(); input.focus()强制刷新
最常被忽略的一点：placeholder 的存在本身会让开发者误判表单状态 —— 看起来“空”的输入框，其实是 value === "" + placeholder 显示的结果；而 form.reset() 后，它看起来一样，但 DOM 状态已重置。别靠“有没有 placeholder 文字”来判断字段是否被填过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
