天天看點

【表單】表單資料的送出和處理

1、什麼是表單

HTML 表單的主要作用是接收使用者的輸入,當使用者送出表單時,浏覽器将使用者在表單中輸入的資料打包,并發送給伺服器,進而實作使用者與Web伺服器的互動。

表單是控件的容器,一個表單由form元素、表單控件和表單按鈕三部分組成:

1) form元素:用來建立表單,并通過 action、method和enctype三個屬性,來設定表單的送出路徑、送出方式、編碼類型。

2) 表單控件:主要用來收集使用者資料,包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,也包括對表單控件進行分組顯示的 fieldset 和 legend 控件。根據功能的不同,input 控件又分為 text、password、radio、checkbod、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers等類型。

3) 表單按鈕:包括送出按鈕、重置按鈕和一般按鈕。送出按鈕和一般按鈕可用于把表單資料發送到伺服器,重置按鈕用于重置表單,把整個表單恢複到初始狀态。

任何HTML表單,都由 form 元素建立,即以

标簽開始, 标簽結束,在 和 之間,是表單所需要的控件和按鈕。

每一個表單控件都有一個 name 屬性,用于在送出表單時,對表單資料進行識别。通路者通過送出按鈕送出表單,表單送出後,他們填寫的資料就會發送到伺服器端進行處理。如,使用者登入的表單:

  1. action="login.asp" method="post">
  2.     使用者名: type="text" name="username" />
  3.     密碼: type="password" name="password" />
  4.     type="submit" value=" 登 錄 " />

上述代碼中,由 form 元素建立了一個表單,表單中包括兩個控件和兩個按鈕,分别是使用者名和密碼的輸入型控件,及登入和取消按鈕。登入按鈕為送出按鈕,取消按鈕為重置按鈕。運作結果如圖 3‑1 所示:

【表單】表單資料的送出和處理

圖3-1 使用者登入表單

當使用者點選登入按鈕後,則以 post 方式,将使用者名和密碼發送到伺服器端login.asp 檔案進行處理;如果使用者點選取消按鈕,則會清除使用者填寫的資料,将整個表單恢複到頁面初始加載時的狀态。

2、說明:

在表單中,我們可以輸入的元素大緻可以分成兩種:輸入指派和選擇指派。雖然有兩種,但是其最終結果卻是一樣的。都是先為一個變量指派,然後後将此變量傳到伺服器進行處理。

type="text" name="test_name" value="165">      
  • 1

  上面的執行個體中,test_name就是一個變量名,test_name的初始值就是value=“165”,當我們删除輸入框中的初始值,然後寫入新值的時候比如777,test_name的值變成了777,送出表單的時候,就會将變量test_name和其新指派送出到伺服器等。

type="radio" name="test_radio" value="not">
type="radio" name=" test_radio" value="yes">
      
  • 2
  • 3

  雖然是兩行代碼,但是這兩個單選框為一組,隻能選擇一個。兩個選項都是為 test_radio指派,所指派即每個選項 value 的值。表單送出時同樣會送出變量 test_radio及它的 value.

與ajax的相似之處:

【表單】表單資料的送出和處理

問題:有一個問題一定要明确,當我們不使用ajax送出資料的時候,送出表單時type=“submit”屬性是一定需要的,

因為這樣編譯器就已經封裝了向伺服器發送資料的方法,不再用我們自己編寫送出資料的方法。當點選送出按鈕之後,

編譯器自動将所有帶有type="submit"屬性的标簽的 (name,value)提取出來,組成Json串發送到伺服器。

3表單送出後,背景如何處理:

1、送出到JSP,jsp處理