HTML5 – 邮箱

在HTML5中，我们可以用input元素来创建一个邮箱输入框。邮箱输入框可以让用户正确输入符合邮箱规范的字符串，支持多个邮箱后缀。

邮箱头部

首先，我们来看一下邮箱输入框的头部。在HTML中，input元素有一个type属性，我们可以将它设置成”email”来创建一个邮箱输入框。

<label for="email">邮箱：</label>
<input type="email" id="email" name="email">

在这个例子中，我们将label元素的for属性设置成email，然后将input元素的id属性设置成email。用这种方式，当用户单击label元素时，输入框就会自动获得焦点。

另外，我们也可以将邮箱输入框的placeholder属性设置成一段提示文字，来引导用户输入。

<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱">

支持多个邮箱后缀

大多数邮箱都有多个后缀，比如.com、.cn等。在HTML5中，我们可以添加多个后缀来支持多种邮箱格式。

<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">

在这段代码中，我们使用了正则表达式来匹配合法的邮箱格式。正则表达式的意思是：以字母、数字、下划线或短横线开头，后面跟@符号和字母、数字、下划线或短横线，然后再跟一个或多个点号，最后以字母、数字、下划线或短横线结尾。这个正则表达式可以匹配形如”example@example.com”、”example@163.com”等格式的邮箱。

错误提示

如果用户输入了错误的邮箱格式，我们需要给出一个错误提示。在HTML5中，我们可以用setCustomValidity()方法来自定义错误提示信息。

<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" oninvalid="setCustomValidity('邮箱格式不正确，请重新输入')" onchange="try{setCustomValidity('')}catch(e){}">

这个例子中，如果用户输入了错误的邮箱格式，将会弹出一个提示框，提示框里面包含指定的错误信息。如果用户输入的是正确的格式，提示框将会消失。