编写一个 JavaScript 代码以通过电子邮件发送 HTML 表单,可以使用以下步骤:
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">电子邮件地址:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">消息内容:</label><br>
<textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>
<input type="submit" value="发送">
</form>
function sendEmail(event) {
event.preventDefault(); // 阻止表单默认提交行为
var form = document.getElementById("myForm");
var name = form.elements["name"].value;
var email = form.elements["email"].value;
var message = form.elements["message"].value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "send_email.php", true); // 替换为实际的服务器端邮件发送脚本
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("邮件发送成功!");
form.reset(); // 清空表单
}
};
xhr.send("name=" + encodeURIComponent(name) + "&email=" + encodeURIComponent(email) + "&message=" + encodeURIComponent(message));
}
var form = document.getElementById("myForm");
form.addEventListener("submit", sendEmail);
<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$to = "recipient@example.com"; // 替换为实际的收件人电子邮件地址
$subject = "HTML 表单提交";
$headers = "From: " . $email . "\r\n";
$headers .= "Content-type: text/html\r\n";
$mailBody = "
<html>
<head>
<title>HTML 表单提交</title>
</head>
<body>
<h2>收到来自 " . $name . " 的消息</h2>
<p>" . $message . "</p>
</body>
</html>
";
mail($to, $subject, $mailBody, $headers);
?>
请注意,上述代码仅为示例,实际应用中需要根据具体情况进行修改和完善。此外,还需要在服务器上配置电子邮件发送功能。
领取专属 10元无门槛券
手把手带您无忧上云