HTML表单提交数据至邮箱失败问题排查求助

嘿，我来帮你排查下这个表单提交的问题，看了你的代码片段，发现几个关键问题导致数据无法发送到指定邮箱：

• 缺少<form>标签包裹表单元素
  你当前的代码里只有表格行和提交按钮，但浏览器需要通过<form>标签来识别哪些控件属于同一个表单。所有表单相关的元素（包括文本域、提交按钮）都应该被<form>标签包裹，并且把action、method这类核心属性写在<form>标签上，而不是提交按钮里。

• 提交按钮的属性错误

  • 你把form action直接写在submit按钮上是错误的用法：submit按钮的form属性是用来关联外部表单的ID（比如按钮在表单外时用form="form-id"），不是用来指定邮箱地址的。
  • 按钮的vlue是拼写错误，正确的属性名是value——这个错误会导致按钮显示异常，甚至可能让浏览器无法正确识别它为提交按钮。

• method="post"与mailto不兼容
  当使用mailto:作为表单提交目标时，建议使用method="get"而非post。因为绝大多数邮件客户端只能解析GET方式传递的表单数据，POST的数据不会被正确加载到邮件内容中，最终导致邮件为空或者无法发送。

修正后的示例代码 #

<form action="mailto:me@hotmail.co.uk" method="get">
  <table>
    <tr>
      <td>Please enter your address and any further instruction.</td>
      <td><label for="Deliverybody">Delivery Instructions</label></td>
      <td><textarea name="txtBody" id="Deliverybody" cols="50" rows="10"></textarea></td>
    </tr>
  </table>
  <input type="submit" value="Submit Order" name="neworder"/>
</form>

另外要注意：mailto:的方式依赖用户本地配置好的邮件客户端（如Outlook、Thunderbird），不同客户端对表单数据的解析可能有差异，属于比较简易的提交方案。如果需要更稳定、不依赖客户端的表单提交，建议使用服务器端脚本（比如PHP、Node.js）来处理表单数据并发送邮件。

内容的提问来源于stack exchange，提问作者Alasdair Kite