表单必须设置name属性才能提交数据，id/class无效；按钮、复选框、单选框均需正确使用name；优先用type和required做原生校验；method应为post且action指向有效后端地址；必须用语义化标签如label、fieldset提升可访问性。
表单必须包含 name 属性才能提交数据
浏览器只把带 name 的表单控件值发给服务器，id 或 class 不起作用。漏写 name 是新手最常踩的坑——看着表单能填、能点提交，但后端收不到任何字段。
实操建议：
-
<input type="text" name="email">比<input type="text" id="email">有效得多 - 按钮也要加
name（比如<button type="submit" name="action" value="send">），方便后端区分操作意图 - 复选框和单选框的
name必须相同（如name="preference"），否则无法组成一组选项
用 required 和 type 做基础校验，别全靠 JS
原生 HTML 校验轻量、即时、无需额外代码，且兼容所有现代浏览器。依赖 JS 校验容易被禁用或绕过，还可能延迟反馈。
常见组合示例：
立即学习“前端免费学习笔记（深入）”；
- 邮箱字段：
<input type="email" name="email" required>—— 自动验证格式，点击提交时弹提示 - 数字范围：
<input type="number" name="age" min="18" max="120"> - 必填多行文本：
<textarea name="message" required></textarea> - 避免用
type="text"伪装邮箱或数字，失去原生校验和手机键盘适配
method="post" 和 action 指向真实接收地址
表单默认是 GET，会把数据拼在 URL 后，既不安全也不适合传长文本。反馈表单一律用 POST；action 必须指向一个能处理请求的后端路径（如 /api/feedback），空字符串或 # 只会刷新当前页，什么都不会发生。
注意点：
- 本地开发时，
action不能写成file:///...或相对路径如handler.php（除非你真有这个文件并已配置 Web 服务器） - 测试阶段可先指向一个在线调试地址（如
https://httpbin.org/post），用浏览器开发者工具看 Network 标签确认数据是否发出 - 如果用前端框架（如 Vue/React），仍需保留
<form>结构和action，否则原生提交行为失效
语义化标签提升可访问性和 SEO
不用 <div> 堆砌表单，用 <fieldset>、<legend>、<label for="xxx"> 让屏幕阅读器和搜索引擎理解结构。
关键写法：
- 每个输入控件必须有对应
<label>，且for值与控件id一致（<label for="msg">留言</label><textarea id="msg" name="message"></textarea>） - 多个关联选项（如“偏好类型”）包在
<fieldset>里，用<legend>做组标题 - 错误提示不要仅靠颜色（如红字），加
aria-live="polite"或放在<label>附近，确保读屏软件能播报
简洁不是删减语义，而是去掉冗余 class、无意义 div 和 JavaScript 初始化代码。真正的简洁表单，HTML 本身就能跑通、可访问、可提交。
