我是 HTML 新手,我正在尝试创建一些预填充的复选框项目(一些是自定义文本,即输入您自己的值的输入框),以便用户输入数据并检查列表。本质上,我正在创建类似于 TO-DO-LIST 的东西。
我不知道如何添加两件事:
- 用户能够保存表单、导航到其他地方并返回继续
- 用户能够以包含其复选框值的格式通过电子邮件发送完成的表单。
有人可以帮忙吗!
早间清单
早间清单
- 醒来
- 刷牙
- 呜呜呜
我是 HTML 新手,我正在尝试创建一些预填充的复选框项目(一些是自定义文本,即输入您自己的值的输入框),以便用户输入数据并检查列表。本质上,我正在创建类似于 TO-DO-LIST 的东西。
我不知道如何添加两件事:
有人可以帮忙吗!
早间清单
在这里阅读http://www.w3schools.com/php/php_mail.asp。您需要一个 PHP 脚本。
只需一些 HTML 和 JavaScript 即可完成您的任务。jQuery和Sisyphus JavaScript 库在这里为您提供帮助。使用普通的 html/javascript 发送邮件非常容易。
我将一些示例 HTML 放在一起(它比我想象的要广泛一些,但你已经有了):
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src='http://sisyphus-js.herokuapp.com/assets/application-09059f9f54cc3c3bff98487cf866644b.js'></script>
<script type='text/javascript'>
function sendMail() {
var mailbody = "My Checklist: \n\n"
+ $('input[type="checkbox"]').map(
function(id, box){ return (box.checked ? "[x]" : "[ ]") + " " + box.name;}
).get().join("\n");
var link = "mailto:me@example.com"
+ "?cc=myCCaddress@example.com"
+ "&subject=" + escape("This is my subject")
+ "&body=" + escape(mailbody);
window.location.href = link;
}
$(function(){
$( "#checklist" ).sisyphus();
});
</script>
</head>
<body>
<form id="checklist">
<label><input type="checkbox" name="buy" />Buy some tee</label><br />
<label><input type="checkbox" name="brew" />Brew the tee</label><br />
<label><input type="checkbox" name="drink" />Drink tee</label><br />
<button onclick="sendMail(); return false">Send Mail</button>
</form>
</body>
</html>
Sisyphus 是一个将表单数据保存在浏览器本地存储中的库。这样,您可以离开页面,稍后再回来,仍然保留您的表单值(如果您在同一台计算机上使用相同的浏览器返回)。
该sendMail()
函数构建了一个 mailto 链接,该链接打开您的本地电子邮件客户端,其中包含准备发送的新邮件。
编辑:缩短的示例代码