<p>表单元素的 id 必须带语义前缀，如 txt-、rad-、chk- 等；name 属性需驼峰式且去前缀；label 的 for 必须严格匹配 id；fieldset/legend 结构不可省略以保障可访问性。</p>
表单元素的 id 必须带语义前缀
不加前缀的 id="username" 看似简洁，但和 JS 查询、CSS 定位、自动化测试都容易冲突。规范要求所有表单控件的 id 必须以类型为前缀，比如：txt-username、rad-gender-male、chk-terms、btn-submit。
-
txt-：用于<input type="text">、<textarea>、<input type="password">等文本类输入 -
rad-和chk-：分别对应单选（radio）和复选（checkbox），且需在后面补充具体值或含义，如rad-age-18-25 -
btn-：所有按钮，包括<button>、<input type="submit">、<input type="reset"> -
sel-：用于<select>，如sel-country -
hid-：隐藏域<input type="hidden">，如hid-csrf-token
漏掉前缀会导致 JS 里用 document.getElementById("email") 可能意外匹配到非表单元素（比如某个 div 的 id 也是 email），尤其在大型项目中极易出错。
name 属性必须用驼峰式且去掉前缀
name 是表单提交时真正发给后端的字段名，它和 id 不同源，不能直接复制 id 值。规范要求：先去掉 id 的前缀（如 txt-），再把连接符转为驼峰，首字母小写。
-
id="txt-first-name"→name="firstName" -
id="rad-user-type-premium"→name="userTypePremium"（注意不是userType，因为同一组 radio 需共用 name，value 区分选项） -
id="chk-accept-terms"→name="acceptTerms"
如果 name 写成 first-name 或 first_name，后端接收时可能解析失败（尤其 Node.js/Express 默认不支持连字符键名），PHP 的 $_POST 也只认字母数字下划线组合，连字符会变成语法错误。
立即学习“前端免费学习笔记（深入）”；
label 的 for 必须严格匹配 id 值
label 的 for 属性不是可选的装饰——它是可访问性的基础。点击 label 文本必须让对应输入框聚焦，否则屏幕阅读器无法关联描述与控件。
- 写法必须是
<label for="txt-email">邮箱</label><input id="txt-email" type="email"> - 不能写成
for="email"而实际id="txt-email"，这种错配会让 label 失效 - 不要用嵌套方式替代
for（如<label>邮箱<input></label>），虽然能工作，但对某些辅助技术兼容性差，且无法跨元素布局
很多团队用 CSS 隐藏了原生 input，改用伪元素模拟 checkbox/radio，这时更得确保 for 指向真实 input 的 id，否则键盘 Tab 导航会跳过该控件。
fieldset / legend 结构不能省略
当一组表单项逻辑相关（比如“收货地址”包含省市区街道），必须用 <fieldset> 包裹，用 <legend> 标明类别。这不是视觉美化需求，而是语义和可访问性硬性要求。
- 没有
fieldset，屏幕阅读器无法把多个控件归为一组，用户会听到一堆孤立字段，不知归属 -
legend文本会被读作“收货地址，姓名输入框”，而不是“姓名输入框”，上下文明确 - 禁用整组时，只需给
fieldset加disabled，内部所有控件自动失效；手动给每个 input 加 disabled 容易遗漏
常见错误是用 <div class="address-group"> 替代 fieldset —— 这样既无语义，也无法被辅助技术识别，还失去原生 disabled 传播能力。
