表單項介紹
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <!-- 9 表單的作用就是用來將用戶信息提交給服務器的 10 比如：百度的搜索框 註冊 登錄這些操作都需要填寫表單 11 -->12 13 14 <!-- 15 使用form標簽創建一個表單 16 form標簽中必須指定一個action屬性，該屬性指向的是一個服務器的地址 17 當我們提交表單時將會提交到action屬性對應的地址 18 --> 19 <form action="target.html"> 20 <!-- 21 使用form創建的僅僅是一個空白的表單，22 我們還需要向form中添加不同的表單項 23 --> 24 25 <!-- 26 在表單中可以使用fieldset來為表單項進行分組， 27 可以將表單項中的同一組放到一個fieldset中 28 --> 29 <fieldset> 30 31 <!--在fieldset可以使用legend子標簽，來指定組名 --> 32 <legend>用戶信息</legend> 33 34 35 <!-- 36 使用input來創建一個文本框，它的type屬性是text 37 如果希望表單項中的數據會提交到服務器中，還必須給表單項指定一個name屬性 38 name表示提交內容的名字 39 40 用戶填寫的信息會附在url地址的後邊以查詢字符串的形式發送給服務器 41 url地址?查詢字符串 42 格式： 43 屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&屬性名=屬性值 44 在文本框中也可以指定value屬性值，該值將會作為文本框的默認值顯示 45 --> 46 <!-- 47 在html中還為我們提供了一個標簽，專門用來選中表單中的提示文字的 48 label標簽 49 該標簽可以指定一個for屬性，該屬性的值需要指定一個表單項的id值 50 --> 51 <label for="um">用戶名</label> 52 <input id="um" type="text" name="username" /> <br /><br /> 53 54 <!-- 55 密碼框 56 - 使用input創建一個密碼框，它的type屬性值是password 57 --> 58 <label for="pwd">密碼 </label> 59 <input id="pwd" type="password" name="password" /> <br /><br /> 60 </fieldset> 61 62 <fieldset > 63 64 <legend>用戶愛好</legend> 65 66 <!-- 67 單選按鈕 68 - 使用input來創建一個單選按鈕，它的type屬性使用radio 69 - 單選按鈕通過name屬性進行分組，name屬性相同是一組按鈕 70 - 像這種需要用戶選擇但是不需要用戶直接填寫內容的表單項， 71 還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務器 72 73 如果希望在單選按鈕或者是多選框中指定默認選中的選項， 74 則可以在希望選中的項中添加checked="checked"屬性 75 --> 76 性別 <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label> 77 <input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label> 78 <br /><br /> 79 80 <!-- 81 多選框 82 - 使用input創建一個多選框，它的type屬性使用checkbox 83 --> 84 愛好 <input type="checkbox" name="hobby" value="zq" />足球 85 <input type="checkbox" name="hobby" value="lq" />籃球 86 <input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球 87 <input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球 88 <br /><br /> 89 90 </fieldset> 91 92 <!-- 93 下拉列表 94 - 使用select來創建一個下拉列表 95 下拉列表的name屬性需要指定給select，而value屬性需要指定給option 96 可以通過在option中添加selected="selected"來將選項設置為默認選中 97 98 當為select添加一個multiple="multiple"，則下拉列表變為一個多選的下拉列表 99 --> 100 你喜歡的明星 101 <select name="star"> 102 103 <!-- 104 在select中可以使用optgroup對選項進行分組 105 同一個optgroup中的選項是一組 106 可以通過label屬性來指定分組的名字 107 --> 108 <optgroup label="女明星"> 109 <!-- 在下拉列表中使用option標簽來創建一個一個列表項 --> 110 <option value="fbb">範冰冰</option> 111 <option value="lxr">林心如</option> 112 <option value="zw">趙薇</option> 113 </optgroup> 114 115 <optgroup label="男明星"> 116 <option value="zbs" selected="selected">趙本山</option> 117 <option value="ldh">劉德華</option> 118 <option value="pcj">潘長江</option> 119 </optgroup> 120 121 </select> 122 123 <br /><br /> 124 125 <!-- 126 使用textarea創建一個文本域 127 --> 128 自我介紹 <textarea name="info"></textarea> 129 130 <br /><br /> 131 132 <!-- 133 提交按鈕可以將表單中的信息提交給服務器 134 使用input創建一個提交按鈕,它的type屬性值是submit 135 在提交按鈕中可以通過value屬性來指定按鈕上的文字 136 --> 137 <input type="submit" value="註冊" /> 138 139 <!-- 140 <input type="reset" />可以創建一個重置按鈕， 141 點擊重置按鈕以後表單中內容將會恢復為默認值 142 --> 143 <input type="reset" /> 144 145 <!-- 146 使用input type=button可以用來創建一個單純的按鈕， 147 這個按鈕沒有任何功能，只能被點擊 148 --> 149 <input type="button" value="按鈕" /> 150 151 <!-- 152 除了使用input，也可以使用button標簽來創建按鈕 153 這種方式和使用input類似，只不過由於它是成對出現的標簽 154 使用起來更加的靈活 155 --> 156 <br /><br /> 157 <button type="submit">提交</button> 158 <button type="reset">重置</button> 159 <button type="button">按鈕</button> 160 161 </form> 162 </body> 163 </html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!-- 表單的作用就是用來將用戶信息提交給服務器的比如：百度的搜索框 註冊 登錄這些操作都需要填寫表單--><!--使用form標簽創建一個表單form標簽中必須指定一個action屬性，該屬性指向的是一個服務器的地址當我們提交表單時將會提交到action屬性對應的地址--><form action="target.html"><!-- 使用form創建的僅僅是一個空白的表單，我們還需要向form中添加不同的表單項--><!-- 在表單中可以使用fieldset來為表單項進行分組，可以將表單項中的同一組放到一個fieldset中--><fieldset><!-- 在fieldset可以使用legend子標簽，來指定組名 --><legend>用戶信息</legend><!-- 使用input來創建一個文本框，它的type屬性是text如果希望表單項中的數據會提交到服務器中，還必須給表單項指定一個name屬性name表示提交內容的名字用戶填寫的信息會附在url地址的後邊以查詢字符串的形式發送給服務器url地址?查詢字符串格式：屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&屬性名=屬性值在文本框中也可以指定value屬性值，該值將會作為文本框的默認值顯示--><!-- 在html中還為我們提供了一個標簽，專門用來選中表單中的提示文字的label標簽該標簽可以指定一個for屬性，該屬性的值需要指定一個表單項的id值--><label for="um">用戶名</label><input id="um" type="text" name="username" /> <br /><br /><!--密碼框- 使用input創建一個密碼框，它的type屬性值是password--><label for="pwd">密碼 </label><input id="pwd" type="password" name="password" /> <br /><br /></fieldset><fieldset ><legend>用戶愛好</legend><!--單選按鈕- 使用input來創建一個單選按鈕，它的type屬性使用radio- 單選按鈕通過name屬性進行分組，name屬性相同是一組按鈕- 像這種需要用戶選擇但是不需要用戶直接填寫內容的表單項，還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務器如果希望在單選按鈕或者是多選框中指定默認選中的選項，則可以在希望選中的項中添加checked="checked"屬性-->性別 <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label><input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label> <br /><br /><!-- 多選框- 使用input創建一個多選框，它的type屬性使用checkbox-->愛好<input type="checkbox" name="hobby" value="zq" />足球<input type="checkbox" name="hobby" value="lq" />籃球<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球<br /><br /></fieldset><!-- 下拉列表- 使用select來創建一個下拉列表下拉列表的name屬性需要指定給select，而value屬性需要指定給option可以通過在option中添加selected="selected"來將選項設置為默認選中當為select添加一個multiple="multiple"，則下拉列表變為一個多選的下拉列表-->你喜歡的明星 <select name="star"><!-- 在select中可以使用optgroup對選項進行分組同一個optgroup中的選項是一組可以通過label屬性來指定分組的名字--><optgroup label="女明星"><!-- 在下拉列表中使用option標簽來創建一個一個列表項 --><option value="fbb">範冰冰</option><option value="lxr">林心如</option><option value="zw">趙薇</option></optgroup><optgroup label="男明星"><option value="zbs" selected="selected">趙本山</option><option value="ldh">劉德華</option><option value="pcj">潘長江</option></optgroup></select><br /><br /><!--使用textarea創建一個文本域-->自我介紹 <textarea name="info"></textarea><br /><br /><!-- 提交按鈕可以將表單中的信息提交給服務器使用input創建一個提交按鈕,它的type屬性值是submit在提交按鈕中可以通過value屬性來指定按鈕上的文字--><input type="submit" value="註冊" /><!--<input type="reset" />可以創建一個重置按鈕，點擊重置按鈕以後表單中內容將會恢復為默認值--><input type="reset" /><!-- 使用input type=button可以用來創建一個單純的按鈕，這個按鈕沒有任何功能，只能被點擊--><input type="button" value="按鈕" /><!--除了使用input，也可以使用button標簽來創建按鈕這種方式和使用input類似，只不過由於它是成對出現的標簽使用起來更加的靈活--><br /><br /><button type="submit">提交</button><button type="reset">重置</button><button type="button">按鈕</button></form></body></html>
表單項介紹