html5新增的placeholder属性主要用于为输入框提供占位提示文本，当用户没有输入内容时，提示文本会显示在输入框内部，用户点击输入框开始输入后，提示文本会自动消失，这种设计能有效减少表单的额外说明文字，提升页面的简洁性。
placeholder属性的基本语法
placeholder属性是html5中为表单输入框新增的原生属性，不需要依赖任何JavaScript代码就可以实现提示文本效果，它的基本使用方式非常简单，直接添加到对应的输入框标签上即可。
支持placeholder属性的常见表单元素包括<input>和<textarea>，基本语法结构如下：
<!-- input输入框使用placeholder --> <input type="text" placeholder="请输入用户名"> <!-- textarea文本域使用placeholder --> <textarea placeholder="请输入个人简介，不超过200字"></textarea>
不同输入框类型的placeholder使用示例
placeholder属性可以适配多种类型的<input>输入框，不同输入框的提示文本可以根据场景自定义，以下是常见类型的示例：
<form> <!-- 文本输入框提示 --> <p>用户名：<input type="text" placeholder="请输入4-16位字母或数字"></p> <!-- 密码输入框提示 --> <p>密码：<input type="password" placeholder="请输入包含大小写字母和数字的密码"></p> <!-- 邮箱输入框提示 --> <p>邮箱：<input type="email" placeholder="例如：user@ipipp.com"></p> <!-- 手机号输入框提示 --> <p>手机号：<input type="tel" placeholder="请输入11位手机号码"></p> <!-- 日期输入框提示 --> <p>出生日期：<input type="date" placeholder="请选择出生日期"></p> <!-- 文本域提示 --> <p>反馈内容：<textarea rows="4" cols="50" placeholder="请输入您的反馈意见"></textarea></p> </form>
placeholder属性的核心特性
- 提示文本仅在输入框无内容且未获得焦点时显示，用户点击输入框输入内容后，提示文本会自动隐藏
- 提示文本不会被提交到后端，它只是前端的展示性内容，不会作为表单的value值传递
- placeholder是html5原生属性，主流现代浏览器都支持，不需要额外引入JavaScript库
- 当输入框获得焦点但未输入内容时，提示文本仍然会显示，只有开始输入内容后才会消失
修改placeholder的默认样式
不同浏览器下placeholder的默认样式略有差异，通常是浅灰色的文本，如果需要自定义提示文本的样式，可以使用伪元素选择器来修改，不同浏览器内核的写法略有不同：
/* 通用写法，适配大部分现代浏览器 */
input::placeholder, textarea::placeholder {
color: #999; /* 提示文本颜色 */
font-size: 14px; /* 提示文本字号 */
font-style: italic; /* 提示文本斜体 */
}
/* 兼容webkit内核浏览器（Chrome、Safari等） */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #999;
font-size: 14px;
}
/* 兼容firefox 4-18版本 */
input:-moz-placeholder, textarea:-moz-placeholder {
color: #999;
font-size: 14px;
}
/* 兼容firefox 19+版本 */
input::-moz-placeholder, textarea::-moz-placeholder {
color: #999;
font-size: 14px;
opacity: 1; /* firefox默认placeholder有透明度，这里重置为不透明 */
}
/* 兼容IE10+ */
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #999;
font-size: 14px;
}
placeholder和value属性的区别
很多新手会混淆placeholder和value的用法，两者的核心区别如下：
| 对比项 | placeholder | value |
|---|---|---|
| 作用 | 仅作为输入框的提示文本，不参与表单提交 | 作为输入框的默认值，会随表单一起提交到后端 |
| 显示效果 | 浅色文本，输入内容后自动消失 | 正常文本颜色，需要手动修改或删除 |
| 提交行为 | 不会被提交到后端 | 会作为表单数据的一部分提交 |
使用placeholder的注意事项
- placeholder的提示文本不要包含太长的描述性内容，尽量简洁明了，避免超出输入框宽度导致显示不全
- 不要将重要的说明信息只放在placeholder中，因为提示文本在用户输入后会消失，用户可能无法再看到提示内容，重要说明建议放在输入框旁边
- placeholder属性不支持换行，如果需要多行提示，建议使用其他元素配合实现，或者使用title属性作为补充提示
- 对于日期、颜色等特定类型的输入框，部分浏览器可能不会显示placeholder内容，这是浏览器的原生限制，需要提前测试兼容性
完整示例代码
以下是一个包含多种输入框和自定义placeholder样式的完整表单示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>placeholder使用示例</title>
<style>
.form-item {
margin: 15px 0;
}
input, textarea {
padding: 8px;
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* 自定义placeholder样式 */
input::placeholder, textarea::placeholder {
color: #666;
font-size: 13px;
}
</style>
</head>
<body>
<form>
<div class="form-item">
<label>用户名：</label>
<input type="text" placeholder="请输入登录用户名">
</div>
<div class="form-item">
<label>邮箱：</label>
<input type="email" placeholder="例如：test@ipipp.com">
</div>
<div class="form-item">
<label>个人简介：</label>
<textarea rows="3" placeholder="简单介绍一下你自己吧"></textarea>
</div>
<div class="form-item">
<input type="submit" value="提交">
</div>
</form>
</body>
</html>
html5placeholder表单输入框修改时间：2026-06-29 02:15:23