form 的 action 必须是有效 url，否则导致 404/500 错误；method 必须显式设为 post 以保障安全；含文件上传时才需设置 enctype="multipart/form-data"。
form 标签的 action 属性必须是有效 URL，不能留空或写错路径
浏览器提交表单时，action 值决定数据发往哪里。如果写成 action=""、action="submit.php" 但当前目录下根本没有这个文件，或者误写为 action="/contact/submit" 却没配好后端路由，结果就是表单看似提交了，实际请求 404 或 500，前端完全无报错提示。
常见错误现象：Failed to load resource: the server responded with a status of 404 (Not Found) 出现在浏览器开发者工具 Network 面板中；点击提交后页面刷新但没跳转、也没收到邮件或数据库记录。
- 本地开发时，优先用绝对路径如
action="/api/contact"（配合本地代理），或明确的相对路径如action="./handler.php"（注意开头的./） - 上线后务必确认后端接口地址与
action一致，比如 Nginx 反向代理把/api/转发到 Node.js 服务，那action就不能写成http://localhost:3000/contact - 如果后端是纯静态托管（如 GitHub Pages、Vercel static），
action无法直接指向 PHP/Python 脚本——此时必须换用第三方表单服务（如 Formspree、Formcarry），并按其文档填action值，例如action="https://formspree.io/f/your-unique-id"
method 属性不写默认是 GET，但联系表单必须显式设为 POST
method 不声明时浏览器按 GET 发送，会导致用户填写的内容（姓名、邮箱、消息）全部拼在 URL 后面，既不安全，又容易被截断（URL 长度限制约 2000 字符），还可能被缓存或记录在服务器日志里。
使用场景：所有含文本域（<textarea></textarea>）、敏感字段（如邮箱）、内容长度不可控的联系表单，都必须用 POST。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 显式写
method="post"，不要依赖默认值 - 后端接收时也要匹配：PHP 用
$_POST，Node.js Express 用req.body（需express.urlencoded({ extended: true })中间件） - 如果用了
fetch或axios拦截表单提交，method属性不影响 JS 行为，但 HTML 语义和降级能力仍需保留
enctype 属性只在上传文件时才需要改，普通联系表单保持默认
绝大多数联系表单只有文本输入，这时 enctype 完全不用写——浏览器自动使用 application/x-www-form-urlencoded，这是最兼容、最稳妥的编码方式。
一旦加了 <input type="file">，就必须设 enctype="multipart/form-data"，否则文件根本不会被发送，$_FILES 或 req.files 为空。
- 只含
<input type="text">、<textarea></textarea>、<select></select>的表单：不写enctype - 含文件上传：必须写
enctype="multipart/form-data"，且后端解析逻辑要对应（比如 PHP 需检查$_FILES，不能只看$_POST） - 别写
enctype="text/plain"：它几乎没实用价值，浏览器支持差，后端极难解析
action 设置后，务必验证后端是否真正接收并响应
HTML 表单只是“发出请求”的一端，action 指向的地址是否运行着能处理该请求的服务、是否返回了正确状态码（200 或 302）、是否做了防重复提交或基础校验，这些都不是 form 标签能保证的。
最容易被忽略的地方：前端写了 action="/send"，后端路由也配了 POST /send，但 handler 里忘了 return 响应，或抛了未捕获异常，导致连接挂起或超时，浏览器卡在“正在等待响应”状态。
- 用浏览器 Network 面板看请求是否发出、状态码是否为 2xx/3xx、Response 内容是否合理（比如返回 JSON
{"success":true}） - 后端代码开头加日志，确认请求确实到达，比如 Node.js 中
console.log('Received contact form:', req.body) - 表单提交后若需跳转，后端应返回
302+Location，而不是靠前端 JS 跳转——这样更可靠，也利于 SEO 和无障碍访问
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
