利用mailto实现邮件发送
1 mailto简介
mailto是一种电子邮件协议,通过该协议可以创建一个指向电子邮件地址的超级链接,通过该链接可以在Internet中发送电子邮件。好比在地址栏输入一个网址会打开一个网页一样,输入mailto:name@email.com,就会打开本地邮件客户端,并将邮件发送给name@email.com。
2 mailto的使用
(1)使用语句
<a href="mailto:name@email.com">Email</a>
结合其参数使用该语句,参数介绍如下。
(2)传递参数
mailto支持以下参数:
参数 | 含义 |
---|---|
to | 收信人 |
subject | 主题 |
cc | 抄送 |
bcc | 暗抄送 |
body | 内容 |
写入语句:
<a harset="utf-8" href="mailto:Angel?subject=conctact &cc=123@163.com&body=Hello world">send mail</a>
将有如下结果:
3 操作部分分析
1>练习中用html中input、ul、li 语句完成输入数据部分的表格建立
<ul class="email">
<li><input type="text" name="name" placeholder="Name"></li>
<li><input type="text" name="email" placeholder="Email Address"></li>
<li><input type="text" name="number" placeholder="Phone Number"></li>
<li class="message"><textarea name="message" placeholder="Message"></textarea> </li>
<button class="btn btn-define">Submit</button>
<a href="mailto" id="send"></a>
</ul>
2> css对背景进行调整,用JQuery获取上述输入的数据,如用户名,发送的邮箱地址,电话号码和发送内容,并完成发送给对方的操作,完整代码参照共享百度云连接:
function sendEmail(){
var name=$("[name='name']").val(),
email=$("[name='email']").val(),
number=$("[name='number']").val(),
message=$("[name='message']").val(),
body="My Name is: "+name+"%0a%0d"
+"My Email Address is: "+email+"%0a%0d"
+"My Phone Number is: "+number+"%0a%0d"
+"Message:"+"%0a%0d"+message;
$("#send").attr("href","mailto:mamengyi1121@163.com?body="+body);
document.getElementById("send").click();
}
$(function(){
//发送邮件
$(".btn").click(sendEmail);
//在表单输入时显示label
$(".email").on("input propertychange",["input","textarea"],function(e){
$(e.target.parentNode).toggleClass("in",!!$(e.target).val());
})
3> html + js +css 输出结果
完整代码:
链接:https://pan.baidu.com/s/1BrYnZ9uv1XKqqB5v-lowmQ 密码:fh82