Html 如何仅使用 HTML5 和 CSS 发送电子邮件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24026898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to send an email using only HTML5 and CSS
提问by Sanjana Porwal
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.
我正在尝试编写一个代码，该代码可以在单击提交按钮时向特定地址发送电子邮件。下面我提到了我的 HTML 代码，点击提交后，我的帐户中没有收到任何电子邮件。请告诉我要做什么。
<form method=POST action="mailto:[email protected]" 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>
回答by David
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.
仅使用 HTML“发送”电子邮件而不必运行任何服务器端代码在某种程度上是可能的，但这并不是真正的建议。使用 mailto: URI 方案，您可以设置邮件的主题、正文和发送对象。但是，您将无法设置从谁发送它，因为处理 mailto: URI Scheme 的邮件客户端将处理它。
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.
以下是设置基本联系表单的表单的简单示例。请记住，用户需要有一个可以处理 URI 方案的程序，如果他们不这样做，则什么也不会发生。这不会发送电子邮件，而是在他们的邮件应用程序中创建一个。
<form method="GET" action="mailto:[email protected]" 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>
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
如果相当简单，这种方式的工作方式。我们使用表单的“GET”方法将属性添加到URI Scheme的末尾，应该是“subject”和“body”。您可以在http://en.wikipedia.org/wiki/Mailto 上了解有关 URI mailto: 方案的更多信息
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.
如果您希望您的联系表单包含更多信息，例如姓名、电话号码和其他信息，您可以让 Javascript 处理表单提交。您可以通过为“提交”事件添加事件侦听器来实现此目的。
<form method="GET" action="mailto:[email protected]" 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 contactfunction to make it look nicer.
上面的脚本将生成一个如下所示的电子邮件正文。您当然可以随时添加更多规则并解析到contact函数中以使其看起来更好。
subject: a
Name: b
E-Mail Address: c
Message: d
回答by Jukka K. Korpela
The form as such works, to the extent that it is possible to send an e-mail using only HTML (CSS has really nothing to do with it). Clicking on the submit button launches an e-mail client in the user's computer, but this may be prevented by settings in the browser. The user then needs to use the submit button (or equivalent) in that client. If you did that in your test and did not get e-mail, then [email protected] is not your account or the e-mail was filtered out in spam filtering somewhere.
这种形式的工作原理是可以仅使用 HTML 发送电子邮件（CSS 实际上与它无关）。单击提交按钮会在用户的计算机中启动电子邮件客户端，但这可能会被浏览器中的设置阻止。然后用户需要使用该客户端中的提交按钮（或等效按钮）。如果您在测试中这样做了并且没有收到电子邮件，则 [email protected] 不是您的帐户，或者该电子邮件在某处垃圾邮件过滤器中被过滤掉了。
If the intent is to get the user's information, then the Email field is useless, since if the sending works at all, the incoming message will appear with the user's e-mail address (and quite often name, too) in the From field.
如果目的是获取用户的信息，则电子邮件字段是无用的，因为如果发送完全有效，传入的消息将在发件人字段中显示用户的电子邮件地址（通常还有姓名）。
回答by Dylan
To send an email only using HTML (on your side) you can use a service like https://formspree.io/. Services like Formspree handle all the code for you. All you have to do is setup your form to point to their email provider. If you don't like Formspree much you can try looking for alternatives, I made one myself here. The issue with Formspree is that your users will be re-directed to their website to do a captcha before the email is sent.
要仅使用 HTML（在您这边）发送电子邮件，您可以使用类似https://formspree.io/的服务。Formspree 之类的服务会为您处理所有代码。您所要做的就是设置您的表单以指向他们的电子邮件提供商。如果您不太喜欢 Formspree，您可以尝试寻找替代品，我在这里自己制作了一个。Formspree 的问题在于，您的用户将被重定向到他们的网站以在发送电子邮件之前进行验证码。
For example you can use a service like this by making your form something like below:
例如，您可以通过使表单如下所示来使用这样的服务：
<form action="https://formspree.io/[email protected]" method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
As you can see the form is sent to https://formspree.io/[email protected]. There are detailed instructions on formspree's website in how to use their service. Using a service like formspree is super easy as you don't have to write any of the back end that manages your form.
如您所见，表单已发送至https://formspree.io/[email protected]。formpree 的网站上有关于如何使用他们的服务的详细说明。使用 formpree 之类的服务非常简单，因为您无需编写任何管理表单的后端。
回答by pptaszek1990
In order to do this you would need to use a server side language such as PHP to process the form.
为此，您需要使用服务器端语言（例如 PHP）来处理表单。
