学校选课表单需兼顾教务逻辑、操作直觉与后台可解析性：必须用name属性（非id）标识字段，多选课统一用数组型name，下拉框设required，用<fieldset><legend>结构化分组，禁用display:none隐藏，启用HTML5原生校验，提交按钮带name/value区分动作，并强制设置accept-charset="UTF-8"防中文乱码。
学校网站的选课表单不能只靠 <form> 堆砌，得兼顾教务逻辑、学生操作直觉和后台可解析性——否则导出数据错行、漏课、重复提交，老师得手动核对半天。
表单必须带 name 且值语义清晰
很多学校页面用 id 当提交字段名，结果后端收不到数据。浏览器只按 name 发送表单值，id 仅用于 CSS/JS 定位。
-
<input type="checkbox" name="course_ids" value="CS101"> 计算机导论（多选课统一用数组型 name） -
<select name="semester" required>下拉必须设required防空提交 - 避免
name="input1"这类无意义命名，后端无法区分是课程还是年级
用 <fieldset> 分组课程类别，别只靠视觉分隔
纯 CSS 分栏或空行在屏幕阅读器和移动端容易误读，教务系统常需批量筛选“通识课”“专业必修”，结构化分组能直接映射到后端处理逻辑。
- 每个
<fieldset>配<legend>，例如<legend>2024 秋季通识选修课</legend> - 同一组内所有复选框共用
name="gened_courses"，方便 PHP/Python 按 key 批量取值 - 禁用
display: none隐藏整组——学生可能用键盘 Tab 跳过，导致漏选
提交前校验：用 required + min/max，别只靠 JS
前端 JS 校验可被绕过，但 HTML5 原生属性会被浏览器强制拦截，且兼容所有现代学校机房电脑（含旧版 Chrome/Firefox）。
立即学习“前端免费学习笔记（深入）”；
- 限定选课数量：
<input type="number" name="total_credits" min="12" max="24" required> - 时间冲突提示需后端校验，但前端可加
title="请勿重复选择同一时段课程"辅助理解 - 禁用
onsubmit="return false"全局拦截——会干掉原生校验，且无障碍访问失效
提交按钮必须带 name 和明确 value
不少学校表单用 <button>提交</button>，没设 name，结果后端收不到提交动作标识，无法区分“保存草稿”和“正式提交”。
<button type="submit" name="action" value="confirm">确认选课</button><button type="submit" name="action" value="draft">暂存草稿</button>- 避免用图片按钮或自定义样式覆盖
type="submit"，否则回车提交失效
最易被忽略的是 accept-charset="UTF-8" 属性——学生姓名、课程名含中文时，不加这句，PHP $_POST 可能收一堆乱码，且无法通过修改 .htaccess 补救，必须写死在 <form> 标签里。
