placeholder仅对input（text、email、tel、url、search、password、number）和textarea生效；select、div及input其他type均不支持；须为空值才显示，且不参与提交，不可替代label或默认值。
占位提示不能靠 CSS 添加，也不能加在 select、div 或 input type="date" 上——浏览器压根不认，写了也白写。
哪些元素和 type 能用 placeholder
只对两类原生表单控件生效：input（限 text、email、tel、url、search、password、number）和 textarea。
-
input type="hidden"、"file"、"checkbox"、"radio"、"date"、"time"、"range"等都不支持，Chrome 下type="date"尤其容易误以为能显示 -
select完全不支持placeholder属性，加了也不会渲染任何提示文字 -
input type="number"在部分旧版 Safari 和 Firefox 中可能不显示 placeholder，别依赖它做关键提示
怎么写才真正生效
直接在标签里加属性就行，不需要 JS、不改 DOM 结构，浏览器原生解析：
<input type="email" placeholder="example@domain.com"><textarea placeholder="请描述问题详情..."></textarea>
- 必须是空值状态才会显示：如果
value有初始值（哪怕只是空格），placeholder 就不会出现 - placeholder 是纯视觉提示，不参与表单提交，也不影响
value初始值（默认为空字符串） - 别把它当默认值用，比如
<input placeholder="张三">—— 用户一点击就清空，反而干扰输入流程
想给 select 或 div 加占位提示怎么办
不能硬塞 placeholder 属性，得换思路：
- 对
select：用第一个option同时加selected和disabled，且value=""，再配合required强制用户选择有效项 - 对
div或其他非表单元素：用data-placeholder+ CSS::before模拟，例如：<div class="placeholder-target" data-placeholder="暂无内容"></div>
CSS 写：.placeholder-target:empty::before { content: attr(data-placeholder); color: #999; } - 注意：
:empty不匹配含空格或换行的元素，若内容动态插入，建议用 JS 清理空白节点，或改用:not(:has(*))（仅现代浏览器支持）
最常被忽略的一点：placeholder 文字屏幕阅读器通常不读，所以每个可输入字段都必须配 label 或 aria-label；格式说明、必填要求、错误状态这些关键信息，绝不能只塞在 placeholder 里——它一输就没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
