如何实现HTML表单输入邮箱后唤起邮件客户端发送至该地址？

我来帮你搞定这个问题！你的思路方向是对的，但原生HTML的mailto:协议没法直接通过表单的action属性动态绑定用户输入的邮箱地址——因为action里的内容是静态写死的，不会自动读取输入框的值。咱们得用JavaScript来处理提交逻辑，动态生成目标邮箱的mailto链接。

修正后的完整代码 #

<p>Enter the Email Address of the advisor you wish to message.</p>
<form id="emailForm">
  <p>Email: <input type="email" name="email" size="30" required></p>
  <p><input type="submit" value="Email"></p>
</form>

<script>
document.getElementById('emailForm').addEventListener('submit', function(e) {
  // 阻止表单默认的提交行为，避免页面刷新
  e.preventDefault();
  
  // 获取用户输入的邮箱地址
  const targetEmail = this.elements.email.value.trim();
  
  // 做一层邮箱格式验证（配合HTML5的type="email"双重保障）
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(targetEmail)) {
    alert('请输入有效的邮箱地址！');
    return;
  }
  
  // 生成mailto链接，还可以附加主题、正文等参数优化体验
  const mailtoLink = `mailto:${targetEmail}?subject=咨询邮件&body=您好，我有一些问题想咨询...`;
  
  // 打开用户默认邮件客户端
  window.location.href = mailtoLink;
});
</script>

关键改进点说明 #

• 把输入框类型改成type="email"，配合required属性，让浏览器自动做基础的邮箱格式验证和非空检查
• 给表单添加ID，方便JavaScript精准获取并绑定提交事件
• 用e.preventDefault()阻止表单默认跳转行为，避免不必要的页面刷新
• 动态读取用户输入的邮箱，生成正确的mailto链接，还能通过subject（主题）、body（正文）参数预先填充邮件内容
• 额外加了JS层面的格式验证，进一步提升容错性

极简纯HTML备选方案（体验稍弱） #

如果不想用JavaScript，也可以做一个实时更新的邮件链接，但需要用户点击链接时确保已经输入邮箱：

<p>Enter the Email Address of the advisor you wish to message.</p>
<p>Email: <input type="text" id="advisorEmail" size="30"></p>
<p><a href="#" id="emailLink">Email</a></p>

<script>
// 实时更新邮件链接的目标地址
document.getElementById('advisorEmail').addEventListener('input', function() {
  const email = this.value.trim();
  const link = document.getElementById('emailLink');
  link.href = email ? `mailto:${email}` : '#';
});
</script>

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