1. 程式人生 > >form的智能表單

form的智能表單

doctype red 地址 需要 ont nbsp nth input 正則

1.智能表單的介紹

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

  技術分享

2.使用規範

  技術分享

3.新屬性

  技術分享

4.舉例

  技術分享

二.程序

1.關於郵件的問題

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--
email--> 9 郵件<input id="" type="email" name="email" placeholder="請輸入正確mail地址"/><br/> 10 11 提交<input type="submit" value="提交"/> 12 </form> 13 </body> 14 </html>

2.結果

  技術分享

3.網址

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset
=utf-8> 4 <title>form test</title> 5 </head> 6 <body> 7 <form id="for" action="" method="get"> 8 <!--email--> 9 郵件<input id="e1" type="email" name="email" placeholder="請輸入正確mail地址"/><br/> 10 11 <!--url----> 12
網址<input id="u1" type="url" name="url"/> 13 14 提交<input type="submit" value="提交"/> 15 </form> 16 </body> 17 </html>

4.結果

  網址的開頭需要http://

  技術分享

5.各種日期

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         郵件<input id="e1" type="email" name="email" placeholder="請輸入正確mail地址"/><br/>
10         
11     <!--url---->
12         網址<input id="u1" type="url" name="url"/><br/><br/>
13     
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         時間<input id="t1" type="time" name="time"/><br/><br/>
19         
20         提交<input type="submit" value="提交"/>
21     </form>
22 </body>
23 </html>

6.結果

  技術分享

7.數字

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         郵件<input id="e1" type="email" name="email" placeholder="請輸入正確mail地址"/><br/>
10         
11     <!--url---->
12         網址<input id="u1" type="url" name="url"/><br/><br/>
13     
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         時間<input id="t1" type="time" name="time"/><br/><br/>
19         
20     <!--number-->
21         數字<input id="n1" type="number" name="number"/><br/>
22         
23     <!--range-->
24         
25         提交<input type="submit" value="提交"/>
26     </form>
27 </body>
28 </html>

8.結果

  技術分享

9.滑動

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         郵件<input id="e1" type="email" name="email" placeholder="請輸入正確mail地址"/><br/>
10         
11     <!--url---->
12         網址<input id="u1" type="url" name="url"/><br/><br/>
13     
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         時間<input id="t1" type="time" name="time"/><br/><br/>
19         
20     <!--number-->
21         數字<input id="n1" type="number" name="number"/><br/>
22         
23     <!--range-->
24         滑動<input id="r1" type="range" min="0" max="3" step="1"/><br/>
25         
26         提交<input type="submit" value="提交"/>
27     </form>
28 </body>
29 </html>

10.結果

  技術分享

11.搜索

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         郵件<input id="e1" type="email" name="email" placeholder="請輸入正確mail地址"/><br/>
10         
11     <!--url---->
12         網址<input id="u1" type="url" name="url"/><br/><br/>
13     
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         時間<input id="t1" type="time" name="time"/><br/><br/>
19         
20     <!--number-->
21         數字<input id="n1" type="number" name="number"/><br/>
22         
23     <!--range-->
24         滑動<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/>
25         
26     <!--search-->
27         搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/>
28         提交<input type="submit" value="提交"/>
29     </form>
30 </body>
31 </html>

12.結果

  技術分享

13.list屬性

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         郵件<input id="e1" type="email" name="email" placeholder="請輸入正確mail地址"/><br/>
10         
11     <!--url---->
12         網址<input id="u1" type="url" name="url"/><br/><br/>
13     
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         時間<input id="t1" type="time" name="time"/><br/><br/>
19         
20     <!--number-->
21         數字<input id="n1" type="number" name="number"/><br/>
22         
23     <!--range-->
24         滑動<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/>
25         
26     <!--search-->
27         搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/>
28         
29     <!--text--list-->
30         list<input id="t2" type="text" list="ilist"/>
31         <datalist id="ilist">
32             <option label="o1" value="oo1">
33             <option label="o2" value="oo2">
34             <option label="o3" value="oo3">
35         </datalist>
36         <br/><br/><br/><br/><br/>
37     
38         提交<input type="submit" value="提交"/>
39     </form>
40 </body>
41 </html>

14.結果

  技術分享

15.顏色與正則

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         郵件<input id="e1" type="email" name="email" placeholder="請輸入正確mail地址"/><br/>
10         
11     <!--url---->
12         網址<input id="u1" type="url" name="url"/><br/><br/>
13     
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         時間<input id="t1" type="time" name="time"/><br/><br/>
19         
20     <!--number-->
21         數字<input id="n1" type="number" name="number"/><br/>
22         
23     <!--range-->
24         滑動<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/>
25         
26     <!--search-->
27         搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/>
28         
29     <!--text--list-->
30         list<input id="t2" type="text" list="ilist"/>
31         <datalist id="ilist">
32             <option label="o1" value="oo1">
33             <option label="o2" value="oo2">
34             <option label="o3" value="oo3">
35         </datalist>
36         
37     <!--color required pattern-->
38         顏色<INPUT type=color><br>
39         正則測試<input type="text" pattern="[789]+" required />
40         <br/><br/><br/><br/><br/>
41     
42         提交<input type="submit" value="提交"/>
43     </form>
44 </body>
45 </html>

16.結果

  技術分享

  

form的智能表單