一、表單
1.表單的作用
HTML 表單用於接收不同類型的用戶輸入,用戶提交表單時向服務器傳輸數據,從而實現用戶與Web服務器的交互。
2.表單的工作機制
3.表單定義(<form></form>標籤)
HTML表單是一個包含表單元素的區域, 表單使用<form> 標籤創建。表單能夠包含 <a target="_blank" title="HTML input 元素,比如文本字段、複選框、單選框、提交按鈕等等。表單還可以包含<a target="_blank" title="HTML menus、<a target="_blank" title="HTML textarea、<a target="_blank" title="HTML fieldset、<a target="_blank" title="HTML legend 和 <a target="_blank" title="HTML label 元素。注意,<form >元素是塊級元素,其前後會產生折行。
1 <form action="reg.ashx" method="post"> 2 <!--表單元素在這裏--> 3 </form>
3.表單屬性
action:規定當提交表單時,向何處發送表單數據。action取值爲:第一,一個URL(絕對URL/相對URL),一般指向服務器端一個程序,程序接收到表單提交過來的數據(即表單元素值)作相應處理。比如<form action="http://www.cnblogs.com/reg.ashx">,當用戶提交這個表單時,服務器將執行網址"http://www.cnblogs.com/"上的名爲"reg.ashx"的一般處理程序。第二,使用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。關於更多的各種method方式的區別,由於我目前對HTTP協議瞭解的不多,不敢妄下結論。很多園友的討論也好像不是很深入,大家爭論比較多。
請參見:http://www.cnblogs.com/nankezhishi/archive/2012/06/09/2542968.html
http://www.cnblogs.com/ldp615/archive/2012/07/27/http-get-post.html
http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
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中使用的。
二、表單元素
1.單行文本框<input type="text"/>(input 的type 屬性的默認值就是"text")
<input type = “text” name=“名稱”/>
以下是單行文本框的主要屬性:
size:指定文本框的寬度,以字符個數爲單位;在大多數瀏覽器中,文本框的缺省寬度是20個字符。
value:指定文本框的默認值,是在瀏覽器第一次顯示錶單或者用戶單擊<input type="reset"/>按鈕之後在文本框中顯示的值。
maxlength:指定用戶輸入的最大字符長度。
readonly:只讀屬性,當設置readonly屬性後,文本框可以獲得焦點,但用戶不能改變文本框中的value。
disabled:禁用,當文本框被禁用時,不能獲得焦點,當然,用戶也不能改變文本框的值。並且在提交表單時,瀏覽器不會將該文本框的值發送給服務器。
2.密碼框<input type="password"/>
<input type=“password” name=“名稱”/>
3.單選按鈕<input type="radio"/>
使用方式:使用name相同的一組單選按鈕,不同radio設定不同的value值,這樣通過取指定name的值就可以知道誰被選中了,不用單獨的判斷。單選按鈕的元素值由value屬性顯式設置,表單提交時,選中項的value和name被打包發送,不顯式設置value。
<input type=“radio” name=“gender” value=“male”/> <input type=“radio” name=“gender” value=“female”/>
4.複選框<input type="checkbox"/>
使用複選按鈕組,即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#”/>
5.隱藏域<input type="hidden"/>
隱藏域通常用於向服務器提交不需要顯示給用戶的信息。
<input type=“hidden” name=“隱藏域”/>
6.文件上傳<input type="file"/>
使用file,則form的enctype必須設置爲multipart/form-data,method屬性爲POST。
<input name="uploadedFile" id="uploadedFile" type="file" size="60" accept="text/*"/>
7.下拉框<select>標籤
<select>標記創建一個列表框,<option>標記創建一個列表項,<select>與嵌套的<option>一起使用,共同提供在一組選項中進行選擇的方式。
將一個option設置爲選中:<option selected>北京</option>或者<option selected="selected">北京</option>(推薦方式)就可以將這個項設定爲選擇項。如何實現“不選擇”,添加一個<option value="-1">--不選擇--<option>,然後編程判斷select選中的值如果是-1就認爲是不選擇。
select分組選項,可以使用optgroup對數據進行分組,分組本身不會被選擇,無論對於下拉列表還是列表框都適用。
1 <select name="country" size="10"> 2 <optgroup label="Africa"> 3 <option value="gam">Gambia</option> 4 <option value="mad">Madagascar</option> 5 <option value="nam">Namibia</option> 6 </optgroup> 7 <optgroup label="Europe"> 8 <option value="fra">France</option> 9 <option value="rus">Russia</option> 10 <option value="uk">UK</option> 11 </optgroup> 12 <optgroup label="North America"> 13 <option value="can">Canada</option> 14 <option value="mex">Mexico</option> 15 <option value="usa">USA</option> 16 </optgroup> 17 </select>
8.多行文本<textarea></textarea>
1 <textarea name=“textareaContent” rows=“ 20“ cols=“50” >
2 多行文本框的初始顯示內容 3 </textarea>
9.<label></label>標籤
在<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"/>這兩個標籤是非常有用的。
1 <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable> 2 <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label> 3 <input type="radio" name="sex" id="secret" value="2" /><label for="secret">保密</label>
10.<fieldset></fieldset>標籤
1 <fieldset> 2 <legend>愛好</legend> 3 <input type="checkbox" value="籃球" /> 4 <input type="checkbox" value="爬山" /> 5 <input type="checkbox" value="閱讀" /> 6 </fieldset>
11.提交按鈕<input type="submit"/>
當用戶單擊<inputt type="submit"/>的提交按鈕時,表單數據會提交給<form>標籤的action屬性所指定的服務器處理程序。中文IE下默認按鈕文本爲“提交查詢”,可以設置value屬性修改按鈕的顯示文本。
<input type="submit" value="提交"/>
12.重置按鈕<input type="reset"/>
當用戶單擊<input type="reset"/>按鈕時,表單中的值被重置爲初始值。在用戶提交表單時,重置按鈕的name和value不會提交給服務器。
<input type=“reset” value=“重置按鈕"/>
13.普通按鈕<input type="button"/>
普通按鈕通常用於單擊執行一段腳本代碼。
<input type="button" value="普通按鈕"/>
14.圖像按鈕<input type="image"/>
圖像按鈕的src屬性指定圖像源文件,它沒有value屬性。圖像按鈕可代替<input type="submit"/>,而現在也可以通過css直接將<input type="submit"/>按鈕的外觀設置爲一幅圖片。
<input type="image" src="bg.jpg" />
三、表單示例
該示例是使用表單實現的一個簡單的註冊頁面,使用表格佈局。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>註冊頁面</title> 5 <style type="text/css"> 6 table 7 { 8 width: 450px; 9 border: 1px solid red; 10 background-color: #FFCB29; 11 border-collapse: collapse; 12 } 13 td 14 { 15 width: 200; 16 height: 40px; 17 border: 1px solid black; 18 } 19 span 20 { 21 background-color: red; 22 } 23 </style> 24 </head> 25 <body style="background-color: blue; background-image: url(../圖片/bear.jpg); background-repeat: repeat;"> 26 <form name="registerform" id="form1" action="" method="post"> 27 <table align="center" cellspacing="0" cellpadding="0"> 28 <tr> 29 <td> 30 用戶名: 31 </td> 32 <td> 33 <input type="text" /> 34 </td> 35 </tr> 36 <tr> 37 <td> 38 密碼: 39 </td> 40 <td> 41 <input type="password" /> 42 </td> 43 </tr> 44 <tr> 45 <td> 46 確認密碼: 47 </td> 48 <td> 49 <input type="password" /> 50 </td> 51 </tr> 52 <tr> 53 <td> 54 請選擇市: 55 </td> 56 <td> 57 <select> 58 <optgroup label="中國"> 59 <option>甘肅省</option> 60 <option>河南省</option> 61 <option>上海市</option> 62 </optgroup> 63 <optgroup label="American"> 64 <option>California</option> 65 <option>Chicago</option> 66 <option>New York</option> 67 </optgroup> 68 </select> 69 </td> 70 </tr> 71 <tr> 72 <td> 73 請選擇性別: 74 </td> 75 <td> 76 <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable> 77 <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label> 78 <input type="radio" name="sex" id="secret" value="2" /><label for="secret">保密</label> 79 </td> 80 </tr> 81 <tr> 82 <td> 83 請選擇職業: 84 </td> 85 <td> 86 <input type="radio" id="student" name="profession" /><label for="student">學生</label> 87 <input type="radio" id="teacher" name="profession" /><label for="teacher">教師</label> 88 <input type="radio" id="others" name="profession" /><label for="others">其他</label> 89 </td> 90 </tr> 91 <tr> 92 <td> 93 請選擇愛好: 94 </td> 95 <td> 96 <fieldset> 97 <legend>你的愛好</legend> 98 <input type="checkbox" name="hobby" id="basketboll" checked="checked" /><label for="basketboll">打籃球</label> 99 <input type="checkbox" name="hobby" id="run" /><label for="run">跑步</label> 100 <input type="checkbox" name="hobby" id="read" /><label for="read">閱讀</label> 101 <input type="checkbox" name="hobby" id="surfing" /><label for="surfing">上網</label> 102 </fieldset> 103 </td> 104 </tr> 105 <tr> 106 <td> 107 備註: 108 </td> 109 <td> 110 <textarea cols="30">這裏是備註內容</textarea> 111 </td> 112 </tr> 113 <tr> 114 <td> 115 116 </td> 117 <td> 118 <input type="submit" value="提交" /> 119 <input type="reset" value="重置" /> 120 </td> 121 </tr> 122 </table> 123 </form> 124 </body> 125 </html>