form的智能表單
阿新 • • 發佈：2017-06-29
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的智能表單