用<form action="/enroll" method="POST">搭建报名表单，确保每项输入有name属性（如name="student_name"）、必填项加required、提交按钮为<button type="submit">，多选用同name多value，隐藏字段用<input type="hidden">，注意enctype匹配（文件上传需multipart/form-data）。
怎么用 <form> 搭出能提交的报名表单
HTML 表单本身不“创建”报名逻辑，只负责收集和发送数据。关键在结构是否让后端（或 JS）能准确拿到 name 和值。别一上来就套 CSS 或加动画，先确保字段语义正确、必填项有 required、提交按钮是 <button type="submit">。
常见错误：用 <div> 模拟表单、把 <input> 写成 <input />（XHTML 风格，在 HTML5 中无效）、漏掉 name 属性——没 name 的字段根本不会被提交。
-
<form action="/enroll" method="POST">是底线，action必须指向真实接收地址，本地测试时可先设为action="#"观察控制台提交行为 - 每个输入控件必须带
name，比如姓名用name="student_name"，邮箱用name="email"，别用中文或空格 - 下拉选择课程用
<select name="course_id">，选项用<option value="py101">Python 入门</option>，value要简洁可读，别写“课程一”这种模糊值
为什么 type="email" 和 required 不能代替后端校验
浏览器内置校验（比如输错邮箱格式会弹提示）只是用户体验层，关掉 JS 或用 curl 提交，这些限制全失效。它唯一作用是减少明显输错的提交次数，降低后端压力。
真正要拦住无效报名，得靠后端检查 email 格式、查重、验证课程 ID 是否存在。前端只是第一道筛子，不是保险柜。
立即学习“前端免费学习笔记（深入）”；
-
type="email"会触发手机键盘的 @ 符号快捷键，但正则宽松（如a@b也过），不能当合规依据 -
required只管字段非空，不管内容合理性——比如手机号填成 “123” 也能过 - 如果用
pattern做手机号校验，注意正则写法：pattern="^1[3-9]\d{9}$"，且要配title提示用户格式（否则报错信息是英文）
报名表单里怎么处理多选课程或复选协议
多选场景本质是同一 name 对应多个值，后端收到的是数组（如 PHP 的 $_POST['courses'] 是数组，Node.js 的 req.body.courses 默认是字符串，需中间件解析）。
别用多个不同 name（如 course1、course2），那样后端要写一堆判断；也别用 <input type="checkbox"> 却不设 value——没 value 的 checkbox 提交时值默认是 "on"，毫无业务意义。
- 多选课程：所有 checkbox 共享
name="courses"，每个设明确value，如value="ds201"、value="ml101" - 同意协议：单个 checkbox，
name="agree_tos"，value="1"，配合required强制勾选（注意：部分浏览器对 checkbox 的required支持不一致，稳妥起见建议 JS 辅助校验） - 隐藏字段传固定值（如来源渠道）：用
<input type="hidden" name="source" value="wechat">，别手写进 URL 或 JS 变量里
表单提交后页面卡住或 404 是什么情况
最常踩的坑是 action 路径写错，或后端路由没配好。比如表单写了 action="/api/enroll"，但后端只监听 /enroll，就会 404；或者用了 method="POST" 却没在后端开 POST 接口，返回 405。
另一个隐形问题是 enctype。普通文本表单不用管，但一旦加了文件上传（比如交证件照），就必须写 enctype="multipart/form-data"，否则后端收不到文件，甚至整个请求体都解析失败。
- 调试时打开浏览器开发者工具 → Network 标签页，点提交，看发出的请求 URL、Method、Status 是不是预期值
- 如果页面跳转到空白页或显示原始 HTML，大概率是后端返回了 200 但内容不是 HTML（比如返回 JSON 却没设
Content-Type: text/html） - 本地开发时，用
curl -X POST http://localhost:3000/enroll -d "student_name=张三&email=zhang@example.com"手动模拟，能快速排除前端结构问题
