正文
form的智能表单
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.智能表单的介绍
其中，（1）中的使用格式使得form不会太臃肿。
2.使用规范
3.新属性
4.举例
二.程序
1.关于邮件的问题
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>form test</title>
</head>
<body>
<form id="for" action="" method="get">
<!--email-->
邮件<input id="" type="email" name="email" placeholder="请输入正确mail地址"/><br/> 提交<input type="submit" value="提交"/>
</form>
</body>
</html>
2.结果
3.网址
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>form test</title>
</head>
<body>
<form id="for" action="" method="get">
<!--email-->
邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/> <!--url---->
网址<input id="u1" type="url" name="url"/> 提交<input type="submit" value="提交"/>
</form>
</body>
</html>
4.结果
网址的开头需要http://
5.各种日期
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>form test</title>
</head>
<body>
<form id="for" action="" method="get">
<!--email-->
邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/> <!--url---->
网址<input id="u1" type="url" name="url"/><br/><br/> <!--time,date-->
日期<input id="d1" type="date" name="time"/><br/>
月份<input id="m1" type="month" name="month"/><br/>
星期<input id="w1" type="week" name="week"/><br/>
时间<input id="t1" type="time" name="time"/><br/><br/> 提交<input type="submit" value="提交"/>
</form>
</body>
</html>
6.结果
7.数字
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>form test</title>
</head>
<body>
<form id="for" action="" method="get">
<!--email-->
邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/> <!--url---->
网址<input id="u1" type="url" name="url"/><br/><br/> <!--time,date-->
日期<input id="d1" type="date" name="time"/><br/>
月份<input id="m1" type="month" name="month"/><br/>
星期<input id="w1" type="week" name="week"/><br/>
时间<input id="t1" type="time" name="time"/><br/><br/> <!--number-->
数字<input id="n1" type="number" name="number"/><br/> <!--range--> 提交<input type="submit" value="提交"/>
</form>
</body>
</html>
8.结果
9.滑动
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>form test</title>
</head>
<body>
<form id="for" action="" method="get">
<!--email-->
邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/> <!--url---->
网址<input id="u1" type="url" name="url"/><br/><br/> <!--time,date-->
日期<input id="d1" type="date" name="time"/><br/>
月份<input id="m1" type="month" name="month"/><br/>
星期<input id="w1" type="week" name="week"/><br/>
时间<input id="t1" type="time" name="time"/><br/><br/> <!--number-->
数字<input id="n1" type="number" name="number"/><br/> <!--range-->
滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/> 提交<input type="submit" value="提交"/>
</form>
</body>
</html>
10.结果
11.搜索
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>form test</title>
</head>
<body>
<form id="for" action="" method="get">
<!--email-->
邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/> <!--url---->
网址<input id="u1" type="url" name="url"/><br/><br/> <!--time,date-->
日期<input id="d1" type="date" name="time"/><br/>
月份<input id="m1" type="month" name="month"/><br/>
星期<input id="w1" type="week" name="week"/><br/>
时间<input id="t1" type="time" name="time"/><br/><br/> <!--number-->
数字<input id="n1" type="number" name="number"/><br/> <!--range-->
滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/> <!--search-->
搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/>
提交<input type="submit" value="提交"/>
</form>
</body>
</html>
12.结果
13.list属性
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>form test</title>
</head>
<body>
<form id="for" action="" method="get">
<!--email-->
邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/> <!--url---->
网址<input id="u1" type="url" name="url"/><br/><br/> <!--time,date-->
日期<input id="d1" type="date" name="time"/><br/>
月份<input id="m1" type="month" name="month"/><br/>
星期<input id="w1" type="week" name="week"/><br/>
时间<input id="t1" type="time" name="time"/><br/><br/> <!--number-->
数字<input id="n1" type="number" name="number"/><br/> <!--range-->
滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/> <!--search-->
搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/> <!--text--list-->
list<input id="t2" type="text" list="ilist"/>
<datalist id="ilist">
<option label="o1" value="oo1">
<option label="o2" value="oo2">
<option label="o3" value="oo3">
</datalist>
<br/><br/><br/><br/><br/> 提交<input type="submit" value="提交"/>
</form>
</body>
</html>
14.结果
15.颜色与正则
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>form test</title>
</head>
<body>
<form id="for" action="" method="get">
<!--email-->
邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/> <!--url---->
网址<input id="u1" type="url" name="url"/><br/><br/> <!--time,date-->
日期<input id="d1" type="date" name="time"/><br/>
月份<input id="m1" type="month" name="month"/><br/>
星期<input id="w1" type="week" name="week"/><br/>
时间<input id="t1" type="time" name="time"/><br/><br/> <!--number-->
数字<input id="n1" type="number" name="number"/><br/> <!--range-->
滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/> <!--search-->
搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/> <!--text--list-->
list<input id="t2" type="text" list="ilist"/>
<datalist id="ilist">
<option label="o1" value="oo1">
<option label="o2" value="oo2">
<option label="o3" value="oo3">
</datalist> <!--color required pattern-->
颜色<INPUT type=color><br>
正则测试<input type="text" pattern="[789]+" required />
<br/><br/><br/><br/><br/> 提交<input type="submit" value="提交"/>
</form>
</body>
</html>
16.结果
