表单必须设置method和action属性才能正常提交，method推荐POST以保护敏感信息，action需指向有效后端或第三方服务地址；input控件须设name属性且选用合适type（如email、tel），textarea用于多行文本；纯前端无法发送邮件，需服务端或第三方中转。
表单必须包含 method 和 action 才能提交
很多初学者只写 <form> 标签，里面放了 <input> 却点不动——根本原因是没指定提交方式和目标。不设 method 默认是 GET，但联系表单该用 POST；不设 action，表单会尝试提交到当前 URL，通常 405 错误或刷新页面无反应。
实操建议：
-
method="POST"是联系表单的合理选择，避免敏感信息（如邮箱、留言内容）暴露在 URL 中 -
action暂时可填"/contact"或测试用的后端地址（如"https://httpbin.org/post"），但不能留空或只写"#" - 本地纯 HTML 文件（
file://协议）无法真正提交表单，浏览器会直接报错net::ERR_FILE_NOT_FOUND或静默失败
<input> 类型选错会导致语义失效或移动端体验差
比如用 <input type="text"> 写邮箱字段，既没输入校验，手机键盘也不会自动弹出 @ 符号；用 type="number" 写电话，iOS 会强制加上下箭头且可能过滤掉 +86 前缀。
常见字段推荐写法：
立即学习“前端免费学习笔记（深入）”；
- 姓名：
<input type="text" name="name" required>（required触发原生必填提示） - 邮箱：
<input type="email" name="email" required>（自动校验格式，移动端调起邮箱键盘） - 电话：
<input type="tel" name="phone">（不强制校验，但唤起数字键盘，支持+和-） - 消息正文：
<textarea name="message" required rows="5"></textarea>（别用input模拟多行）
缺少 name 属性的控件不会被提交
这是最隐蔽的坑：样式做了、占位符写了、甚至加了 id 和 for 关联 <label>，但后端收不到任何值。原因就是漏写了 name。
注意点：
-
name是表单数据的“键名”，后端靠它取值（例如 PHP 的$_POST['email']） -
id仅用于 CSS/JS 定位或<label for="xxx">关联，和提交无关 - 复选框/单选组要共用一个
name，靠不同value区分选项，否则只能提交最后一个选中的 - 按钮类控件（如
<button type="submit">）不需要name，除非你真想把它当数据字段传
纯前端无法完成「发送邮件」，得靠服务端或第三方中转
有人试图用 mailto: 链接替代表单，结果点击后唤起本地邮件客户端，用户还得手动发；也有人以为加个 onsubmit="sendEmail()" 就能发，但浏览器禁止 JS 直接调用 SMTP。
可行路径只有三条：
- 对接轻量后端（如 Node.js + Nodemailer、Python Flask + smtplib），自己部署或用 Vercel/Cloudflare Workers 运行
- 用第三方表单服务（如 Formspree、Formcarry、Getform），把
action指向它们提供的 URL，配置好接收邮箱即可 - GitHub Pages 等静态托管平台必须走第三方，因为不支持运行自定义后端代码
别在表单里写 action="mailto:you@example.com"，它不可靠，且现代邮箱客户端常拦截或忽略。
