placeholder仅对<input>（type为text、search、url、tel、email、password、number）和<textarea>有效，不支持<select>、<checkbox>等其他元素；它仅为视觉提示，非默认值，提交时为空值。
placeholder 属性直接写在 <input> 或 <textarea> 标签里就生效，不需要 JS 初始化、也不依赖 CSS 类——它是浏览器原生支持的 HTML5 特性。
placeholder 只对哪些元素和类型有效？
- 仅适用于：
<input>（且type必须是text、search、url、tel、email、password、number）和<textarea> - 不支持：
<select>、<checkbox>、<radio>、<file>、<div>、<p>，哪怕加了contenteditable="true"也无效 - 常见误用：给
<input type="hidden">或<input type="button">加placeholder，浏览器会完全忽略
为什么输入后提示消失了，但表单提交没拿到 placeholder 文本？
因为 placeholder 不是默认值，它只是视觉提示：
- 用户未输入时，
input.value是空字符串""，不是 placeholder 内容 - 表单提交时，该字段若为空，后端收到的就是空值，不是 placeholder 文本
- 想设初始内容，得用
value="xxx"（非受控）或defaultValue（React 受控组件需配合 state）
容易踩的坑：
- 把
placeholder="必填"当作校验提示 → 实际用户输空也能提交，必须额外加required属性或 JS 校验 - 在移动端把 placeholder 当成 label 使用 → 输入后 label 消失，可访问性崩溃，屏幕阅读器可能不读或误读
怎么改 placeholder 的颜色和字体？必须写全兼容写法
::placeholder 是伪元素，不同内核浏览器前缀不同，只写一种会漏掉旧版 Safari 或 Firefox：
立即学习“前端免费学习笔记（深入）”；
- 现代标准写法（Chrome/Firefox 19+/Edge 79+）：
::placeholder - Chrome/Safari/Edge 旧版：
::-webkit-input-placeholder - Firefox 18 及更早：
:-moz-placeholder - IE 10–11：
:-ms-input-placeholder
推荐这样写（复制即用）：
input::placeholder,
textarea::placeholder {
color: #666;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #666;
}注意：如果不显式声明 font-family，iOS Safari 可能 fallback 到等宽字体，导致文字挤在一起；line-height 和 height 不匹配时，iOS 上 placeholder 容易被截顶。
placeholder 最容易被忽略的点是它和语义、可访问性、表单逻辑三者完全解耦——它既不参与校验，也不替代 <label>，还不能响应状态变化。真要动态换提示，别反复赋值 input.placeholder，预设 class + CSS 切换更稳。
