表单标签
我们可以百度搜一下关于h5表单标签的知识.如下图所示：
我们看一下浏览器支持情况与否
我们来尝试几个表单类型：
例1 邮箱类型
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="https://www.jianshu.com/">
邮箱:<input type="email" /><input type="submit"/><br/>
</form>
</body>
</html>
运行谷歌浏览器如下：
点击"提交"会有什么变化？
如图所示：
结论：自动检验输入内容是否符合邮箱的格式。
例2 地址类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="https://www.jianshu.com/">
邮箱:<input type="email" />
域名:<input type="url" /><input type="submit"/>
<br/>
</form>
</body>
</html>
【观察】 <input type="url" />输入不是网址，sumbit的变化？
【运行】如图所示
【对比】 正确网址输入
提交后效果：
【归纳】type="url"属性可以自动校验输入内容是否是url地址。
例3 电话号码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="https://www.jianshu.com/">
邮箱:<input type="email" />
域名:<input type="url" />
电话号码:<input type="number" /><input type="submit"/>
<br/>
</form>
</body>
</html>
思考题：大家猜一猜会发生什么效果？总结如上面结论。
练习1：大家可以把input属性type="date"，试一试，并归纳出结论
练习2：大家可以把input属性type="color"，试一试，并归纳出结论
网友评论