如何仅使用HTML5和CSS发送电子邮件 [英] How to send an email using only HTML5 and CSS

问题描述

我试图编写一个代码，可以通过单击提交按钮将电子邮件发送到特定地址。下面我提到我的HTML代码，点击提交时，我没有收到我的帐户的任何电子邮件。请让我知道该怎么办。

I am trying to write a code which can send an email to a particular address on clicking submit button. Below i am mentioning my HTML code,on clicking submit i am not getting any email on my account.Please let me know what is to be done.

<form method=POST action="mailto:[e-mail]" 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>

推荐答案

电子邮件只能使用HTML，而不需要运行任何服务器端代码，但这不是真的建议。使用mailto：URI Scheme，您可以设置邮件的主题，正文以及发送给谁。您将无法设置发送者的身份，因为处理mailto：URI方案的邮件客户端将处理该邮件。

It is somewhat possible to "send" an e-mail only using HTML and not having to have any Server Side code running, but it's isn't really suggested. Using the mailto: URI Scheme you can set both the Subject, Body of the message and who it gets sent to. You will not be able to set who it gets sent from though, since the mail client that handles the URI Scheme of mailto: will handle that.

下面是一个简单的示例设置基本联系表单的表单。记住，用户需要有一个可以处理URI方案的程序，如果他们不这样做，什么都不会发生。这不会发送电子邮件，但会在其邮件应用程序中创建一个。

Below is a simple example of a form to setup a basic contact form. Remember, users will need to have a program that can handle the URI Scheme, and if they don't, nothing will happen. This doesn't send an e-mail, but creates one inside of their mail application.

<form method="GET" action="mailto:[e-mail]" 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的更多信息。

The way this works if fairly simple. We use the "GET" method for the form to add the attributes to the end of the URI Scheme, which should be "subject" and "body". You can learn more about the URI mailto: scheme at http://en.wikipedia.org/wiki/Mailto

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

If you would like your contact form to contain even more information like Name, Phone Number, and other information, you can have Javascript handle the form submission. You can do this by adding an event listener for the 'submit' event.

<form method="GET" action="mailto:[e-mail]" 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>

以上脚本将生成如下所示的电子邮件正文。您当然可以添加更多规则并解析到联系人函数中，以使它看起来更好。

The above script will produce an e-mail body that looks like the following. You can of course always add more rules and parsing into the contact function to make it look nicer.

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

这篇关于如何仅使用HTML5和CSS发送电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！