1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <!-- 10 form 表單標籤 11 action 定義資料的提交地址 12 1 url 13 2 相對路徑 14 3 絕對路徑 15 16 method 定義資料的提交方式 17 GET 18 1 引數會以鍵值的形式放在url後提交 url?key=value&key=value&key=value 19 2 數值直接暴露在位址列上不安全 20 3 瀏覽器位址列長度是有限制的，所以提交資料量不大 21 4 提交在位址列上，只能是字元，不能提交檔案 22 5 相比於post效率稍微高一些 23 POST 24 1 引數預設不放到url後面 25 2 資料不會直接暴露在位址列上，相對安全 26 3 資料是單獨打包，透過請求體傳送，提交的資料量比較大 27 4 請求體中，可以是字元，也可以是位元組資料，可以提交檔案 28 5 相比於get效率略低一些 29 30 表單項標籤 31 一定要定義name屬性，該屬性用於明確提交時的引數名 32 一定要定義value屬性，該屬性用於明確提交時的實參 33 input 34 type 輸入資訊的表單項型別 35 text 單行普通文字框 36 password 密碼框 37 submit 提交按鈕 38 reset 重置按鈕 39 radio 單選框，多個單選框使用相同的name屬性值，則會有互斥效果 40 checkbox 核取方塊，多個選項，可以選多個 41 hidden 隱藏域 不顯示在頁面上，提交時會攜帶（希望提交特定資訊，但是考慮安全文藝或使用者操作問題，不希望該資料發生改變） 42 file 檔案上傳框 43 textarea 文字域 多行文字框 44 select 下拉框 45 option 選項 46 --> 47 48 <form action="welcome.html" method="get"> 49 <!--新增表單項標籤 使用者輸入資訊的標籤--> 50 <input type="hidden" name="id" value="123"> <br> 51 <input type="text" name="pid" value="456" readonly> <br> <!--readonly 只讀，提交時攜帶--> 52 <input type="text" name="tid" value="789" disabled> <br> <!--disabled 不可用，提交時不攜帶--> 53 使用者名稱：<input type="text" name="userName"/> <br> 54 密碼：<input type="password" name="userPwd"/> <br> 55 性別: 56 <input type="radio" name="gender" value="1" checked="true"> 男 57 <input type="radio" name="gender"value="0"> 女 58 <br> 59 愛好： 60 <input type="checkbox" name="hobby" value="1" checked="true"> 籃球 61 <input type="checkbox" name="hobby" value="2"> 足球 62 <input type="checkbox" name="hobby" value="3"> 排球 63 <input type="checkbox" name="hobby" value="4"> 乒乓球 64 <br> 65 個人簡介： 66 <textarea name="intro" style="width: 300px;height: 100px;"> 67 必填 68 </textarea> <br> 69 籍貫： 70 <select name="pro"> 71 <option value="1">京</option> 72 <option value="2">津</option> 73 <option value="3">冀</option> 74 <option value="0" selected="selected">-請選擇-</option> 75 </select> <br> 76 選擇頭像： 77 <input type="file"> 78 <br> 79 <input type="submit" value="登入"/> 80 <input type="reset" value="清空"/> 81 </form> 82 83 <!-- 84 <form action="welcome.html" method="post"> 85 使用者名稱：<input type="text" name="userName"/> <br/> 86 密碼：<input type="password" name="userPwd"/> <br/> 87 <input type="submit" value="登入"/> 88 <input type="reset" value="清空"/> 89 </form> 90 --> 91 92 </body> 93 </html>