表单提交前必须设置name属性，否则后端收不到数据；单选/复选框同组name相同，下拉框name写在select上；required和pattern仅前端校验，不可替代后端验证；日期控件需兼容旧版safari；fieldset/legend提升语义化与无障碍；提交按钮应显式声明type="submit"。
表单提交前必须设置 name 属性，否则后端收不到数据
浏览器只把带 name 的表单控件值发给服务器，id 或 class 不起作用。常见错误是只写 id="username" 却漏掉 name="username"，结果后端收到空值。
-
<input type="text" id="phone">→ 后端收不到phone -
<input type="text" name="phone" id="phone">→ 正常提交 - 单选/复选框必须设
name且同组用相同name，靠value区分选项 - 下拉框
<select name="department"></select>的name写在<select></select>上，不是<option></option>
required 和 pattern 能做基础校验，但不能替代后端验证
前端校验只是提升体验，用户禁用 JS 或直接发请求就能绕过。比如手机号正则 pattern="^1[3-9]\d{9}$" 只在浏览器弹提示，不阻止恶意提交。
-
required对空值拦截有效，但对空格字符串（如 " "）无效，需配合minlength="1"或 JS trim -
pattern中的正则不支持 flags（如g、i），只能写内联形式，例如邮箱用pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" - 日期控件
<input type="date">会自动格式化为YYYY-MM-DD，但旧版 Safari 不支持，需 fallback 到文本输入 + JS 校验
用 <fieldset></fieldset> 和 <legend></legend> 组织多组选项更易维护
信息登记表常含“是否同意条款”“兴趣标签”等逻辑分组，硬塞进一堆 <div> 会让结构松散、无障碍支持差。语义化分组能让屏幕阅读器正确播报，也方便 CSS 批量控制边距和边框。
<ul>
<li>
<code><fieldset></fieldset> 默认带边框，用 CSS 清除： fieldset { border: none; padding: 0; }
<legend></legend> 是必填子元素，不可省略；若视觉上要隐藏，用 visually-hidden 类而非 display: none
name="hobbies[]"（PHP 风格）或 name="hobbies"（其他后端靠多值解析），避免多个 name="hobby" 导致只传最后一个提交按钮别只写 <button>提交</button>，加 type="submit"
默认 <button></button> 在表单里行为是 submit，但显式声明更可靠。尤其当页面有多个表单或嵌套组件时，没写 type 的按钮可能意外触发表单提交，或者在某些框架中被拦截。
-
<button type="submit">确认登记</button>明确意图 -
<button type="button">重置</button>配合 JS 实现清空，避免<input type="reset">破坏已填内容 - 禁用状态用
disabled，但提交前建议用 JS 控制，因为disabled字段不会随表单提交，无法反映“按钮曾被点过”这类状态
inputmode="numeric" 还是 type="text"，要不要加 autocomplete="off" 防缓存泄露，这些细节往往调试半天才发现是策略问题，不是语法错。
