如何无需JavaScript及后端技术实现输入框表单邮件发送？

一、mailto: 方案（纯HTML实现） #

这是唯一不需要任何后端或JS的纯HTML解决方案，具体用法如下：

1. 核心原理
   将表单的action属性设置为mailto:你的邮箱地址，同时指定method="post"和enctype="text/plain"，提交表单时会唤起用户本地的邮件客户端，自动填充表单内容，用户确认后即可发送邮件。

2. 代码示例

<form action="mailto:your-email@example.com" method="post" enctype="text/plain">
  <div>
    <label for="username">姓名：</label>
    <input type="text" id="username" name="username" required>
  </div>
  <div>
    <label for="useremail">你的邮箱：</label>
    <input type="email" id="useremail" name="useremail" required>
  </div>
  <div>
    <label for="usermessage">留言内容：</label>
    <textarea id="usermessage" name="usermessage" rows="6" required></textarea>
  </div>
  <button type="submit">提交留言</button>
</form>

3. 注意事项

• 提交后会唤起用户本地邮件客户端（如Outlook、苹果邮件、Thunderbird等），用户需要手动点击发送按钮才能完成邮件发送
• 若用户未配置本地邮件客户端，此方案无法正常工作
• 无法追踪用户是否真的发送了邮件，也无法处理提交失败的情况

二、其他替代方案（无需自行开发后端） #

如果觉得mailto:的体验不够理想，还可以考虑以下无需自己写后端代码的方案：

• 第三方表单工具：部分表单工具支持生成嵌入HTML代码，你只需将代码复制到自己的页面中，提交的内容会由工具自动转发到你的邮箱。这类工具通常还提供数据存储、提交通知等功能，无需你搭建后端服务。
• 静态托管平台内置表单功能：像Netlify、Vercel这类静态网站托管平台，提供了免费的表单处理功能。你只需在表单中添加特定属性（如data-netlify="true"），平台会自动收集表单内容并转发到你指定的邮箱，全程无需编写后端逻辑。

总结 #

如果严格限制只能用纯HTML/CSS，mailto:是唯一可行的方案，但体验依赖用户的本地环境。若能接受使用第三方服务或静态托管平台的功能，可以获得更流畅的用户体验，同时不用自己开发后端。

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