如何仅使用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:scheme的更多信息

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

<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

Answer 2

为此，您需要使用服务器端语言（例如 PHP）来处理表单。