placeholder仅对input（text、search、tel、url、email、password、number）和textarea有效，不支持radio、checkbox、select、div等非表单控件；它仅为空值时显示视觉提示，不参与提交与校验，不可替代label。
哪些表单元素能直接用 placeholder 属性
placeholder 是原生 HTML5 属性，只对 <input>（type 为 text、search、tel、url、email、password、number）和 <textarea> 生效。
常见错误现象：<input type="radio"> 或 <input type="checkbox"> 加了 placeholder 属性，浏览器完全无视——它们不支持该属性，开发者工具里能看到属性存在，但不会渲染任何提示文字。
正确写法示例：
<input type="text" placeholder="请输入用户名"> <textarea placeholder="请填写反馈意见"></textarea> <input type="email" placeholder="name@example.com">
注意：placeholder 仅在控件为空且未获得焦点时显示；一旦有 value 值或用户开始输入，它就自动隐藏。
立即学习“前端免费学习笔记（深入）”；
为什么 <div contenteditable="true"> 不能用 placeholder
contenteditable 元素不是表单控件，HTML 规范中明确不支持 placeholder 属性。加了也无效，连伪类 ::placeholder 都无法匹配。
必须用 JS + 辅助结构模拟：
- 给元素添加一个同层的
<span class="placeholder">，初始显示提示文字 - 监听
input和focus/blur事件，控制该span的显隐 - CSS 上用
position: absolute叠在编辑区域上方，pointer-events: none避免遮挡光标
关键点：不能依赖 :empty 判断内容是否为空——contenteditable 即使“看起来空”，也可能包含 <br> 或零宽空格，需用 element.textContent.trim() === "" 检测。
非表单元素（如 <p>、<div>）怎么加占位文案
直接加 placeholder 属性是无效的，浏览器会忽略。合法且轻量的方案是：用 data- 自定义属性 + CSS ::before 伪元素。
示例：
<div class="field" data-placeholder="暂无内容"></div>
CSS：
.field:empty::before {
content: attr(data-placeholder);
color: #999;
font-size: 0.875em;
}
注意限制：
-
:empty要求元素内**完全无子节点**（包括文本节点、空格、换行符），否则不触发 - 若内容可能含空白字符，改用
:not(:has(*))（仅支持现代浏览器）或 JS 控制类名 -
data-placeholder是约定俗成名，换成data-hint也没问题
placeholder 不是 label 的替代品
placeholder 文本没有语义，屏幕阅读器可能跳过，也不参与表单可访问性树。W3C 明确要求：每个可输入控件都必须配 <label>。
错误写法：
<input type="text" placeholder="邮箱地址">
正确写法：
<label for="email">邮箱地址</label> <input type="text" id="email" placeholder="xxx@example.com">
容易被忽略的细节：
-
placeholder不支持 HTML 标签，不能加<strong>或换行 - 不同浏览器对
::placeholder伪元素的支持程度不同（如 Firefox 不支持动画），样式增强需谨慎 - 移动端软键盘弹出时，部分 Android 浏览器会错误地将
placeholder当作已输入内容提交（极少见，但测试环境要覆盖）
