label 标签本身不提供输入提示功能，其作用仅为通过 for/id 关联聚焦表单控件；真正实现邮箱提示的是 input 的 type="email" 和 placeholder 属性，配合语义化 label 提升可访问性。
label 标签本身不提供输入提示功能
label 的作用是关联表单控件（比如 input），点击它可聚焦对应输入框，但它不会显示 placeholder 文字、也不触发邮箱格式校验或自动补全。所谓“邮箱地址输入提示”，实际依赖的是 input 元素自身的属性和浏览器行为，label 只负责语义绑定和可访问性支撑。
用 placeholder 和 type="email" 实现基础提示
真正起提示作用的是 input 的两个属性：
-
placeholder="请输入邮箱"：在输入框为空时显示灰色提示文字，用户开始输入即消失 -
type="email"：触发浏览器原生邮箱格式校验（提交时检测是否含@和域名结构），部分移动设备还会调出带@键的软键盘
配合 label 的正确写法是：
<label for="email">邮箱地址</label> <input type="email" id="email" placeholder="name@example.com">
注意：for 属性必须与 input 的 id 完全一致，否则点击 label 不会聚焦输入框。
立即学习“前端免费学习笔记（深入）”；
避免常见错误：别把提示文字塞进 label 里当 placeholder
以下写法看似有提示，但实际效果差：
<label for="email">邮箱地址（如：user@domain.com）</label> <input type="text" id="email">
- 提示文字始终可见，遮挡用户输入内容
- 没启用邮箱类型校验，
type="text"允许任意字符，连空格都可通过 - 移动端无法唤起邮箱专用键盘
- 屏幕阅读器会把整段提示读作标签名，语义混乱
更进一步的提示可以靠 CSS + ::placeholder 微调
如果想让 placeholder 更轻、更符合设计规范，可用 CSS 控制：
input[type="email"]::placeholder {
color: #999;
font-size: 14px;
}
注意点：
-
::placeholder是伪元素，不是所有老浏览器都支持（IE 不支持，需加::-ms-input-placeholder兼容） - 不要给 placeholder 设
opacity: 0.5这类影响可读性的值，WCAG 要求对比度 ≥ 4.5:1 - 别用 JavaScript 动态插入 placeholder 文字——既增加复杂度，又破坏原生行为和可访问性
真正的邮箱输入提示，是浏览器、input 类型、placeholder 属性和 label 语义共同作用的结果，label 本身只是那个“点一下就跳进去”的门把手，不是提示内容的容器。
