一、表單
1.表單的作用
HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互。
2.表單的工作機(jī)制
3.表單定義（<form></form>標(biāo)簽）
HTML表單是一個(gè)包含表單元素的區(qū)域， 表單使用<form> 標(biāo)簽創(chuàng)建。表單能夠包含input元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。注意，<form >元素是塊級(jí)元素，其前后會(huì)產(chǎn)生折行。
<form action="login.do" method="post"> <!--表單元素在這里--> </form>
4.表單屬性
action：規(guī)定當(dāng)提交表單時(shí)，向何處發(fā)送表單數(shù)據(jù)。action取值為:第一，一個(gè)URL（絕對(duì)URL/相對(duì)URL），一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過(guò)來(lái)的數(shù)據(jù)（即表單元素值）作相應(yīng)處理。比如<form action="http://www.XXX.com/login.do">,當(dāng)用戶提交這個(gè)表單時(shí)，服務(wù)器將執(zhí)行網(wǎng)址"http://www.XXX.com/"上的名為"login.do"的一般處理程序。第二，使用mailto協(xié)議的URL地址，這樣會(huì)將表單內(nèi)容以電子郵件的形式發(fā)送出去。這種情況比較少見(jiàn)的，因?yàn)樗笤L問(wèn)者的計(jì)算機(jī)上安裝和正確設(shè)置好了郵件發(fā)送程序。第三，空值，如果action為空或不寫，表示提交給當(dāng)前頁(yè)面。
method：該屬性定義瀏覽器將表單中的數(shù)據(jù)提交給服務(wù)器處理程序的方式。關(guān)于method的取值，最常用的是get和post。第一，使用get方式提交表單數(shù)據(jù)，Web瀏覽器會(huì)將各表單字段元素及其數(shù)據(jù)按照URL參數(shù)格式附在<form>標(biāo)簽的action屬性所指定的URL地址后面發(fā)送給Web服務(wù)器；由于URL的長(zhǎng)度限制，使用get方式傳送的數(shù)據(jù)量一般限制在1KB以下。第二，使用post方式，瀏覽器會(huì)將表單數(shù)據(jù)作為HTTP請(qǐng)求體的一部分發(fā)送給服務(wù)器。一般來(lái)說(shuō)，使用post方式傳送的數(shù)據(jù)量要比get方式傳遞的數(shù)據(jù)量大；根據(jù)HTML標(biāo)準(zhǔn)，如果處理表單的服務(wù)器程序不會(huì)改變服務(wù)器上存儲(chǔ)的數(shù)據(jù)，則應(yīng)采用get方式（比如查詢），如果表單處理的結(jié)果會(huì)引起服務(wù)器上存儲(chǔ)的數(shù)據(jù)的變化，則應(yīng)該采用post方式（比如增刪改操作）。第三，其它方式（Head、PUT、DELETE、TRACE 或 OPTIONS等）。其實(shí)，最初HTTP標(biāo)準(zhǔn)對(duì)各種操作都規(guī)定了相應(yīng)的method，但后來(lái)很多都沒(méi)有被遵守，大部分情況只是使用get或post就OK。
target：該屬性規(guī)定在何處顯示action屬性中指定的URL所返回的結(jié)果。取值有_blank（在新窗口中打開(kāi)）、_self（在相同的框架中打開(kāi)，默認(rèn)值）、_parent（在父框架中打開(kāi)）、_top（在整個(gè)窗口中打開(kāi)）和framename（在指定的框架中打開(kāi)）。
title：設(shè)置網(wǎng)站訪問(wèn)者的鼠標(biāo)放在表單上的任意位置停留時(shí)，瀏覽器用小浮標(biāo)顯示的文本。
enctype：規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。取值：默認(rèn)值為 "application/x-www-form-urlencoded"，在發(fā)送到服務(wù)器之前，所有字符都會(huì)進(jìn)行編碼（空格轉(zhuǎn)換為 "+" 加號(hào)，特殊符號(hào)轉(zhuǎn)換為 ASCII HEX 值）；“multipart/form-data”：不對(duì)字符編碼。在使用包含文件上傳控件的表單時(shí)，必須使用該值。
name:表單的名稱。注意和id屬性的區(qū)別：name屬性是和服務(wù)器通信時(shí)使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的。
二、表單元素
1.單行文本框<input type="text"/>（input 的type 屬性的默認(rèn)值就是"text"）
<input type = “text” name=“名稱”/>
以下是單行文本框的主要屬性：
2.密碼框<input type="password"/>
<input type=“password” name=“名稱”/>
3.單選按鈕<input type="radio"/>
使用方式：使用name相同的一組單選按鈕，不同radio設(shè)定不同的value值，這樣通過(guò)取指定name的值就可以知道誰(shuí)被選中了，不用單獨(dú)的判斷。單選按鈕的元素值由value屬性顯式設(shè)置，表單提交時(shí)，選中項(xiàng)的value和name被打包發(fā)送，不顯式設(shè)置value。
<input type=“radio” name=“gender” value=“male”/> <input type=“radio” name=“gender” value=“female”/>
4.復(fù)選框<input type="checkbox"/>
使用復(fù)選按鈕組，即name相同的一組復(fù)選按鈕，復(fù)選按鈕表單元素的元素值由value屬性顯式設(shè)置，表達(dá)提交時(shí)，所有選中項(xiàng)的value和name被打包發(fā)送不顯式設(shè)置value。復(fù)選框的checked屬性表示是否被選中，<input type="checkbox" checked />或者<input type="checkbox" checked="checked" />(推薦)checked、readonly等這種一個(gè)可選值的屬性都可以省略屬性值。
<input type =“checkbox” name=“language” value=“Java”/> <input type =“checkbox” name=“language” value=“C”/> <input type =“checkbox” name=“language” value=“C#”/>
5.隱藏域<input type="hidden"/>
隱藏域通常用于向服務(wù)器提交不需要顯示給用戶的信息。
<input type=“hidden” name=“隱藏域”/>
6.文件上傳<input type="file"/>
使用file，則form的enctype必須設(shè)置為multipart/form-data，method屬性為POST。
<input name="uploadedFile" id="uploadedFile" type="file" size="60" accept="text/*"/>
7.下拉框<select>標(biāo)簽
<select>標(biāo)記創(chuàng)建一個(gè)列表框,<option>標(biāo)記創(chuàng)建一個(gè)列表項(xiàng),<select>與嵌套的<option>一起使用，共同提供在一組選項(xiàng)中進(jìn)行選擇的方式。
將一個(gè)option設(shè)置為選中：<option selected>北京</option>或者<option selected="selected">北京</option>(推薦方式)就可以將這個(gè)項(xiàng)設(shè)定為選擇項(xiàng)。如何實(shí)現(xiàn)“不選擇”，添加一個(gè)<option value="-1">--不選擇--<option>，然后編程判斷select選中的值如果是-1就認(rèn)為是不選擇。
select分組選項(xiàng)，可以使用optgroup對(duì)數(shù)據(jù)進(jìn)行分組，分組本身不會(huì)被選擇，無(wú)論對(duì)于下拉列表還是列表框都適用?！ ?/p>
<select>標(biāo)記加上multiple屬性，可以允許多選(按CTRL鍵選擇)
<select name="country" size="10"> <optgroup label="Africa"> <option value="gam">Gambia</option> <option value="mad">Madagascar</option> <option value="nam">Namibia</option> </optgroup> <optgroup label="Europe"> <option value="fra">France</option> <option value="rus">Russia</option> <option value="uk">UK</option> </optgroup> <optgroup label="North America"> <option value="can">Canada</option> <option value="mex">Mexico</option> <option value="usa">USA</option> </optgroup> </select>
8.多行文本<textarea></textarea>
多行文本<textarea>創(chuàng)建一個(gè)可輸入多行文本的文本框,<textarea>沒(méi)有value屬性,<textarea>文本</textarea>，cols=“50”、rows=“15”屬性表示行數(shù)和列數(shù),不指定則瀏覽器采取默認(rèn)顯示。
<textarea name=“textareaContent” rows=“ 20“ cols=“50” > 多行文本框的初始顯示內(nèi)容 </textarea>
9.<label></label>標(biāo)簽
在<input type=“text”>前可以寫普通的文本來(lái)修飾，但是單擊修飾文本的時(shí)候input并不會(huì)得到焦點(diǎn)，而用label則可以，for屬性指定要修飾的控件的id，<label for=“txt1” >內(nèi)容</label>；”,然后按下alt+u(了解)。accesskey=“u“，label的另一個(gè)屬性。注意：要為被修飾的控件設(shè)置一個(gè)唯一的id。我覺(jué)得<label></label>標(biāo)簽對(duì)<input type="radio"/>和<input type="checkbox"/>這兩個(gè)標(biāo)簽是非常有用的。
<input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable> <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label> <input type="radio" name="sex" id="secret" value="2" /><label for="secret">保密</label>
10.<fieldset></fieldset>標(biāo)簽
fieldset標(biāo)簽將控件劃分一個(gè)區(qū)域，看起來(lái)更規(guī)整。
<fieldset> <legend>愛(ài)好</legend> <input type="checkbox" value="籃球" /> <input type="checkbox" value="爬山" /> <input type="checkbox" value="閱讀" /> </fieldset>
11.提交按鈕<input type="submit"/>
當(dāng)用戶單擊<inputt type="submit"/>的提交按鈕時(shí)，表單數(shù)據(jù)會(huì)提交給<form>標(biāo)簽的action屬性所指定的服務(wù)器處理程序。中文IE下默認(rèn)按鈕文本為“提交查詢”，可以設(shè)置value屬性修改按鈕的顯示文本。
<input type="submit" value="提交"/>
12.重置按鈕<input type="reset"/>
當(dāng)用戶單擊<input type="reset"/>按鈕時(shí)，表單中的值被重置為初始值。在用戶提交表單時(shí)，重置按鈕的name和value不會(huì)提交給服務(wù)器。
<input type=“reset” value=“重置按鈕"/>
13.普通按鈕<input type="button"/>
普通按鈕通常用于單擊執(zhí)行一段腳本代碼。
<input type="button" value="普通按鈕"/>
14.圖像按鈕<input type="image"/>
圖像按鈕的src屬性指定圖像源文件，它沒(méi)有value屬性。圖像按鈕可代替<input type="submit"/>，而現(xiàn)在也可以通過(guò)css直接將<input type="submit"/>按鈕的外觀設(shè)置為一幅圖片。
<input type="image" src="bg.jpg" />
三、表單示例
該示例是使用表單實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的注冊(cè)頁(yè)面，使用表格布局。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN" "http://wwwworg/TR/html4/loosedtd"> <html> <head> <title>注冊(cè)頁(yè)面</title> <style type="text/css"> table { width: 450px; border: 1px solid red; background-color: #FFCB29; border-collapse: collapse; } td { width: 200; height: 40px; border: 1px solid black; } span { background-color: red; } </style> </head> <body style="background-color: blue; background-image: url(/image/bearjpg); background-repeat: repeat;"> <form name="registerform" id="form1" action="" method="post"> <table align="center" cellspacing="0" cellpadding="0"> <tr> <td> 用戶名： </td> <td> <input type="text" /> </td> </tr> <tr> <td> 密碼： </td> <td> <input type="password" /> </td> </tr> <tr> <td> 確認(rèn)密碼： </td> <td> <input type="password" /> </td> </tr> <tr> <td> 請(qǐng)選擇市： </td> <td> <select> <optgroup label="中國(guó)"> <option>甘肅省</option> <option>河南省</option> <option>上海市</option> </optgroup> <optgroup label="American"> <option>California</option> <option>Chicago</option> <option>New York</option> </optgroup> </select> </td> </tr> <tr> <td> 請(qǐng)選擇性別： </td> <td> <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable> <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label> <input type="radio" name="sex" id="secret" value="2" /><label for="secret">保密</label> </td> </tr> <tr> <td> 請(qǐng)選擇職業(yè)： </td> <td> <input type="radio" id="student" name="profession" /><label for="student">學(xué)生</label> <input type="radio" id="teacher" name="profession" /><label for="teacher">教師</label> <input type="radio" id="others" name="profession" /><label for="others">其他</label> </td> </tr> <tr> <td> 請(qǐng)選擇愛(ài)好： </td> <td> <fieldset> <legend>你的愛(ài)好</legend> <input type="checkbox" name="hobby" id="basketboll" checked="checked" /><label for="basketboll">打籃球</label> <input type="checkbox" name="hobby" id="run" /><label for="run">跑步</label> <input type="checkbox" name="hobby" id="read" /><label for="read">閱讀</label> <input type="checkbox" name="hobby" id="surfing" /><label for="surfing">上網(wǎng)</label> </fieldset> </td> </tr> <tr> <td> 備注： </td> <td> <textarea cols="30">這里是備注內(nèi)容</textarea> </td> </tr> <tr> <td> </td> <td> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </td> </tr> </table> </form> </body> </html>
新聞熱點(diǎn)
疑難解答
