HTML5中placeholder属性用于在input和textarea为空时显示灰色提示文本，不参与提交且不可替代label；仅支持部分input类型和textarea，不支持select等元素，需用CSS伪元素跨浏览器定制样式。
HTML5 中 placeholder 属性怎么用
直接在 <input> 或 <textarea></textarea> 标签里加 placeholder 属性就行，浏览器会自动在控件为空时显示灰色提示文字。它不是 value，不参与表单提交，也不影响初始值。
常见错误是把它写成 placehoder（少个 l）或误当成 value 来赋默认值——这样用户一聚焦就会清空内容，体验反而变差。
-
placeholder只接受纯文本，不解析 HTML（比如写<strong>用户名</strong>会原样显示） - 对
<input type="number">等部分类型，Chrome 会忽略placeholder（Safari 和 Firefox 支持） - 无障碍访问中，
placeholder不能替代<label></label>，屏幕阅读器通常不读它
哪些表单元素支持 placeholder
只有两类原生支持：<input>（除 type="hidden"、"button"、"submit"、"reset"、"image" 外的多数类型）和 <textarea></textarea>。
不支持的典型场景包括：<select></select>、<input type="file">、<input type="checkbox">。想给下拉框加提示，得用伪选项（如 <option value="" disabled selected>请选择</option>），而不是 placeholder。
立即学习“前端免费学习笔记（深入）”；
placeholder 的样式怎么自定义
默认是浅灰色，但可以通过伪元素调整颜色、字体等。注意不同浏览器前缀不同：
input::placeholder,
textarea::placeholder {
color: #666;
font-style: italic;
}
input::-webkit-input-placeholder { /* Chrome/Safari/Opera */
color: #666;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #666;
}
input:-ms-input-placeholder { /* IE10+ */
color: #666;
}容易踩的坑：如果用了 !important 覆盖不了，可能是选择器权重不够，或者目标浏览器根本不支持该伪元素（比如旧版 Edge 对 ::placeholder 支持不全）。
移动端和国际化要注意什么
在 iOS Safari 上，placeholder 文字可能被截断，尤其输入框高度不够或设置了 line-height 过小；Android 部分 WebView 对长提示文本换行支持不稳定。
多语言项目中，别把 placeholder 写死在 HTML 里。应该由 JS 动态注入，或通过 data-i18n 属性配合 i18n 库处理——否则无法做语义化翻译，也难维护。
占位文本本质是辅助性提示，不是功能必需项。真正关键的字段说明，还是得靠 <label></label> + aria-describedby 组合来保障可访问性。
