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 屬性,用于在送出表單時,對表單資料進行識别。通路者通過送出按鈕送出表單,表單送出後,他們填寫的資料就會發送到伺服器端進行處理。如,使用者登入的表單:
- action="login.asp" method="post">
- 使用者名: type="text" name="username" />
- 密碼: type="password" name="password" />
- type="submit" value=" 登 錄 " />
上述代碼中,由 form 元素建立了一個表單,表單中包括兩個控件和兩個按鈕,分别是使用者名和密碼的輸入型控件,及登入和取消按鈕。登入按鈕為送出按鈕,取消按鈕為重置按鈕。運作結果如圖 3‑1 所示:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SYjNWN4kjZ2gjYzQWOjFDOxEDO0UTZ3UTOkJDMwYGM58CX3IzLclDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
圖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處理