应使用 fieldset 和 legend 替代表单中冗余 div，提升语义性与无障碍支持；label 必须真实绑定控件（嵌套或 for/id 匹配）；善用 input type、required、pattern 等原生校验；布局优先采用 grid/flex 而非媒体查询硬编码。
用 fieldset 和 legend 替代多余容器
很多人一写表单就习惯套 div，结果 DOM 层级深、语义弱、屏幕阅读器不友好。HTML5 原生的 fieldset 天然具备分组语义，配合 legend 就是视觉+逻辑双层标题。
-
fieldset自带外边距和浅灰边框，无需额外 CSS 重置（若需去除，用border: none） -
legend默认左对齐且加粗，用legend { margin-left: 0; }可微调位置 - 多个
fieldset嵌套不推荐；同级分组更利于键盘 Tab 导航顺序
<fieldset> <legend>联系信息</legend> <label>邮箱：<input type="email" name="email"></label> <label>电话：<input type="tel" name="phone"></label> </fieldset>
让 label 真正绑定控件，别只靠位置猜
“点标签文字能聚焦输入框”不是靠 CSS 样式实现的，而是靠 for 属性或嵌套结构。很多页面看似能点，实则没绑定，导致无障碍支持失败或移动端点击热区小。
- 优先用嵌套写法：
<label>姓名：<input name="name"></label>—— 简洁、可靠、无需 ID - 必须用
for时，确保值与input的id完全一致（区分大小写、不可含空格） - 避免
label包含多个控件（如多个 radio），此时应为每个控件单独配label
input 类型和属性直接替代 JS 校验逻辑
不用等表单提交再弹 alert，浏览器原生就能拦截无效输入。关键不是“能不能用”，而是“哪些属性真正起效”。
-
required：空值校验，但仅在提交时触发（非实时）；配合:invalid伪类可做样式反馈 -
type="email"/"url"/"number"：触发浏览器内置校验规则，但注意type="number"不阻止粘贴非数字字符 -
pattern配合title：例如<input pattern="[0-9]{6}" title="请输入6位数字">，错误提示由title决定 -
min/max对type="date"有效，但对type="text"无效
响应式布局别硬写媒体查询，先用 flex + grid 布局语义化容器
表单字段排列混乱，往往是因为强行用 float 或绝对定位压位置。HTML5 表单本身不提供布局能力，但现代 CSS 能和它配合得更自然。
立即学习“前端免费学习笔记（深入）”；
- 把
form设为display: grid，用grid-template-areas定义区域（如 "label input error"），比一堆div更易维护 -
label和input放同一网格项里，避免因换行错位（尤其小屏下） - 避免给
input设固定width: 100%后又加padding导致溢出——改用box-sizing: border-box
form {
display: grid;
gap: 0.5rem;
}
@media (min-width: 480px) {
form { grid-template-columns: 1fr 2fr; }
label { grid-column: 1; }
input, select { grid-column: 2; }
}
实际开发中，最容易被忽略的是 label 和控件之间的绑定关系是否真实生效，以及 type 和 pattern 在不同浏览器中的行为差异——比如 Safari 对 pattern 的提示时机就和其他浏览器不太一样。 
