能用但不推荐：table语义错位、无障碍差、响应式难；推荐grid布局，5行CSS即可实现对齐、间距、断点；fieldset/legend提升可访问性；label绑定失效需查id一致、动态插入、type限制。

用 table 做表单布局，现在还行不行？

能用，但不推荐。很多老项目、内部管理页还在用 table 对齐表单项，因为写起来快、视觉整齐、兼容性极好（IE8 都稳）。但它本质是表格语义，用来做表单属于“语义错位”，对屏幕阅读器不友好，响应式也难处理——colspan 和 rowspan 一加，移动端基本就乱套。

如果你必须用 table（比如要快速交付给不支持 Flex 的旧系统），注意三点：

• table 外层别设 width="100%"，改用固定宽度（如 width="600"）+ align="center"，避免在小屏上横向溢出
• 每行用 包一组标签+控件， 放提示文字（语义正确且默认加粗居中）， 放 input/select 等控件
• 禁用 cellspacing="2" 这类像素级控制，统一用 cellpadding="10" + CSS border-collapse: collapse 更可控

div + CSS 实现对齐，关键不是 float 而是 display: grid

现代做法首选 display: grid，5 行 CSS 就能搞定左右对齐、间距一致、响应式断点。比用 float 或 inline-block 少踩 90% 的坑。

示例结构：

用户名
邮箱

对应 CSS：

.form-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: center;
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

注意：grid-template-columns: 120px 1fr 比用 width + float 可靠得多——不会因内容撑开、换行错位；gap 替代 margin，父子无塌陷；移动端直接切单列，不用重写结构。


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载

fieldset 和 legend 不只是装饰，是可访问性刚需

很多人把 fieldset 当成“加个边框分组”的样式工具，其实它在无障碍场景下起关键作用：屏幕阅读器会把 legend 作为该组所有控件的共同描述前缀。比如读到“个人基本信息：用户名”，而不是孤立的“用户名”。

实操要点：

• 每个逻辑分组（如“登录信息”“收货地址”）都应包一层 fieldset，哪怕只有一两个字段
• legend 必须是 fieldset 的第一个子元素，且不能用 display: none 隐藏——可用 clip-path 或负 margin 视觉隐藏，保留可读性
• 不要嵌套 fieldset，W3C 明确不鼓励；多级分组改用标题（h3）+ aria-labelledby

label 的 for 属性失效？先查这三件事

点击 label 文字没聚焦 input，大概率不是代码写错，而是这几个低级但高频的问题：

• for 值和 input 的 id **严格字符一致**（区分大小写、空格、连字符），比如 for="user-name" 对应 id="user_name" 就无效
• input 是动态插入的（如 JS 渲染），但 label 在 HTML 中已存在——此时 for 绑定失败，得用 JS 手动 label.control = inputEl
• 用了 type="hidden" 或 type="submit" ——这些类型不支持 label 关联，浏览器直接忽略 for

最省事的兜底方案：把 input 直接写进 label 里，不用 for，天然绑定且无需 ID：

<label>同意协议 <input type="checkbox" name="agree"></label>

表单布局真正的复杂点不在对齐，而在「不同设备下控件尺寸是否一致」「焦点状态是否清晰可见」「错误提示能否被读屏器捕获」——这些没法靠一套 grid 模板解决，得逐项测试。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！