纯HTML搭建OA报销表单需满足后端接收、语义化、必填约束及防错：金额用<input type="number">，日期用<input type="date">，费用类型用<select>，所有字段加name属性，必填项加required，<form>必须含action，按钮设type="submit"，移动端加viewport和16px字体防跳位。
怎么用纯 HTML 搭出可用的 OA 报销申请表单
不能只写 <form> 就完事——真实 OA 场景下，表单必须能被后端接收、字段要带语义、必填项要有约束、金额和日期还得防输错。纯 HTML 是骨架，但骨架得按业务规则来搭。
- 用
<input type="number">管金额，比text更可靠（会自动过滤非数字输入，且移动端唤起数字键盘） - 日期必须用
<input type="date">，别用text+ placeholder 模拟，否则无法校验格式，也难做范围限制（比如“不能填未来日期”） - 费用类型这类固定选项，优先用
<select>而非<input type="text">，避免用户乱填“差旅费”“差旅”“出差费”等不一致值 - 所有必填字段必须加
required属性，否则浏览器不会触发原生校验，用户点提交可能直接发空数据
哪些字段必须加 name 属性才能被后端收到
HTML 表单提交时，只有带 name 的控件才会把值发出去。id 或 class 再漂亮也没用。常见漏掉 name 的地方：
-
<textarea>容易只写id="remark"，忘了加name="remark" -
<input type="file">上传凭证时，没设name="receipts"，后端收不到文件字段 - 多个同类型复选框（如“是否含税”“是否垫付”），每个都得有
name，且建议统一为name="flags"这样，后端好批量解析 - 隐藏域（如当前申请人 ID）必须写
<input type="hidden" name="user_id" value="12345">，否则后端无法关联操作人
为什么 submit 按钮点不动或没反应
不是 JS 问题，大概率是表单结构或属性错了。常见卡点：
- 整个
<form>缺少action属性（哪怕只是action="#"），部分老浏览器会拒绝提交 - 用了
<button>但没写type="submit"，默认是type="button"，点一下啥也不干 - 某个
<input>的name值为空字符串（name=""），某些后端框架（如 Spring Boot）会直接拒收整个请求 - 金额字段用了
type="number"却写了value="0.00"，而用户没改过——有些浏览器认为这是“未交互”，导致required校验失败
如何让表单在手机上不缩放、输入框不跳位
OA 页面经常在钉钉/企业微信内嵌打开，WebView 对表单渲染很敏感。关键控制点：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>加 viewport：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 给
<input>和<select>加style="font-size: 16px;"——iOS Safari 会因字体太小自动放大整个区域，导致页面跳动 - 避免给
<form>设width: 100vw，容易触发横向滚动条，反而让输入框失焦 - 上传按钮用
<label>包裹<input type="file">，而不是直接操作 input，否则 iOS 下点不动
真正上线的 OA 报销页，往往要在 input 上加 pattern 限制金额小数位（比如 pattern="^\d+(\.\d{1,2})?$"），还要监听 blur 做实时格式化。这些已超出纯 HTML 范围——但至少，先确保表单结构不丢数据、不卡交互、不崩在手机上。
