留个邮箱,方便通知消息 - 邮箱输入框，初识HTML(5)+CSS(3)-升级版教程-慕课网

6-6 留个邮箱,方便通知消息 - 邮箱输入框

本节编程练习不计算学习进度，请电脑登录imooc.com操作

留个邮箱,方便通知消息 - 邮箱输入框

我们来学习input标签中的邮箱框email类型，先来看一下邮箱框长什么样子吧。

我们要实现一个邮箱输入框，可以输入以下代码：

技术点的解释：

1、Input的type属性设置为email,则表示该输入框的类型为邮箱。

2、数字框的值必须包含@。

3、数字框的值@之后必须有内容,否则会报错误提示。

是不是很简单呢?

我来试试：

可以按照上图编写一个邮箱输入框,且输入满足要求和格式的内容。

index.html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>input-email</title>
</head>
 
<body>
 
</body>
 
</html>