HTML表单设置mailto属性后点击提交无法打开邮件客户端怎么办？

问题原因及解决方法 #

• 系统未配置默认邮件客户端
  mailto表单唤起邮件客户端的前提是当前操作系统已经设置了默认邮件处理程序，若未配置，浏览器无法找到可调用的对应程序，就会出现点击提交无响应的情况。你可以按对应系统路径配置：
  • Windows：进入「设置」→「应用」→「默认应用」，找到「电子邮件」分类，选择你常用的邮件客户端（如Outlook、系统自带邮件应用等）
  • macOS：进入「系统设置」→「桌面与 Dock」，下拉找到「默认电子邮件阅读器」，选择对应客户端
• 本地文件访问限制
  如果你是直接双击打开本地HTML文件（浏览器地址栏为file://开头的路径），绝大多数主流浏览器会限制这类本地文件的mailto表单提交行为。你可以用本地静态服务启动页面后再测试，比如使用VS Code的Live Server插件启动，地址栏为http://127.0.0.1开头时再尝试提交。
• 代码细节问题
  你当前代码中的range输入框未设置name属性，这个问题不会阻碍邮件客户端唤起，只是最终提交的邮件内容不会包含评分字段的值，你可以补充name属性比如改为<input type="range" name="yourRating" value="" min="0" max="100">即可。

快速验证方法 #

你可以先用简化版代码测试环境是否正常，如果简化版可以正常唤起，说明你原有代码逻辑没有问题：

<form action="mailto:info@gmail.com" method="post" enctype="text/plain">
  <input type="submit" value="测试提交">
</form>

另外要注意，mailto: 表单的可控性和兼容性都很差，仅适合学习阶段测试使用，实际生产场景不会用这种方式提交表单收集信息，都是通过后端服务实现邮件发送功能。

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