HTML5中input的type与placeholder需协同使用：type决定语义、行为及键盘类型，placeholder仅对text、search、tel、url、email、password、number、textarea有效，用于提供简短具象示例；date等类型不支持placeholder，应改用label或option；样式须用::placeholder伪元素四合一声明。
HTML5 中，input 的 type 和 placeholder 是一对黄金搭档：前者决定语义、行为与输入体验，后者提供轻量、即时的视觉引导。二者配合得当，能显著提升表单的可用性与用户理解效率，但必须注意适用范围和常见误区。
选对 type 才能让 placeholder 正常显示
placeholder 并非所有 input 类型都支持。只有以下类型才有效：
-
text、search、tel、url、email、password、number -
textarea同样完全支持 - date、time、checkbox、radio、file、select、hidden 等类型不支持 placeholder —— 写了也不会显示，不是浏览器 bug，是 HTML 规范明确限制
例如： 中的 placeholder 永远不会出现；正确做法是用 或默认 （如 select）来传达提示意图。
type 决定键盘与校验，placeholder 补充具体示例
利用 type 触发原生能力，再用 placeholder 给出符合该类型的典型值，用户一看就懂：
-
→ 唤起邮箱键盘 + 显示标准格式范例 -
→ 弹出数字键盘 + 暗示分段格式（可配合pattern校验） -
→ 自带清空按钮 + 明确搜索意图 -
→ 限制数字输入 + 提供语义说明（注意：部分旧版 iOS Safari 对 number + placeholder 渲染不稳定，必要时 fallback 到type="text" inputmode="numeric"）
placeholder 文本要简短、具象、无歧义
它不是说明文档，而是“输入前的一瞥”。设计时需注意：
- 避免标点结尾（如“请输入用户名。”→ 改为“请输入用户名”）
- 优先用范例代替抽象描述：“admin123” 比 “建议使用字母数字组合” 更直观
- 不放关键约束信息（如“必填”“至少8位”），这些应由
required、pattern和title承担 - 移动端尤其注意长度——过长易被截断，iOS 上还可能因 line-height 不匹配导致文字偏移或顶部被裁
样式统一需用 ::placeholder 伪元素
不能直接写 input { color: #999; }，必须用兼容写法确保各浏览器一致：
- 推荐四合一声明（顺序不可乱）：
额外提醒：如果用了自定义字体，::placeholder 不会自动继承父级 font-family，需显式声明，否则可能回退到等宽字体影响可读性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
