html表单的优劣取决于语义结构、可访问性、dom可控性等底层设计，而非外观；需确保正确使用form、label、name，优先用formdata获取数据，submit事件监听须绑定在form上并前置prEventdefault。
HTML 表单没有内置的“比较设计”功能，所谓“表单设计比较”，本质是比实现方式、语义结构、可访问性、提交行为和 DOM 可控性——不是比外观，而是比底层是否经得起用。
怎么判断两个表单在 DOM 和语义上谁更合理
浏览器不关心你用 <div> 还是 <code><form></form> 包着输入框，但屏幕阅读器、自动填充、原生验证、submit 事件触发逻辑全依赖正确的语义结构。
实操建议：
- 用浏览器开发者工具检查：每个
<input>是否有明确的name属性（否则后端收不到） - 是否有
label元素且通过for或嵌套关联到对应input（没它，视障用户无法聚焦） - 表单是否包裹在
<form></form>标签内，并设置了method和action（哪怕只是action="#"） - 有没有滥用
div+onclick模拟提交——这会让Enter键失效，且无法被form.addEventListener("submit", ...)捕获
为什么用 FormData 比遍历 queryselectorAll("input") 更可靠
手动收集表单值容易漏掉禁用字段、复选框未勾选状态、<select multiple></select> 的多选值，还绕过了浏览器对空值、类型转换的默认处理。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 始终优先用
new FormData(formElement)构造数据，它自动过滤disabled，正确处理checkbox/radio的选中逻辑 - 不要用
formElement.elements自己遍历——它包含button、fieldset等非数据字段，且对name="user[email]"这类带方括号的键名不做解析 - 如果需序列化为 jsON，再用
Object.fromEntries(new FormData(form))，但注意：文件字段会丢失（FormData存的是Blob，不是字符串）
event.preventDefault() 放错位置会导致表单“看起来能提交，实际没反应”
常见错误是监听了 click 在按钮上，却忘了表单真正的提交入口是 submit 事件；或者在异步操作（如调用 fetch）前没阻止默认行为，导致页面跳转或刷新，请求直接被中断。
实操建议：
- 事件监听必须绑定在
<form></form>上，用form.addEventListener("submit", e => { e.preventDefault(); ... }) - 不要绑定在按钮的
click上——用户按Enter触发提交时，这个监听根本不会执行 -
e.preventDefault()必须放在异步操作之前，哪怕只有一行fetch调用，漏了它，表单就立即提交并刷新 - 验证失败时，别只弹
alert就完事；要聚焦第一个错误字段，并用input.reportValidity()触发原生提示
真正难的不是写一个能“跑起来”的表单，而是让每个字段在键盘导航下可用、在无 JS 时仍能提交、在屏幕阅读器里读得清、在各种网络条件下不丢数据——这些细节藏在 label 的 for 值里，在 form 的 novalidate 属性取舍里，在 FormData 和手动拼接的边界上。