如何使用HTML实现表单提交后将输入内容发送到指定邮箱？

问题原因及解决方法 #

直接报错的核心原因 #

你代码中所有属性使用的是中文全角弯引号（”），而非英文半角标准引号（"），浏览器无法正确识别action里的mailto:协议，会把属性值误认为是相对路径提交到当前站点，所以返回404 Not Found错误。

其他影响功能的错误 #

• mailto:作为表单action时，大部分浏览器仅支持GET提交方式，你设置的POST方法和multipart/form-data的编码格式不兼容，就算引号修正也无法正常触发邮件唤起逻辑
• 所有表单输入框的id均为floatingInput，重复id会导致label的关联失效，同时表单提交时无法正常识别字段值
• 所有输入项没有设置name属性，表单提交时不会携带对应输入内容

修复步骤 #

1. 把所有属性的中文引号全部替换为英文半角引号
2. 调整表单属性配置，适配mailto:协议的提交规则：

<form class="row g-3 needs-validation" novalidate 
    action="mailto:myemail@gmail.com"
    method="GET"
    name="EmailForm">

3. 修正所有重复id，保证每个输入框id唯一，对应label的for属性和输入框id匹配，比如：

<!-- 名字字段示例 -->
<div class="col-md-4">
  <label for="firstName" class="form-label">First name</label>
  <input type="text" class="form-control" id="firstName" name="first_name" placeholder="Konnie">
</div>
<!-- 姓氏字段示例 -->
<div class="col-md-4">
  <label for="lastName" class="form-label">Last name</label>
  <input type="text" class="form-control" id="lastName" name="last_name" placeholder="Smith" required>
</div>

4. 给每个输入框添加对应的name属性，表单提交时才会把输入内容作为参数传递。

补充说明 #

上述修复完成后，提交表单会唤起用户本地的邮件客户端，需要用户手动点击发送才能完成邮件投递，无法做到后台静默发信。如果需要用户提交后直接发送邮件到你的邮箱、不需要用户操作本地客户端，纯HTML无法实现，需要搭配PHP、Node.js等后端服务处理表单请求，再调用邮件发送接口完成投递，这种方式也不会直接暴露你的邮箱地址，安全性更高。

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