HTML中文本输入框input标签的提示文字设置-html教程-PHP中文网

placeholder属性用于在空input或textarea中显示浅灰色提示文字，聚焦或输入后自动消失；仅作视觉引导，不提交、不校验、不替代label，仅支持text、email、password等指定类型。

html中文本输入框input标签的提示文字设置

input 的 placeholder 属性就是干这个的

直接在 <input> 标签里加 placeholder 属性，浏览器会以浅灰色文字显示提示内容，聚焦后自动消失。它不是 value，不会被提交，也不影响表单校验逻辑。

常见错误是误用 value 模拟提示文字——这样会导致用户不输入时也提交了占位内容，且无法区分“用户真的输了个空格”还是“根本没动过这个框”。

placeholder 只支持纯文本，不能嵌 HTML 或换行
中文文案建议用全角空格或标点，避免中英文混排时字体跳变
部分老版本 iOS Safari 会在输入时把 placeholder 文字残留一帧，属于已知渲染 bug，无法通过 CSS 完全修复

placeholder 样式怎么微调

默认颜色太浅、字号太小、对齐不对齐？用 ::placeholder 伪元素控制，但注意各浏览器前缀差异：

input::placeholder {
  color: #999;
  font-size: 14px;
  text-align: center;
}
input::-webkit-input-placeholder { /* Chrome/Edge/Safari */
  color: #999;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #999;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: #999;
}

别漏掉 -ms- 和 -moz-，否则 IE11 或旧版 Firefox 里样式完全不生效。另外，opacity 在某些安卓 WebView 中会失效，优先用 color 控制灰度。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

placeholder 不该承担的功能

它不是 label，也不能替代无障碍支持：

屏幕阅读器通常忽略 placeholder，必须配 <label for="xxx"></label> 或 aria-label
用户复制粘贴时，placeholder 不会被带出，别指望它做格式引导（比如“YYYY-MM-DD”）
国际化项目里，placeholder 值要随语言切换，但不能靠 JS 动态改属性再触发重绘——有些浏览器不会重新渲染伪元素

需要“输入时提示+失焦后仍显示”的场景怎么办

这是 placeholder 本身做不到的，得换思路：

用 <label></label> + position: absolute 模拟浮动标签（Float Label），配合 :focus-within 或 JS 监听 input 事件控制显隐
或者用 <datalist></datalist> 提供可选建议，但它不等于提示文字，只是下拉候选
真要动态提示（比如密码强度、邮箱格式实时反馈），得靠 JS 监听 input 事件 + 额外 DOM 节点，和 placeholder 无关

placeholder 就是轻量级视觉提示，想让它承载交互逻辑，迟早掉坑里。