表单必须用包裹且method="post"，action指向后端接口；上传文件需enctype="multipart/form-data"；name属性须英文小写+下划线；多选用name="xxx[]"；提交按钮需JS控制禁用与状态。
表单必须用 <form></form> 包裹，且 method="post" 才能提交到后端
很多初学者直接把 <input> 堆在页面里，点“提交”没反应——根本原因是缺了 <form></form> 标签，或者用了默认的 get 方法，导致数据拼在 URL 后、长度受限、中文乱码、服务端收不到。
实操建议：
-
<form action="/api/volunteer" method="post"></form>是最低可用配置，action指向你后端接收接口地址 - 别漏加
enctype="multipart/form-data"——如果要上传证件照或证明材料，否则<input type="file">传空 - 加
novalidate属性先关掉浏览器原生校验，自己用 JS 控制提示逻辑更可控
required 和 pattern 能覆盖 80% 基础校验，但别全靠它们
比如手机号必须填、格式得是 11 位数字，写成 <input name="phone" required pattern="^1[3-9]\d{9}$"> 看似简洁，实际会出问题：iOS Safari 对 pattern 支持弱，输入法自动补全可能绕过校验，而且错误提示文案无法自定义。
实操建议：
- 保留
required防空提交，它兼容性好、语义清晰 -
pattern仅用于简单格式（如邮箱、日期），复杂逻辑（如身份证号校验）必须用 JS 在submit事件里做 - 给每个必填项加
aria-required="true"，方便读屏软件识别
志愿者信息字段设计要区分「采集」和「展示」，别把 name 写成中文或空格
后端解析表单时，靠的是 name 属性值做键名。如果写成 <input name="姓名"> 或 <input name="volunteer name">，PHP/Python/Node.js 全都会报错或丢数据。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
实操建议：
- 统一用英文小写 + 下划线：
name="full_name"、name="emergency_contact_phone" - 多选志愿方向别用多个
name="interest"，改用name="interests"+type="checkbox"，后端才能收到数组 - 服务时间段若用
<select multiple></select>，确保name以[]结尾（如name="available_days[]"），否则 PHP 只取第一个选项
提交按钮禁用 + 加载态必须用 JS 控制，不能只靠 disabled 属性硬写死
用户手快连点两次，就可能发两份重复报名数据。光在 HTML 里写 <button disabled>提交中</button> 不够——刷新页面后按钮又可点了，而且没考虑网络失败后的恢复逻辑。
实操建议：
- 监听
form.submit，立刻button.disabled = true，同时改文案为「提交中…」 - 用
fetch()发请求，成功后跳转或弹提示；失败则button.disabled = false并还原文案 - 加个
data-sent="false"到<form></form>上，防止 submit 事件被多次触发（判断为true就 return）
表单字段越多，越容易忽略后端对字段长度、类型、枚举值的约束。前端校验只是第一道门，真正卡住数据质量的，是后端是否严格检查 full_name 是否超 50 字、age 是否在 16–70 之间、service_type 是否属于预设列表——这些 HTML 做不了，也别试图用 JS 模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
