直接用 placeholder 属性即可，支持 text、email、search 等类型但不支持 password；提示文字不可换行或含 html；需用 ::placeholder 等伪元素改色；多语言场景建议用 label 替代。
怎么给 <input> 添加提示文字（placeholder）
直接用 placeholder 属性就行，这是最轻量、最通用的方案。它在输入框为空且未获得焦点时显示灰色提示文字，用户开始输入后自动消失。
常见错误是把提示文字写进 value 里，结果一刷新页面就真成了默认值，还可能被表单提交——这不是提示，是脏数据。
<input type="text" placeholder="请输入用户名">- 支持所有文本类输入类型：
text、email、search、tel、url等，但不支持password（部分旧浏览器会屏蔽或忽略） - 提示文字不能换行，也不能加 HTML 标签；如果需要富文本提示，得用其他方案（见下一条）
placeholder 文字太浅看不清？怎么改颜色
原生 placeholder 默认是浅灰，有些设计要求更暗或带品牌色，必须用 CSS 伪元素覆盖。不同浏览器前缀不一样，漏掉就失效。
- Chrome/Edge/Opera：
::placeholder - Firefox：
::-moz-placeholder（注意双冒号和连字符） - 老版 Firefox（::-moz-placeholder（单冒号）
- Safari：
::placeholder（新版已统一，但 iOS Safari 旧版本仍需测试）
示例：
input::placeholder { color: #666; font-size: 14px; }
input::-moz-placeholder { color: #666; }
input::-webkit-input-placeholder { color: #666; }
想让提示文字一直显示（比如标签式提示），该用 <label></label> 还是 title？
title 是 tooltip，鼠标悬停才出现，不是表单提示的正解；而 <label></label> 配合 for 和 id 才是语义化、可访问、可点击的正确方式。
- 必须确保
<label for="user">用户名</label>中的for值与对应<input id="user">一致 - 也可以把
<input>包在<label></label>里，省去id/for（但不利于复杂布局） - 别只靠视觉位置对齐——屏幕阅读器依赖的是
label关联，否则视障用户根本不知道这个输入框是干啥的
placeholder 在 iOS Safari 里不显示？
老版本 iOS Safari（尤其是 12 之前）对 placeholder 渲染有 bug：输入框设了 padding 或 line-height 后文字偏移、截断甚至完全不显示。
- 优先用
padding控制内边距，避免用height+line-height拉高输入框 - 如果用了 flex 布局或绝对定位，检查是否意外遮盖了
placeholder区域 - 真遇到兼容问题，可用 JS 动态模拟：
input.addEventListener('focus', () => { if (input.value === '') input.value = ''; })，但仅作兜底，别替代原生placeholder
真正麻烦的是多语言场景下 placeholder 的动态切换——它不响应 locale 变化，得靠 JS 切换属性值，这时候 label 就比 placeholder 更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
