HTML表單_動力節點Java學院整理

HTML 表單用於接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。

HTML表單是一個包含表單元素的區域， 表單使用<form> 標籤創建。表單能夠包含input元素，比如文本字段、複選框、單選框、提交按鈕等等。表單還可以包含menus、textarea、fieldset、legend和label 元素。注意，<form >元素是塊級元素，其前後會產生折行。

 <form action=login.do method=post> <!--表單元素在這裡--> </form>

action：規定當提交表單時，向何處發送表單數據。 action取值為:第一，一個URL（絕對URL/相對URL），一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理。比如<form action=http://www.XXX.com/login.do>,當用戶提交這個表單時，服務器將執行網址http://www.XXX.com/上的名為login.do的一般處理程序。第二，使用mailto協議的URL地址，這樣會將表單內容以電子郵件的形式發送出去。這種情況比較少見的，因為它要求訪問者的計算機上安裝和正確設置好了郵件發送程序。第三，空值，如果action為空或不寫，表示提交給當前頁面。

method：該屬性定義瀏覽器將表單中的數據提交給服務器處理程序的方式。關於method的取值，最常用的是get和post。第一，使用get方式提交表單數據，Web瀏覽器會將各表單字段元素及其數據按照URL參數格式附在<form>標籤的action屬性所指定的URL地址後面發送給Web服務器；由於URL的長度限制，使用get方式傳送的數據量一般限制在1KB以下。第二，使用post方式，瀏覽器會將表單數據作為HTTP請求體的一部分發送給服務器。一般來說，使用post方式傳送的數據量要比get方式傳遞的數據量大；根據HTML標準，如果處理表單的服務器程序不會改變服務器上存儲的數據，則應採用get方式（比如查詢），如果表單處理的結果會引起服務器上存儲的數據的變化，則應該採用post方式（比如增刪改操作）。第三，其它方式（Head、PUT、DELETE、TRACE 或OPTIONS等）。其實，最初HTTP標準對各種操作都規定了相應的method，但後來很多都沒有被遵守，大部分情況只是使用get或post就OK。

target：該屬性規定在何處顯示action屬性中指定的URL所返回的結果。取值有_blank（在新窗口中打開）、_self（在相同的框架中打開，默認值）、_parent（在父框架中打開）、_top（在整個窗口中打開）和framename（在指定的框架中打開）。

title：設置網站訪問者的鼠標放在表單上的任意位置停留時，瀏覽器用小浮標顯示的文本。

enctype：規定在發送到服務器之前應該如何對錶單數據進行編碼。取值：默認值為application/x-www-form-urlencoded，在發送到服務器之前，所有字符都會進行編碼（空格轉換為+ 加號，特殊符號轉換為ASCII HEX 值）；multipart/form-data：不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。

name:表單的名稱。注意和id屬性的區別：name屬性是和服務器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的。

 <input type = text name=名稱/>

以下是單行文本框的主要屬性：

1. size：指定文本框的寬度，以字符個數為單位；在大多數瀏覽器中，文本框的缺省寬度是20個字符。
2. value：指定文本框的默認值，是在瀏覽器第一次顯示表單或者用戶單擊<input type=reset/>按鈕之後在文本框中顯示的值。
3. maxlength：指定用戶輸入的最大字符長度。
4. readonly：只讀屬性，當設置readonly屬性後，文本框可以獲得焦點，但用戶不能改變文本框中的value。
5. disabled：禁用，當文本框被禁用時，不能獲得焦點，當然，用戶也不能改變文本框的值。並且在提交表單時，瀏覽器不會將該文本框的值發送給服務器。

 <input type=password name=名稱/>

使用方式：使用name相同的一組單選按鈕，不同radio設定不同的value值，這樣通過取指定name的值就可以知道誰被選中了，不用單獨的判斷。單選按鈕的元素值由value屬性顯式設置，表單提交時，選中項的value和name被打包發送，不顯式設置value。

 <input type=radio name=gender value=male/> <input type=radio name=gender value=female/>

