### [HTML placeholder 属性：给表单输入框添加提示文字](https://www.huociguo.com/article/1448)

**Published:** 2026-09-27T03:26:38

**Author:** 米了

**Excerpt:** 给输入框加提示文字，最直接的就是用 属性。它支持 、 、 、 、 这些类型，但 不行——部分旧浏览器会直接忽略…

给输入框加提示文字，最直接的就是用 `placeholder` 属性。它支持 `text`、`email`、`search`、`tel`、`url` 这些类型，但 `password` 不行——部分旧浏览器会直接忽略。另外提示文字不能换行，也不能塞 HTML 标签进去。

![](https://api.huociguo.com/wp-content/uploads/2026/09/20260927112557179-2703a77213-1.png "20260927112557179-2703a77213-1")

HTML placeholder 属性

## 别把提示写成 value

有人图省事把提示文字写在 `value` 里，结果一刷新页面就成了默认值，提交时还可能被一并带走。这不是提示，是脏数据。正确做法就是老老实实写 `placeholder`：

```html
<input type="text" placeholder="请输入用户名">
```

## placeholder 颜色太浅，怎么改？  

浏览器默认的 placeholder 是浅灰色，有些设计稿要求更暗或者带品牌色，这时候得用 CSS 伪元素覆盖。不同浏览器前缀不一样，漏掉哪个都可能不生效：

```css
input::placeholder { color: #666; font-size: 14px; }
input::-moz-placeholder { color: #666; }
input::-webkit-input-placeholder { color: #666; }
```

Chrome/Edge/Opera 用 `::placeholder`，Firefox 用 `::-moz-placeholder`，Safari 新版已经统一，但 iOS Safari 旧版本还得测。

## 需要一直显示的提示，用 label 还是 title？  

`title` 那个是鼠标悬停才出来的 tooltip，根本不是表单提示的正经方案。正解是 `<label>`，配合 `for` 和 `id` 关联输入框，语义化、可访问性都没问题，而且点击 label 还能聚焦到输入框。

```html
<label for="user">用户名</label>
<input type="text" id="user" name="user">
```

也可以把 input 直接包在 label 里，省掉 id/for，不过复杂布局的时候这么干不太灵活。千万别只靠视觉位置对齐——屏幕阅读器靠的是 label 关联，没有的话视障用户根本不知道这输入框是干嘛的。

## iOS Safari 里 placeholder 不显示？  

老版本 iOS Safari（尤其是 12 之前）有个渲染 bug：输入框设了 `padding` 或 `line-height` 之后，placeholder 文字会偏移、截断，甚至完全不显示。

优先用 `padding` 控制内边距，别用 `height` + `line-height` 去撑高输入框。如果用了 flex 或者绝对定位，检查一下是不是不小心把 placeholder 区域给盖住了。真碰上兼容问题，可以用 JS 做个兜底，但别拿它替代原生 placeholder。

## 多语言场景下的麻烦  

真正麻烦的是多语言切换——placeholder 不会跟着 locale 自动变，得靠 JS 动态改属性值。这种时候，用 label 反而比 placeholder 更可控，至少文案管理更集中。

**Categories:** HTML5

---