css - 如何仅使用 HTML5 和 CSS 发送电子邮件

Question

我正在尝试编写一个代码，可以在单击提交按钮时将电子邮件发送到特定地址。下面我提到了我的 HTML 代码，点击提交后我的帐户没有收到任何电子邮件。请告诉我要做什么。

<form method=POST action="mailto:abc@mail.com" enctype="text/plain">
    <label for="name">Name:</label>
    <br>
    <input type="text" name="Name" id="name" value="Enter Name">
    <br>
    <label for="email">Email:</label>
    <br>
    <input type="email" name="email" id="email" value="Enter Email">
    <br>
    <label for="phone_number">Phone Number:</label>
    <br>
    <input type="tel" name="phone_number" id="phone_number" value="Enter Phone Number">
    <br>
    <input type="submit" name="Submit">
</form>

Answer 1

仅使用 HTML 来“发送”电子邮件而不必运行任何服务器端代码在某种程度上是可能的，但实际上并不建议这样做。使用 mailto: URI Scheme，您可以设置邮件的主题、正文以及发送给谁。但是，您将无法设置从谁发送邮件，因为处理 mailto: URI 方案的邮件客户端将处理该问题。

下面是一个简单的表单示例，用于设置基本联系表单。请记住，用户需要有一个可以处理 URI Scheme 的程序，如果没有，则什么也不会发生。这不会发送电子邮件，而是在他们的邮件应用程序中创建一个。

<form method="GET" action="mailto:test@example.com" enctype="text/plain">
    <div>Subject</div>
    <input type="text" name="subject" />

    <div>Message</div>
    <textarea name="body"></textarea>

    <br/>
    <input type="submit" value="Send" />
</form>

如果它的工作方式相当简单的话。我们使用表单的“GET”方法将属性添加到URI Scheme 的末尾，应该是“subject”和“body”。您可以在 http://en.wikipedia.org/wiki/Mailto 了解有关 URI mailto: 方案的更多信息

如果您希望您的联系表单包含更多信息，例如姓名、电话号码和其他信息，您可以让 Javascript 处理表单提交。您可以通过为“提交”事件添加事件监听器来完成此操作。

<form method="GET" action="mailto:test@example.com" enctype="text/plain">
    <div>Subject</div>
    <input type="text" name="subject" />

    <div>Name</div>
    <input name="Name" />

    <div>E-Mail</div>
    <input name="E-Mail Address" />

    <div>Message</div>
    <textarea name="Message"></textarea>

    <br/>
    <input type="submit" value="Send" />

    <input type="hidden" name="body" />
</form>

<script>
   var form = document.getElementsByTagName('form')[0];
   form.addEventListener('submit',contact,false);
   function contact(e) {
      // Prevent Default Form Submission
      e.preventDefault();

      var target = e.target || e.srcElement;
      var i = 0;
      var message = '';

      // Loop Through All Input Fields
      for(i = 0; i < target.length; ++i) {
         // Check to make sure it's a value. Don't need to include Buttons
         if(target[i].type != 'text' && target[i].type != 'textarea') {
                // Skip to next input since this one doesn't match our rules
            continue;
         }

         // Add Input Name and value followed by a line break
         message += target[i].name + ': ' + target[i].value + "\r\n";
      }
      // Modify the hidden body input field that is required for the mailto: scheme
      target.elements["body"].value = message;

      // Submit the form since we previously stopped it. May cause recursive loop in some browsers? Should research this.
      this.submit();
   }
</script>

以上脚本将生成如下所示的电子邮件正文。当然，您始终可以添加更多规则并解析到 contact 函数中，使其看起来更漂亮。

subject: a
Name: b
E-Mail Address: c
Message: d