1 HTML表單 2 3 表單用於搜集不同類型的用戶輸入，表單由不同類型的標簽組成，實現一個特定功能的表單區域（比如：注冊）， 4 5 首先應該用<form>標簽來定義表單區域整體，在此標簽中再使用不同的表單控件來實現不同類型的信息輸入， 6 7 具體實現及注釋可參照以下偽代碼： 8 9 <!-- form定義一個表單區域,action屬性定義表單數據提交的地址，method屬性定義提交的方式。 --> 10 <form action="http://www..." method="get"> 11 12 <!-- label標簽定義表單控件的文字標注，input類型為text定義了一個單行文本輸入框 --> 13 <p> 14 <label>姓名：</label> 15 <input type="text" name="username" /> 16 </p> 17 18 <!-- input類型為password定義了一個密碼輸入框 --> 19 <p> 20 <label>密碼：</label> 21 <input type="password" name="password" /> 22 </p> 23 24 <!-- input類型為radio定義了單選框 --> 25 <p> 26 <label>性別：</label> 27 <label><input type="radio" name="gender" value="0" /> 男</label> 28 <label><input type="radio" name="gender" value="1" /> 女</label> 29 </p> 30 31 <!-- input類型為checkbox定義了單選框 --> 32 <p> 33 <label>愛好：</label> 34 <label><input type="checkbox" name="like" value="sing" /> 唱歌</label> 35 <label><input type="checkbox" name="like" value="run" /> 跑步</label> 36 <label><input type="checkbox" name="like" value="swiming" /> 游泳</label> 37 </p> 38 39 <!-- input類型為file定義上傳照片或文件等資源 --> 40 <p> 41 <label>照片：</label> 42 <input type="file" name="person_pic"> 43 </p> 44 45 <!-- textarea定義多行文本輸入 --> 46 <p> 47 <label>個人描述：</label> 48 <textarea name="about"></textarea> 49 </p> 50 51 <!-- select定義下拉列表選擇 --> 52 <p> 53 <label>籍貫：</label> 54 <select name="site"> 55 <option value="0">北京</option> 56 <option value="1">上海</option> 57 <option value="2">廣州</option> 58 <option value="3">深圳</option> 59 </select> 60 </p> 61 62 <!-- input類型為submit定義提交按鈕 63 還可以用圖片控件代替submit按鈕提交，一般會導致提交兩次，不建議使用。如： 64 <input type="image" src="xxx.gif"> 65 --> 66 <p> 67 <input type="submit" name="" value="提交"> 68 69 <!-- input類型為reset定義重置按鈕 --> 70 <input type="reset" name="" value="重置"> 71 </p> 72 73 </form> 74 input表單項中的屬性，可以提供 75 76 *type屬性:表示表單項的類型:值如下: 77 78 text:單行文本框 79 80 password:密碼輸入框 81 82 checkbox:多選框 注意要提供value值 83 84 radio:單選框 注意要提供value值 85 86 file:文件上傳選擇框 87 88 button:普通按鈕 89 90 submit:提交按鈕 91 92 image:圖片提交按鈕 93 94 reset:重置按鈕, 還原到開始\(第一次打開時\)的效果 95 96 hidden:主表單隱藏域,要是和表單一塊提交的信息,但是不需要用戶修改 97 98 *name屬性:表單項名,用於存儲內容值的 99 100 *value屬性:輸入的值\(默認指定值\) 101 102 size屬性:輸入框的寬度值 103 104 maxlength屬性:輸入框的輸入內容的最大長度 105 106 readonly屬性:對輸入框只讀屬性 107 108 *disabled屬性:禁用屬性 109 110 *checked屬性:對選擇框指定默認選項 111 112 src和alt是為圖片按鈕設置的 113 114 注意：reset重置按鈕是將表單數據恢復到第一次打開時的狀態，並不是清空 115 116 image圖片按鈕，默認具有提交表單功能。 117 118 placeholder 屬性規定可描述輸入字段預期值的簡短的提示信息（比如：一個樣本值或者預期格式的短描述）。 119 該提示會在用戶輸入值之前顯示在輸入字段中。 120 注意：placeholder 屬性適用於下面的 input 類型：text、search、url、tel、email 和 password。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <title>表單實例</title> 6 </head> 7 <body> 8 <h1>表單的基本使用</h1> 9 <!--get與post的區別:1.一個是顯式get,會將你提交的數據顯示在地址欄中,不安全, 10 一個是隱式post,會隱藏參數 2.一個攜帶的數據量小GET 11 :128KB,一個攜帶的數據量大post:2M--> 12 <!--編碼格式enctype編碼格式定死的 上傳文件視頻音頻是使用 一定要寫上 13 讓瀏覽器識別,寫上后他才能把這個放在請求頭里面響應--> 14 15 <form action='./05-form.php' method='post' enctype='multipart/form-data'> 16 <!--text文本標簽 服務器在你提交的時候看的是name和value, 17 在你輸入之后會默認的把新輸入的內容放到value里面, 18 服務器獲取name對應的值value, 19 placeholder是你什么都不輸入顯示在文本框中的內容 20 maxlength是輸入的最大長度, 21 size表示輸入框的長度size的寫法可以單基本已經廢棄 22 一般用style='width:200px;', 23 autofocus移動光標自動顯示在用戶名上,提示你在這里輸入--> 24 用戶名:<input type='text' name='uname' value='' placeholder='請輸入用戶名' 25 maxlength='6' style='width:100px;' autofocus/><br/> 26 密 碼: <input type='password' name='pass'><br/> 27 確認密碼:<input type='password'/><br/> 28 <!--radio單選框,label的作用是點擊男字或女字也有效果 29 checked 默認選中,對於單選框和復選框而言--> 30 性別:<label><input type='radio' name='sex' value='m' checked/>男</label> 31 <label><input type='radio' name='sex' value='w'/>女<br/></label> 32 <!--checkbox復選框或者多選框,check[]可以只接收一個name得到四個值 33 可以分別把value的值放入列表中,然后服務器只接收一個name就好--> 34 愛好:<input type='checkbox' name='check[]' value='lan'/>籃球 35 <input type='checkbox' name='check[]'value='zu'/>足球 36 <input type='checkbox' name='check[]' value='ping' checked/>乒乓球 37 <input type='checkbox' name='check[]'value='yu'/>羽毛球<br/> 38 文件上傳:<input type='file' name='pic'/><br/> 39 籍貫:<select name='city'> 40 <!--option選項的意思--> 41 <option value='hb'>河北</option> 42 <option value='bj'>北京</option> 43 <!--selected起始默認選中,對於下拉框而言--> 44 <option value='sd' selected>山東</option> 45 <!--disabled你怎么選也選不中,變灰----> 46 <option value='hn' disabled>河南</option> 47 </select><br/> 48 <!--resize:none文本框不能被自由的擴大和縮小, 49 rows表示文本框的高度也就是行數,cols代表的就是寬度也就是列數--> 50 內容:<textarea name='areas' style='resize:none' rows='5' cols='40'> 51 </textarea> 52 <br/> 53 <input type='submit' value='注冊'/> 54 <input type='button' value='按鈕'/><!--沒有提交功能--> 55 <!--圖片的方式提交h5基本沒有使用--> 56 <input type='image' src='./post.png' width='40' height='18'/> 57 <!--button這里面可以套一個背景圖很多功能都可以實現 常用的--> 58 <button>點擊按鈕</button> 59 <!--reset把先前寫過的東西清空掉--> 60 <input type='reset' value='重置'/> 61 <!--這里有點不動還需再看一下--> 62 隱藏域:<input type='hidden' name='id' value='100'/> 63 64 65 66 </form> 67 <!--放在form外面沒有提交功能--> 68 <button>點擊按鈕</button> 69 </body> 70 71 </html>