HTML原生表单验证需用required、type="email"/"date"等属性实现轻量校验，name属性必设以确保后端接收，enctype="multipart/form-data"不可缺，密码一致性须用setCustomValidity实时提示。
直接用 HTML + 表单元素就能搭出个人信息编辑页面，不需要框架也能跑起来；但真要“可用”，必须补上 required、type 校验、name 命名规范，否则提交后后端根本收不到字段。
怎么写一个带校验的姓名/邮箱/生日输入框
浏览器原生表单验证比 JS 手动判断更轻量、更可访问。关键不是“能不能输”，而是“输错时有没有反馈”：
-
name必须设（否则 POST/GET 里没有这个键），比如name="email"，别用id代替 - 邮箱用
<input type="email" required>，Chrome 会自动提示格式错误，且移动端弹出对应键盘 - 生日优先用
<input type="date">，避免手动输 “2025-01-01” 或 “01/01/2025” 引发解析歧义 - 手机号别只靠
type="tel"—— 它不校验格式，得加pattern，比如pattern="[0-9]{11}"（国内）
上传头像为什么 <input type="file"> 提交不了图片
常见问题：点了上传、选了图、点提交，后端 request.files 是空的。原因几乎总是表单缺了 enctype：
- 必须写
<form enctype="multipart/form-data">，默认的application/x-www-form-urlencoded会把文件转成字符串丢弃 -
<input type="file" name="avatar">的name要和后端接收字段一致（如 Flask 用request.files.get("avatar")） - 不要用
value设置初始文件路径（浏览器禁止，会报错或被忽略）
密码修改字段怎么防“输两次但不一样”
纯前端对比不能替代后端校验，但能立刻拦截明显错误：
立即学习“前端免费学习笔记（深入）”；
- 两个
<input type="password">，分别设name="password"和name="password_confirm" - 用
oninput监听第二个框，实时比对值：if (this.value !== passwordInput.value) { this.setCustomValidity('两次输入不一致'); } - 注意：别用
onchange（失焦才触发），用户可能输完直接点提交，没失焦就跳过了 - 后端仍需独立验证，因为前端逻辑可被绕过
最易忽略的是 name 属性缺失和表单 enctype 配置 —— 这俩错一个，整个表单就“静默失效”。调试时先看 Network 里的 Payload，确认字段名和结构是否符合后端预期，比反复改 JS 逻辑快得多。
