Question

我是HTML的新手，我正在尝试创建一些预先填充的复选框项（有些是自定义文本，即输入框以输入您自己的值），供用户输入数据并检查列表。从本质上讲，我正在创建类似于TO-DO-LIST的东西。

我无法弄清楚如何添加两件事：

用户可以保存表单，导航到其他地方并返回继续
用户可以使用包含其复选框值的格式通过电子邮件发送完成的表单。

有人可以帮忙！

早晨清单

醒来
刷牙
bla bla

通过电子邮件发送

Answer 1

请阅读http://www.w3schools.com/php/php_mail.asp。你需要一个PHP脚本。

Answer 2

您的任务只需使用一些HTML和JavaScript即可完成。 jQuery和Sisyphus JavaScript库可以帮助您。 send mail with plain 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链接，可以打开您的本地电子邮件客户端，并准备好发送新邮件。

编辑：缩短的示例代码

html复选框通过电子邮件发送

早晨清单

通过电子邮件发送

2 个答案: