直接在标签中添加placeholder属性即可，如；它仅对（text、email等）和有效，纯视觉提示、不提交、不可替代，样式需用兼容各浏览器前缀的::placeholder伪元素控制。
input placeholder 提示文字怎么写
直接在 <input> 标签里加 placeholder 属性就行，值是字符串，比如：<input type="text" placeholder="请输入邮箱">。它只在输入框为空且未聚焦时显示，用户一点击或开始输入就自动消失。
注意：placeholder 是纯提示，不参与表单提交；它和 value 互斥——如果同时写了 value="默认值"，placeholder 就不会出现。
- 不要用
placeholder替代<label></label>，可访问性差，屏幕阅读器可能忽略它 - 中文提示建议用全角空格或适当留白，避免紧贴边框显得拥挤
- 移动端 iOS Safari 对 placeholder 的 vertical-align 渲染偶尔偏高，必要时用
line-height微调
placeholder 样式怎么统一改颜色和字体
不同浏览器前缀必须都写，否则老版本 Firefox 或 Edge 会失效。核心是四个伪元素：
-
input::-webkit-input-placeholder（Chrome/Safari/Edge 新版） -
input::-moz-placeholder（Firefox 19+） -
input:-moz-placeholder（Firefox 4–18，已废弃但仍有存量） -
input:-ms-input-placeholder（IE 10–11）
示例 CSS：
input::-webkit-input-placeholder { color: #999; font-size: 14px; }
input::-moz-placeholder { color: #999; font-size: 14px; }
input:-moz-placeholder { color: #999; font-size: 14px; }
input:-ms-input-placeholder { color: #999; font-size: 14px; }
别漏掉 -moz- 和 -ms-，尤其企业内网还有 IE11 残留；font-size 在部分安卓 WebView 里不生效，优先靠 padding 控制视觉大小。
required 提交校验失败时的提示文字怎么自定义
浏览器原生校验弹出的英文提示（如 “Please fill in this field”）无法直接 CSS 修改，得用 JavaScript 拦截并重写：
- 加
oninvalid="setCustomValidity('手机号不能为空')" - 再加
oninput="setCustomValidity('')"，否则第一次报错后一直卡住
完整写法：<input type="tel" required oninvalid="setCustomValidity('手机号不能为空')" oninput="setCustomValidity('')">
注意：setCustomValidity('') 必须清空，否则后续验证会失效；如果字段有多个校验规则（比如格式 + 必填），需在 oninput 里做更细粒度判断，不能只依赖空字符串重置。
placeholder 和 value 混用时容易踩什么坑
最常见错误：把 placeholder 当默认值用，结果用户没输内容、表单提交时字段为空。
-
value是真实提交值，placeholder只是视觉提示 - 想实现“有默认值但可编辑”，必须用
value="张三"，而不是 placeholder - 用 JS 动态设值时，
el.value = 'xxx'不会影响 placeholder 显示状态；但清空value后，placeholder 才会回来
复杂点在于：有些 UI 组件库（比如 Ant Design）会封装 input 并劫持 placeholder 行为，此时直接操作 DOM 可能失效，得查它暴露的 API 是否支持动态 placeholder 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
