HTML中表單可以用來(lái)搜集用戶(hù)各種類(lèi)型的輸入信息。表單實(shí)際上是包含表單元素的區(qū)域，在這個(gè)區(qū)域中的各種元素的輸入信息最終都將通過(guò)表單提交到程序腳本中。例如常見(jiàn)的有用戶(hù)登錄、注冊(cè)、發(fā)布文章等等，都是通過(guò)表單提交到動(dòng)態(tài)程序進(jìn)行處理的。本節(jié)主要講述表單和表單的元素，關(guān)于如何提交表單信息到動(dòng)態(tài)程序，將在以后的程序語(yǔ)言課中再來(lái)講述。
表單的區(qū)域是使用<form>標(biāo)簽定義表單的范圍，在<form></form>中的元素的值會(huì)被通過(guò)這個(gè)表單提交到對(duì)應(yīng)的地址中。
 
輸入信息
一般表單內(nèi)多以使用<input>標(biāo)簽收集用戶(hù)的輸入信息，其輸入類(lèi)型是由type決定的。
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。輸入類(lèi)型是由類(lèi)型屬性（type）定義的。常見(jiàn)的輸入類(lèi)型有文本域、單選按鈕、復(fù)選框、下拉菜單等等。
 
文本域
文本域可以為用戶(hù)提供輸入文字的功能，瀏覽器會(huì)將文本域解譯為一個(gè)矩形框，用戶(hù)將光標(biāo)移動(dòng)到該框體，并點(diǎn)擊即可將光標(biāo)移動(dòng)到框體內(nèi)。用戶(hù)可以在表單中鍵入字母、數(shù)字等內(nèi)容。
文本域的定義方法是在<input>標(biāo)簽中為type屬性設(shè)置text值

瀏覽器顯示如下：

單選按鈕
單選按鈕多數(shù)情況下出現(xiàn)在用戶(hù)注冊(cè)時(shí)錄入資料的選項(xiàng)中，該類(lèi)型多用戶(hù)只允許用戶(hù)選擇一項(xiàng)結(jié)果時(shí)使用。
單選按鈕的定義方法是在<input>標(biāo)簽中將type屬性的值設(shè)置為radio

瀏覽器中的顯示為：

復(fù)選框
復(fù)選框可讓用戶(hù)勾選某些對(duì)應(yīng)的一個(gè)或多個(gè)選項(xiàng)。常見(jiàn)的一般是在用戶(hù)登錄時(shí)，為用戶(hù)提供記住登錄帳號(hào)等功能。也可以在用戶(hù)調(diào)查的頁(yè)面中，搜集用戶(hù)的多項(xiàng)意見(jiàn)。
復(fù)選框定義方法是在<input>標(biāo)簽中將type屬性的值設(shè)置為checkbox

瀏覽器顯示如下：

下拉菜單
下拉菜單在信息選擇上與單選類(lèi)似，但是下拉菜單可以容納更多的信息。并且下拉菜單在選擇菜單值后可以執(zhí)行額外的腳本。
下拉菜單以<select>為起始標(biāo)簽，在select標(biāo)簽中的每一個(gè)option標(biāo)簽都是下拉菜單中的一個(gè)值。

瀏覽器顯示：

提交按鈕
提交按鈕是每個(gè)表單的必要組成部分。用戶(hù)將對(duì)應(yīng)的信息錄入完畢后，需要通過(guò)點(diǎn)擊提交按鈕觸發(fā)動(dòng)作，將表單的值提交到下一個(gè)頁(yè)面。當(dāng)<form>標(biāo)簽中的action屬性設(shè)置了對(duì)應(yīng)的提交地址時(shí)，提交按鈕會(huì)將該表單中獲得的所有數(shù)據(jù)提交到這個(gè)地址的頁(yè)面中。
提交按鈕的定義方法是在input標(biāo)簽中將type的值設(shè)置為submit。下面以前端開(kāi)拓者的搜索框?yàn)槔?，將提交地址設(shè)置為搜索頁(yè)面。

瀏覽器顯示如下：

結(jié)語(yǔ)：本節(jié)只是對(duì)常用的表單前端布局元素進(jìn)行基本的演示與講解。真正的表單運(yùn)用多在服務(wù)器程序語(yǔ)言中運(yùn)用，并且需要設(shè)置更多的參數(shù)與規(guī)則。本課中大家只需要了解表單的各元素實(shí)現(xiàn)排列即可，多數(shù)情況下已經(jīng)基本可以配合后臺(tái)程序員完成網(wǎng)站開(kāi)發(fā)。

最新評(píng)論