天天看點

HTML 表單(form) 使用詳解

一、表單

  1.表單的作用

  html 表單用于接收不同類型的使用者輸入,使用者送出表單時向伺服器傳輸資料,進而實作使用者與web伺服器的互動。

  2.表單的工作機制

  

    

HTML 表單(form) 使用詳解

  3.表單定義(<form></form>标簽)

   html表單是一個包含表單元素的區域, 表單使用<form> 标簽建立。表單能夠包含 input

元素,比如文本字段、複選框、單選框、送出按鈕等等。表單還可以包含menus、textarea、fieldset、legend 和 label

元素。注意,<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")

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

    size:指定文本框的寬度,以字元個數為機關;在大多數浏覽器中,文本框的預設寬度是20個字元。

    value:指定文本框的預設值,是在浏覽器第一次顯示表單或者使用者單擊<input type="reset"/>按鈕之後在文本框中顯示的值。

    maxlength:指定使用者輸入的最大字元長度。

    readonly:隻讀屬性,當設定readonly屬性後,文本框可以獲得焦點,但使用者不能改變文本框中的value。

    disabled:禁用,當文本框被禁用時,不能獲得焦點,當然,使用者也不能改變文本框的值。并且在送出表單時,浏覽器不會将該文本框的值發送給伺服器。

  2.密碼框<input type="password"/> 

  3.單選按鈕<input type="radio"/>

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

  4.複選框<input type="checkbox"/>

  使用複選按鈕組,即name相同的一組複選按鈕,複選按鈕表單元素的元素值由value屬性顯式設定,表達送出時,所有選中項的value和name被打包發送

不顯式設定value。複選框的checked屬性表示是否被選中,<input type="checkbox" checked />或者<input type="checkbox" checked="checked" />(推薦)checked、readonly等這種一個可選值的屬性都可以省略屬性值。

  5.隐藏域<input type="hidden"/>

  隐藏域通常用于向伺服器送出不需要顯示給使用者的資訊。

  6.檔案上傳<input type="file"/>

  使用file,則form的enctype必須設定為multipart/form-data,method屬性為post。

  7.下拉框<select>标簽

  <select>标記建立一個清單框,<option>标記建立一個清單項,<select>與嵌套的<option>一起使用,共同提供在一組選項中進行選擇的方式。

  将一個option設定為選中:<option selected>北京</option>或者<option selected="selected">北京</option>(推薦方式)就可以将這個項設定為選擇項。如何實作“不選擇”,添加一個<option value="-1">--不選擇--<option>,然後程式設計判斷select選中的值如果是-1就認為是不選擇。

  select分組選項,可以使用optgroup對資料進行分組,分組本身不會被選擇,無論對于下拉清單還是清單框都适用。  

  <select>标記加上multiple屬性,可以允許多選(按ctrl鍵選擇)

HTML 表單(form) 使用詳解
HTML 表單(form) 使用詳解

  8.多行文本<textarea></textarea>

  多行文本<textarea>建立一個可輸入多行文本的文本框,<textarea>沒有value屬性,<textarea>文本</textarea>,cols=“50”、rows=“15”屬性表示行數和列數,不指定則浏覽器采取預設顯示。

  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"/>這兩個标簽是非常有用的。

   10.<fieldset></fieldset>标簽

  fieldset标簽将控件劃分一個區域,看起來更規整。

HTML 表單(form) 使用詳解
HTML 表單(form) 使用詳解

  11.送出按鈕<input type="submit"/>

  當使用者單擊<inputt type="submit"/>的送出按鈕時,表單資料會送出給<form>标簽的action屬性所指定的伺服器處理程式。中文ie下預設按鈕文本為“送出查詢”,可以設定value屬性修改按鈕的顯示文本。 

  12.重置按鈕<input type="reset"/>

  當使用者單擊<input type="reset"/>按鈕時,表單中的值被重置為初始值。在使用者送出表單時,重置按鈕的name和value不會送出給伺服器。

  13.普通按鈕<input type="button"/>

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

  14.圖像按鈕<input type="image"/>

  圖像按鈕的src屬性指定圖像源檔案,它沒有value屬性。圖像按鈕可代替<input type="submit"/>,而現在也可以通過css直接将<input type="submit"/>按鈕的外觀設定為一幅圖檔。

三、表單示例

  該示例是使用表單實作的一個簡單的注冊頁面,使用表格布局。

HTML 表單(form) 使用詳解
HTML 表單(form) 使用詳解