HTML學習9：常用標簽之表單標簽 · Web前端HTML+CSS+JS初級入門

HTML 表單用于搜集不同類型的用戶輸入。表單標簽列表： ![](https://box.kancloud.cn/2016-04-28_57215589975f0.jpg) ### 一,表單標簽<form> 表單是一個包含表單元素的區域。表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復選框等等）輸入信息的元素。表單使用表單標簽（<form>）定義。 ### 二,表單輸入標簽< input> 多數情況下被用到的表單標簽是輸入標簽（< input>）。輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下： (1)文本域(Text Fields)和密碼域(Password Field) 當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域和密碼域。 ~~~ <span style="font-size:18px;"><html> <head> <title>HTML表單標簽演示</title> </head> <body> <form> 登錄名稱：<input type="text" name="user" /><br /> 登錄密碼：<input type="password" name="password" /> </form> <p>請注意，當您在密碼域中鍵入字符時，瀏覽器將使用項目符號來代替這些字符。</p> </body> </html> </span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_57215589a7e85.jpg) (2)單選按鈕（Radio Buttons）當用戶從若干給定的的選擇中選取其一時，就會用到單選框。注意，只能從中選取其一。也可以用屬性 checked="checked"將性別選擇為默認狀態。 ~~~ <span style="font-size:18px;"><html> <head> <title>HTML表單標簽演示</title> </head> <body> <form> 選擇性別第一種情況：<input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" />女 <hr/> 選擇性別第二種情況：<input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" checked="checked" />女 </form> <p>第一種情況最為常見，但是也會遇到第二種情況，就是當注冊的為女性網站時，性別選項會默認選擇性別女。</p> </body> </html></span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_57215589b9fdd.jpg) (3)復選框（Checkboxes）當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到復選框。也可以用屬性checked="checked"將性別選擇為默認狀態。 ~~~ <span style="font-size:18px;"><html> <head> <title>HTML表單標簽演示</title> </head> <body> <form> 選擇技術：<input type="checkbox" name="technology" value="JAVA" />JAVA <input type="checkbox" name="technology" value="HTML" />HTML <input type="checkbox" name="technology" value="CSS" />CSS </form> </body> </html></span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_57215589caeaa.jpg) (4)輸入標簽中的其他輸入類型 1文件選擇框(file) 當用戶需要從給定的文件夾中選取一個或若干個文件時，就會用到文件選擇框。 2表單隱藏組件(hidden) 當用戶數據不需要客戶端知道，但是可以將其提交給服務端。 3圖片這個圖片組件可以有提交數據的功能。 4按鈕這個按鈕組件可以自定義點擊事件。 ~~~ <span style="font-size:18px;"><html> <head> <title>HTML表單標簽演示</title> </head> <body> <form> 選擇文件：<input type="file" name="file" /><br/>  一個圖片：<input name="hh" type="image" src="22.jpg" height="48" width="72" align="middle"/><br/>  隱藏組件：<input type="hidden" name="hidden" value="myvalue" /><br/> 一個按鈕：<input type="button" value="點擊按鈕" onclick="alert('我是由點擊按鈕動作彈出的')" /><br/> </form> </body> </html></span> ~~~ 瀏覽器顯示的結果為：點擊選擇文件： ![](https://box.kancloud.cn/2016-04-28_57215589db7e3.jpg) 點擊按鈕： ![](https://box.kancloud.cn/2016-04-28_57215589f3a24.jpg) 點擊圖片： ![](https://box.kancloud.cn/2016-04-28_5721558a1bc45.jpg) ### 三,< form>表單標簽的< select>標簽和< textarea>標簽 (1)< select>標簽當在網頁中出現下拉列表時，需要用到的是<select>標簽 (2)< textarea>標簽當用戶在網頁鍵入個人信息或留言等等需要輸入一些文本信息時，需要用到< textarea>標簽 ~~~ <span style="font-size:18px;"><html> <head> <title>HTML表單標簽演示</title> </head> <body> <form> <h2>form表單標簽的select標簽</h2> 選擇國家：<select name="country"> <option value="none">--選擇國家--</option> <option value="China" selected="selected">中國 </option> <option value="USA">美國</option> <option value="UK">英國</option> </select> <h2>form表單標簽的textarea標簽</h2> 鍵入內容：<textarea name="text"> </textarea><br/> </form> </body> </html></span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_5721558a2e587.jpg) ### 四< form>表單標簽的< fieldset>標簽和< legend>標簽 < fieldset>標簽定義網頁中的一個域和< legend>標簽定義這個域的標題。 ~~~ <span style="font-size:18px;"><html> <head> <title>HTML表單標簽演示</title> </head> <body> <form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 體重：<input type="text" /> </fieldset> </form> </body> </html></span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_5721558a41d7d.jpg) ### 五,輸入標簽< input>還有兩個最重要的屬性，就是： < input type="reset" value="重置數據" />(用于清除用戶所填寫的數據信息) < input type="submit" value="提交數據" />(用于客戶端向服務器端提交數據的按鈕動作，與上述的圖片功能相似) ### 六,表單標簽使用整體的代碼為： ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>HTML表單標簽演示</title> </head> <body> <form>  <h2>form表單標簽的input標簽的十個組件</h2> 輸入名稱：<input type="text" name="user" value="" /><br/>  輸入密碼：<input type="password" name="psw" /><br/>  選擇性別第一種情況：<input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" />女 <br/>  選擇性別第二種情況：<input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" checked="checked" />女 <br/>  選擇技術：<input type="checkbox" name="technology" value="JAVA" />JAVA <input type="checkbox" name="technology" value="HTML" />HTML <input type="checkbox" name="technology" value="CSS" />CSS <br/> 選擇文件：<input type="file" name="file" /><br/>  一個圖片：<input name="hh" type="image" src="22.jpg" height="48" width="72" align="middle"/><br/>  隱藏組件：<input type="hidden" name="hidden" value="myvalue" /><br/> 一個按鈕：<input type="button" value="點擊按鈕" onclick="alert('我是由點擊按鈕動作彈出的')" /><br/> <h2>form表單標簽的select標簽</h2> 選擇國家：<select name="country"> <option value="none">--選擇國家--</option> <option value="China" selected="selected">中國</option> <option value="USA">美國</option> <option value="UK">英國</option> </select><br/> <h2>form表單標簽的textarea標簽</h2> 所寫內容：<textarea name="text"> </textarea><br/> <input type="reset" value="重置數據" /> ?????? <input type="submit" value="提交數據" /> </form> </body> </html></span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_5721558a53220.jpg) ? ? ? ? ? ? ??