必须用，字段name为英文且唯一（如startdate），日期用type="date"+type="time"，请假类型用配后端约定value，事由加required maxlength="500"，附件控件需带name="attachment"并匹配后端接收名。
怎么用纯 HTML + CSS 实现一个可用的 OA 请假申请表单
不能只写 <form></form> 就完事——实际部署时，表单必须能被后端识别、前端能校验、用户操作不迷路。核心是：字段语义正确、必填逻辑清晰、日期和类型有合理约束。
常见错误是把 type="text" 塞满所有输入框，结果日期输错格式、事由没长度限制、提交后后端收不到 leaveType 字段——因为没设 name 或用了中文名。
-
name属性必须为英文且唯一，例如name="startDate"，禁用name="开始日期" - 日期选型优先用
<input type="date">，它自带校验、唤起原生日历，比 JS 插件轻量且无障碍友好 - 请假类型用
<select></select>，每个<option></option>的value要对应后端约定值（如value="vacation"），别只靠显示文字 - 事由文本域必须加
required和maxlength="500"，防止空提交或超长内容炸掉后端字段
为什么 submit 按钮点了没反应？后端收不到数据
多数情况不是 JS 阻止了默认行为，而是表单根本没发出去——因为 <form></form> 缺少关键属性。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须指定
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。
- 方案一（推荐）：降级用
<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></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，改错一个，后端连日志都收不到有效参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
