placeholder仅是视觉提示，不参与结构引导；真正起结构引导作用的是label（需显式绑定）、fieldset+legend分组及语义化dom顺序，滥用placeholder会破坏可访问性。
placeholder 不能提升结构引导性，它只负责视觉提示；真正起结构引导作用的是 label、fieldset、legend 和语义化顺序——把 placeholder 当成“结构引导”用，反而会破坏可访问性和表单逻辑。
placeholder 的真实定位：纯视觉辅助，非语义组件
它不参与 DOM 结构绑定，不建立输入控件与描述文本之间的归属关系。屏幕阅读器可能读出 placeholder 文字，但不会说明“这是邮箱字段的提示”，更不会关联到 required 或错误消息。
- 常见错误现象：
<input type="email" placeholder="请输入邮箱">—— 没有label，视障用户无法知道这个框要填什么、是否必填 - 使用场景：仅适用于「用户已理解字段用途，只需轻量格式参考」，比如搜索框、临时筛选输入
- 性能影响为零，但滥用会导致表单在高对比模式、缩放 200%、或旧版 Safari 下完全丢失提示
真正提升结构引导性的三要素
结构引导靠的是 HTML 语义层级和显式关联，不是灰色小字。
-
label必须存在，且通过for/id显式绑定（或包裹方式），确保焦点进入时播报完整上下文 -
fieldset+legend对分组字段建立逻辑容器，例如“收货地址”“账单信息”——浏览器和读屏软件据此构建导航树 - 表单控件按业务流程线性排列，避免用 CSS
float或position: absolute打乱 DOM 顺序，否则键盘 Tab 流会错乱
placeholder 可以怎么配合结构，而不是替代它
它只能作为 label 的补充，且内容必须克制。
- 示例正确写法：
<label for="phone">手机号</label><input type="tel" id="phone" placeholder="138-XXXX-XXXX">——label定义字段身份，placeholder仅提供格式样例 - 禁止写法：
placeholder="手机号（必填）"或placeholder="请输入6~12位密码"—— 规则类信息必须由title、pattern、实时校验或错误消息承载 - 移动端注意：iOS Safari 在软键盘弹出时可能隐藏
placeholder，所以依赖它做唯一提示等于没提示
最容易被忽略的点是：placeholder 不是“省掉 label 的捷径”，而是“加在 label 已存在前提下的锦上添花”。一旦结构语义没立住，再漂亮的占位符也只是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
