1.智能表单的介绍

  其中,(1)中的使用格式使得form不会太臃肿。

  form的智能表单-LMLPHP

2.使用规范

  form的智能表单-LMLPHP

3.新属性

  form的智能表单-LMLPHP

4.举例

  form的智能表单-LMLPHP

二.程序

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.结果

  form的智能表单-LMLPHP

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://

  form的智能表单-LMLPHP

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.结果

  form的智能表单-LMLPHP

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.结果

  form的智能表单-LMLPHP

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.结果

  form的智能表单-LMLPHP

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.结果

  form的智能表单-LMLPHP

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.结果

  form的智能表单-LMLPHP

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.结果

  form的智能表单-LMLPHP

  

04-14 05:03