placeholder属性最直接：HTML原生支持，仅需在input或textarea标签中添加，为空且未聚焦时显示浅色提示文字，不参与提交，获焦即消失；误用value会导致提示被提交，样式须用::placeholder伪元素控制。
用 placeholder 属性最直接
HTML 原生就支持带提示文字的输入框，不用 JS、不用额外标签，加一个 placeholder 属性就行。它显示在 <input> 或 <textarea> 里，文字颜色浅、不占提交值、获得焦点后自动消失。
常见错误是把它写成 value="提示文字" —— 这会导致用户不手动删掉，提示文字真被提交了；或者误以为要靠 CSS 模拟，徒增复杂度。
<input type="text" placeholder="请输入用户名"><textarea placeholder="请描述问题详情"></textarea>- 提示文字不会触发
required校验，也不算输入内容 - 部分旧版 IE（≤9）不支持，如需兼容，得用 JS 回退逻辑
placeholder 的样式能自定义吗
可以，但必须用伪元素 ::placeholder，不能直接写 color 在 input 上。不同浏览器前缀略有差异，建议写全：
input::placeholder,
textarea::placeholder {
color: #999;
font-style: italic;
}
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
注意：如果用了深色背景，浅灰默认色可能看不清；另外 iOS Safari 对 font-size 缩放有 bug，设太小可能不显示。
立即学习“前端免费学习笔记（深入）”；
提示文字需要动态切换怎么办
纯 HTML 不支持运行时改 placeholder 文字，得用 JS 操作 element.placeholder 属性：
document.getElementById("search").placeholder = "搜索商品或订单号";- 适合多语言切换、表单状态变化（如登录/注册切换时更新提示）
- 别用
setAttribute("placeholder", ...)，虽然也能工作，但不如直接赋值可靠 - 如果提示文字含 HTML 实体（如
比 placeholder 更稳妥的替代方案
当提示文字需长期可见（比如用户已输入但还想保留指引）、或要支持老浏览器、或提示含图标/多行说明时，placeholder 就不够用了。
这时推荐用 <label> 配合 for/id 关联，或把提示作为独立 <span> 放在输入框下方：
<label for="email">邮箱地址（用于接收通知）</label><input id="email" type="email">- 视觉上可用 CSS 把 label 定位到输入框内部左上角，但语义更清晰、可访问性更好
- 屏幕阅读器会读出 label 内容，而
placeholder默认不被朗读（除非显式加aria-label）
真正要注意的是：别为了“看起来简洁”牺牲可访问性和语义——很多所谓“优雅设计”，在键盘导航或读屏软件下直接失效。
