HTML怎么设置占位符_HTML placeholder属性教程【提示】

2次阅读

placeholder仅对可编辑文本类表单控件生效,如text、search、email、url、tel、number(部分)、textarea和password;hidden、checkbox、radio、file等不支持;它非value,不提交、不被js读取,且需配合label保障可访问性。

HTML怎么设置占位符_HTML placeholder属性教程【提示】

placeholder 只对表单控件生效,不是所有 <input> 都能用,也不是所有浏览器都默认支持它的全部行为。

哪些 <input> 类型支持 placeholder

只有可编辑的文本类输入控件才认这个属性。比如:

  • <input type="text"><input type="search"><input type="email"><input type="url"><input type="tel"><input type="number">(部分浏览器支持)
  • <textarea></textarea> 也完全支持
  • <input type="password"> 支持,但提示文字会被掩码(chrome 显示 ●●●,firefox 显示明文,行为不一致)
  • <input type="hidden"><input type="checkbox"><input type="radio"><input type="file"> —— 全都不支持,设了也无效

placeholder 不是 value,别混用

它只是视觉提示,用户一聚焦(focus)就消失,且不会随表单提交;而 value 是真实数据。常见错误:

  • placeholder 当默认值用,结果后端收不到初始内容
  • 用 JS 读 element.value 想拿到 placeholder 文本 —— 不行,它不在 value
  • 用 CSS 选 ::placeholder 时没加浏览器前缀,导致 Firefox 或 safari 不生效(要写成 ::-moz-placeholder::-webkit-input-placeholder

移动端和可访问性容易翻车的地方

android 原生浏览器、旧版 ios Safari 对 placeholder 的渲染有延迟或截断;更重要的是,它不是语义化标签,屏幕阅读器不一定朗读。所以:

立即学习前端免费学习笔记(深入)”;

  • 不能只靠 placeholder 说明字段用途,必须配 <label></label>(哪怕视觉隐藏)
  • 避免写“请输入邮箱”这种弱提示,换成“邮箱地址(如 name@example.com)”更实用
  • 在 iOS 上,如果 inputautocomplete="off",某些版本会连 placeholder 一起抑制显示

真正麻烦的不是怎么写 placeholder,而是它既不能替代 <label></label>,也不能当默认值用,还容易在小屏上被键盘顶飞或字体缩放后错位 —— 这些细节比语法本身更常导致线上问题。

text=ZqhQzanResources