如何在HTML中添加邮箱

在HTML中添加邮箱可以方便用户与网站管理员进行沟通和联系。下面介绍三种在HTML中添加邮箱的方法。

1. 邮箱链接

邮箱链接是将邮箱地址作为链接的URL，用户点击链接后会打开默认的邮件客户端，并在收件人中自动填写该邮箱地址。

<a href="mailto:example@example.com">example@example.com</a>

2. input输入框

利用input标签提供的type="email"属性可以创建一个邮箱输入框，用户在输入框中输入邮箱地址后可以将其提交给服务器。

<form>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
</form>

3. js代码

使用js可以在页面中动态创建邮件链接或者输入框。

动态创建邮箱链接

<!--HTML-->
<div id="emailLink"></div>

//JS
var email = "example@example.com";
var link = document.createElement("a");
link.href = "mailto:" + email;
link.innerText = email;
document.getElementById("emailLink").appendChild(link);

动态创建邮箱输入框

<!--HTML-->
<div id="emailForm"></div>

//JS
var form = document.createElement("form");
var label = document.createElement("label");
label.innerText = "邮箱:";
form.appendChild(label);

var input = document.createElement("input");
input.type = "email";
input.id = "email";
input.name = "email";
form.appendChild(input);

var submit = document.createElement("input");
submit.type = "submit";
submit.value = "提交";
form.appendChild(submit);

document.getElementById("emailForm").appendChild(form);

以上就是在HTML中添加邮箱的三种方法，开发者可以根据需求选取适合的方法。