认识HTML一一表单标签(H5)

表单标签

我们可以百度搜一下关于h5表单标签的知识.如下图所示：

我们看一下浏览器支持情况与否

我们来尝试几个表单类型：

例1  邮箱类型

代码如下：

邮箱:

运行谷歌浏览器如下：

点击"提交"会有什么变化？

如图所示：

结论：自动检验输入内容是否符合邮箱的格式。

例2 地址类型

邮箱:

域名:

【观察】 输入不是网址，sumbit的变化？

【运行】如图所示

【对比】 正确网址输入

提交后效果：

【归纳】type="url"属性可以自动校验输入内容是否是url地址。

例3  电话号码

邮箱:

域名:

电话号码:

思考题：大家猜一猜会发生什么效果？总结如上面结论。

练习1：大家可以把input属性type="date"，试一试，并归纳出结论

练习2：大家可以把input属性type="color"，试一试，并归纳出结论