必须用<form method="POST" action="/api/leave/apply" enctype="multipart/form-data">，字段name为英文且唯一（如startDate），日期用type="date"+type="time"，请假类型用<select>配后端约定value，事由加required maxlength="500"，附件控件需带name="attachment"并匹配后端接收名。
怎么用纯 HTML + CSS 实现一个可用的 OA 请假申请表单
不能只写 <form> 就完事——实际部署时，表单必须能被后端识别、前端能校验、用户操作不迷路。核心是：字段语义正确、必填逻辑清晰、日期和类型有合理约束。
常见错误是把 type="text" 塞满所有输入框，结果日期输错格式、事由没长度限制、提交后后端收不到 leaveType 字段——因为没设 name 或用了中文名。
-
name属性必须为英文且唯一，例如name="startDate"，禁用name="开始日期" - 日期选型优先用
<input type="date">，它自带校验、唤起原生日历，比 JS 插件轻量且无障碍友好 - 请假类型用
<select>，每个<option>的value要对应后端约定值（如value="vacation"），别只靠显示文字 - 事由文本域必须加
required和maxlength="500"，防止空提交或超长内容炸掉后端字段
为什么 submit 按钮点了没反应？后端收不到数据
多数情况不是 JS 阻止了默认行为，而是表单根本没发出去——因为 <form> 缺少关键属性。
- 必须指定
method="POST"（OA 系统几乎不用 GET 提交敏感申请） -
action不能为空或写成action="#"，得是真实接口地址，例如action="/api/leave/apply" - 所有要提交的字段必须在
<form>内部，常见坑：把「附件上传」区域写在</form>外面 - 浏览器控制台看 Network → Headers，确认请求里有没有
Content-Type: application/x-www-form-urlencoded；如果没有，可能是被 JS 改写了enctype却没配对处理
datetime-local 在 Safari 和旧版 Edge 上不兼容怎么办
这个输入类型在 Safari 15.4 之前完全不支持，用户看到的是普通文本框，且无校验。不能赌用户都用新版 Chrome。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 方案一（推荐）：降级用
<input type="date">+<input type="time">两个字段，后端拼接为YYYY-MM-DDTHH:mm - 方案二：加一层轻量 JS 检测，
if (!('datetimeLocal' in document.createElement('input').attributes))，然后动态插入 polyfill 或提示 - 绝对不要用
type="text"+ placeholder="yyyy-mm-dd hh:mm" —— 用户可随意输入非法值，后端解析极易报错
附件上传怎么确保后端真能收到文件
纯 HTML 表单传文件，三个条件缺一不可，漏一个就变成传了个空字符串。
-
<form>必须带enctype="multipart/form-data"，否则文件内容不会编码进请求体 - 文件控件必须是
<input type="file" name="attachment" accept=".pdf,.doc,.docx" multiple>，name和后端约定一致 - 服务端需明确配置接收 multipart，比如 Express 要用
multer，Spring Boot 要开spring.servlet.multipart.enabled=true - 测试时用 Postman 模拟请求，对比浏览器发出的请求头里是否有
Content-Disposition: form-data; name="attachment"; filename="a.pdf"
表单看似简单，但字段命名、编码类型、浏览器兼容性这三处出错，基本就卡死整个流程。尤其 name 和 enctype，改错一个，后端连日志都收不到有效参数。