使用複選按鈕組，即name相同的一組複選按鈕，複選按鈕表單元素的元素值由value屬性顯式設置，表達提交時，所有選中項的value和name被打包發送不顯式設置value 。複選框的checked屬性表示是否被選中，<input type=checkbox checked />或者<input type=checkbox checked=checked />(推薦)checked、readonly等這種一個可選值的屬性都可以省略屬性值。

 <input type =checkbox name=language value=Java/> <input type =checkbox name=language value=C/> <input type =checkbox name=language value=C#/>

隱藏域通常用於向服務器提交不需要顯示給用戶的信息。

 <input type=hidden name=隱藏域/>

使用file，則form的enctype必須設置為multipart/form-data，method屬性為POST。

 <input name=uploadedFile id=uploadedFile type=file size=60 accept=text/*/>

<select>標記創建一個列錶框,<option>標記創建一個列表項,<select>與嵌套的<option>一起使用，共同提供在一組選項中進行選擇的方式。

將一個option設置為選中：<option selected>北京</option>或者<option selected=selected>北京</option>(推薦方式)就可以將這個項設定為選擇項。如何實現不選擇，添加一個<option value=-1>--不選擇--<option>，然後編程判斷select選中的值如果是-1就認為是不選擇。

select分組選項，可以使用optgroup對數據進行分組，分組本身不會被選擇，無論對於下拉列表還是列錶框都適用。

<select>標記加上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>

多行文本<textarea>創建一個可輸入多行文本的文本框,<textarea>沒有value屬性,<textarea>文本</textarea>，cols=50、rows=15屬性表示行數和列數,不指定則瀏覽器採取默認顯示。

 <textarea name=textareaContent rows= 20 cols=50 > 多行文本框的初始顯示內容</textarea>

在<input type=text>前可以寫普通的文本來修飾，但是單擊修飾文本的時候input並不會得到焦點，而用label則可以，for屬性指定要修飾的控件的id，<label for= txt1 >內容</label>；,然後按下alt+u(了解)。 accesskey=u，label的另一個屬性。注意：要為被修飾的控件設置一個唯一的id。我覺得<label></label>標籤對<input type=radio/>和<input type=checkbox/>這兩個標籤是非常有用的。

 <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>

fieldset標籤將控件劃分一個區域，看起來更規整。

 <fieldset> <legend>愛好</legend> <input type=checkbox value=籃球/> <input type=checkbox value=爬山/> <input type=checkbox value=閱讀/> </fieldset>

當用戶單擊<inputt type=submit/>的提交按鈕時，表單數據會提交給<form>標籤的action屬性所指定的服務器處理程序。中文IE下默認按鈕文本為提交查詢，可以設置value屬性修改按鈕的顯示文本。

 <input type=submit value=提交/>

當用戶單擊<input type=reset/>按鈕時，表單中的值被重置為初始值。在用戶提交表單時，重置按鈕的name和value不會提交給服務器。

 <input type=reset value=重置按鈕/>

普通按鈕通常用於單擊執行一段腳本代碼。

 <input type=button value=普通按鈕/>

圖像按鈕的src屬性指定圖像源文件，它沒有value屬性。圖像按鈕可代替<input type=submit/>，而現在也可以通過css直接將<input type=submit/>按鈕的外觀設置為一幅圖片。

 <input type=image src=bg.jpg />

該示例是使用表單實現的一個簡單的註冊頁面，使用表格佈局。

 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 01 Transitional//EN http://wwwworg/TR/html4/loosedtd> <html> <head> <title>註冊頁面</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> 確認密碼： </td> <td> <input type=password /> </td> </tr> <tr> <td> 請選擇市： </td> <td> <select> <optgroup label=中國> <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> 請選擇性別： </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> 請選擇職業： </td> <td> <input type=radio id=student name= profession /><label for=student>學生</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> 請選擇愛好： </td> <td> <fieldset> <legend>你的愛好</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>上網</label> </fieldset> </td> </tr> <tr> <td> 備註： </td> <td> <textarea cols=30>這裡是備註內容</textarea> </td> </tr> < tr> <td> &nbsp; </td> <td> <input type=submit value=提交/> <input type=reset value=重置/> </td> </tr> </table> </form > </body> </html>