placeholder属性需直接写在或标签内，如，仅作临时提示，不提交、不替代label、不支持换行与变量，且须注意可访问性与样式兼容性。
HTML 中 placeholder 属性怎么写才有效
直接在 <input> 或 <textarea></textarea> 标签里加 placeholder 属性就行，浏览器原生支持，不用 JS 就能显示浅灰色提示文字。
常见错误是把它当成默认值或初始值——placeholder 不会提交、不会触发 change 事件、用户一输入就消失，也不能用 value 的方式读取它。
-
placeholder值必须是字符串，不能是变量或表达式（服务端渲染或框架里需注意转义） - 中文空格、全角字符会导致显示异常，建议统一用半角空格
- 不支持换行，
<textarea placeholder="第一行 第二行"></textarea>中的 - 如果同时设了
value和placeholder，且value非空，那placeholder压根不显示
React 里动态设置 placeholder 容易漏掉什么
JSX 中写 placeholder={text} 没问题，但要注意：当 text 是 null 或 undefined 时，React 会把属性完全省略，导致占位符消失——这和预期“显示空字符串提示”不符。
- 安全写法是显式转成字符串：
placeholder={text ?? ''}或placeholder={String(text)} - 如果依赖 props 或 state 动态更新，确认初始值不是
undefined，否则首次渲染无提示 - 不要在
placeholder里放敏感信息或实时校验结果，它只用于引导，不参与表单逻辑
用 CSS 调整 placeholder 样式时的兼容性坑
各浏览器前缀不同，纯 CSS 修改颜色/字体大小必须覆盖所有主流写法，否则在 Safari 或旧版 Edge 里失效。
input::placeholder,
textarea::placeholder {
color: #999;
font-size: 14px;
}
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
textarea::-webkit-input-placeholder { color: #999; }
textarea::-moz-placeholder { color: #999; }
textarea:-ms-input-placeholder { color: #999; }
-
::placeholder是标准语法，但 IE11 及更早版本只认::-ms-input-placeholder - Firefox 中
::-moz-placeholder会同时匹配空与非空状态，而 Chrome/Safari 的::-webkit-input-placeholder只在为空时生效 - 别对
placeholder做display: none，部分安卓 WebView 会连输入框焦点都异常
替代方案：什么时候不该用 placeholder
WCAG 2.1 明确指出，仅靠 placeholder 无法满足可访问性要求——屏幕阅读器可能跳过它，且用户输入后提示就没了，容易忘记字段用途。
- 必填字段必须配
<label></label>，哪怕视觉上隐藏也要用aria-label或visually-hidden类 - 复杂格式要求（如“手机号请输11位纯数字”）别塞进
placeholder，改用下方辅助文本<small></small>或aria-describedby - 多语言场景下，
placeholder很难做精准翻译缓存，不如由组件统一管理文案 key
真正要靠占位符引导的，只是最轻量的格式示意，比如“example@email.com”或“YYYY-MM-DD”。其余都该交给 label、hint 或实时反馈来承担。
