3.4 表單

表單是網頁中最常用的元素，是網站服務器端與客戶端之間溝通的橋梁。表單在網頁上隨處可見，如用于在登錄頁面輸入賬號、客戶留言、搜索產品等，如圖3-16中的留言板表單所示。

3.4.1 表單的基本概念

表單被廣泛用于各種信息的搜集與反饋。一個完整的交互表單由兩部分組成，一是客戶端包含的表單頁面，用于填寫瀏覽者進行交互的信息；另一個是服務器端的應用程序，用于處理瀏覽者提交的信息。當訪問者在Web瀏覽器中顯示的表單中輸入信息后，單擊“提交”按鈕，這些信息將被發送給服務器。服務器端腳本或應用程序將對這些信息進行處理，并將結果發送回訪問者。表單的工作原理如圖3-17所示。

3.4.2 表單標簽

網頁上由可輸入表項或選擇項目的控件所組成的欄目稱為表單。<form>標簽用于創建供用戶輸入的HTML表單。<form>標簽是成對出現的，在開始標簽<form>和結束標簽</form>之間的部分就是一個表單。

在一個HTML頁面中允許有多個表單，表單的基本語法及格式如下。

<form>標簽主要處理表單結果的處理和傳送，常用屬性的含義如下。

①name屬性：name屬性用于表單命名，表單命名之后就可以用JavaScript腳本語言對它進行控制。

②action屬性：action屬性用于指定表單處理的方式，即指定處理表單信息的服務器端應用程序，往往是E-mail地址或網址。

③method屬性：method屬性用于指定表單處理表單數據的方法，method的值可以為get或post，默認方式是get。

3.4.3 表單元素

表單是一個容器，可以存放各種表單元素，如按鈕、文本域等。表單中通常包含一個或多個表單元素，常見的表單元素見表3-1。

例如，常見的網絡問卷調查表單，其中包含的表單元素如圖3-18所示。

1.<input>標簽

<input>標簽用來定義用戶輸入數據的輸入字段，根據不同的type屬性，輸入字段可以是文本字段、密碼字段、復選框、單選按鈕、按鈕、隱藏域、電子郵件、日期時間、數值、范圍、圖像、文件等。<input>標簽的基本語法及格式如下。

<input>標簽常用屬性的含義如下。

①type屬性：指定要加入表單項目的類型（text，password，checkbox，radio，button，hidden，email，date pickers，number，range，image，file，submit或reset等）。

②name屬性：該表項的控制名，主要在處理表單時起作用。

③size屬性：輸入字段中的可見字符數。

④maxlength屬性：允許輸入的最大字符數。

⑤checked屬性：當頁面加載時是否預先選擇該input元素（適用于epub:type="checkbox"或type="radio"的情況）。

⑥step屬性：輸入字段的合法數字間隔。

⑦max屬性：輸入字段的最大值。

⑧min屬性：輸入字段的最小值。

⑨required屬性：設置必須輸入字段的值。

⑩pattern屬性：輸入字段的值的模式或格式。

?readonly屬性：設置字段的值無法修改。

?placeholder屬性：設置用戶填寫輸入字段的提示。

?autocomplete屬性：設置是否使用輸入字段的自動完成功能。

?autofocus屬性：設置輸入字段在頁面加載時是否獲得焦點（不適用于type="hidden"的情況）。

?disabled屬性：當頁面加載時是否禁用該input元素（不適用于type="hidden"的情況）。

（1）文字和密碼的輸入

使用<input>標簽的type屬性，可以在表單中加入表項，并控制表項的風格。如果type屬性值為text，則輸入的文本以標準的字符顯示；如果type屬性值為password，則輸入的文本顯示為“*”。在表項前應加入表項的名稱，如“您的姓名”等，以告訴瀏覽者在隨后的表項中應該輸入的內容。文本框和密碼框的格式如下。

（2）重置和提交

表單按鈕用于控制網頁中的表單。表單按鈕有4種類型，即提交按鈕、重置按鈕、普通按鈕和圖片按鈕。使用提交按鈕（submit）可以將填寫在表單中的內容發送到服務器；使用重置按鈕（reset）可以將表單的內容返回初始值；使用普通按鈕（button）可以制作一個用于觸發事件的按鈕；使用圖片按鈕（image）可以制作一個美觀的按鈕。

4種按鈕的格式如下。

（3）復選框和單選按鈕

在頁面中有些地方需要列出幾個項目，讓瀏覽者通過選擇鈕來選擇項目。選擇鈕可以是復選框（checkbox）或單選按鈕（radio）。用<input>標簽的type屬性可設置選擇鈕的類型；value屬性可設置該選擇鈕的控制初值，用以告訴表單制作者選擇結果；用checked屬性表示是否為默認選中項；name屬性是控制名，同一組的選擇鈕的控制名是一樣的。復選框和單選鈕的格式如下。

（4）電子郵件輸入框

當用戶需要通過表單提交電子郵件信息時，可以將<input>標簽的type屬性設置為email類型，即可設計用于包含Email地址的輸入框。當用戶提交表單時，會自動驗證輸入的Email地址的合法性。電子郵件輸入框的格式如下。

（5）日期時間選擇器

HTML5提供了日期時間選擇器date pickers，擁有多個可供選取日期和時間的新型輸入文本框，類型如下。

①date：選取日、月、年。

②month：選取月、年。

③week：選取周和年。

④time：選取時間（小時和分鐘）

⑤datetime：選取時間日、月、年（UTC世界標準時間）。

⑥datetime-local：選取時間日、月、年（本地時間）。

日期時間選擇器的語法格式如下。

（6）URL輸入框

當用戶需要通過表單提交網站的URL地址時，將<input>標簽的type屬性設置為url類型，即可設計用于輸入URL地址的輸入框。當用戶提交表單時，會自動驗證輸入的URL地址的合法性。格式如下。

（7）數值輸入框

當用戶需要通過表單提交數值型數據時，將<input>標簽的type屬性設置為number類型，即可設計用于包含數值型數據的輸入框。當用戶提交表單時，會自動驗證輸入的數值型數據的合法性。格式如下。

（8）范圍滾動條

當用戶需要通過表單提交限定在一定范圍內的數值型數據時，將<input>標簽的type屬性設置為range類型，即可設計用于設置輸入數值范圍的滾動條。當用戶提交表單時，會自動驗證輸入數值的范圍合法性。格式如下。

另外，用戶在使用數值輸入框和范圍滾動條時可以配合使用max（最大值）、min（最小值）、step（數字間隔）和value（默認值）屬性來限定數值。

2.選擇欄<select>標簽

當瀏覽者選擇的項目較多時，如果用選擇鈕來選擇，所占頁面的空間就會較大，這時可以用<select>標簽和<option>標簽來設置選擇欄。

（1）<select>標簽

<select>標簽的格式如下。

<select>標簽各個屬性的含義如下。

①size屬性：可選項，用于改變下拉列表的大小。size屬性的值是數字，表示顯示在下拉列表中選項的數目，當size屬性的值小于列表項數目時，瀏覽器會為該下拉列表添加滾動條，用戶可以使用滾動條來查看所有的選項，size屬性默認值為1。

②name屬性：選擇欄的名稱。

③multiple屬性：如果加上該屬性，表示允許用戶從列表中選擇多項。

（2）<option>標簽

<option>標簽的格式如下。

<option>標簽各個屬性的含義如下。

①selected屬性：用來指定選項的初始狀態，表示該選項在初始時被選中。

②value屬性：用于設置當該選項被選中并提交后，瀏覽器傳送給服務器的數據。

選擇欄有兩種形式：彈出式選擇欄和字段式選擇欄。字段式選擇欄與彈出式選擇欄的主要區別在于，前者在<select>標簽中的size屬性值取大于1的值，此值表示在選擇欄中不拖動滾動條可以顯示的選項的數目。

3.多行文本域<textarea>…</textarea>

意見反饋欄可以供瀏覽者發表意見和建議，所以提供的輸入區域一般較大，可以輸入較多的文字。使用<textarea>標簽可以定義高度超過一行的文本輸入框。<textarea>標簽是成對標簽，開始標簽<textarea>和結束標簽</textarea>之間的內容就是顯示在文本輸入框中的初始信息。格式如下。

其中的行數和列數是指不拖動滾動條就可看到的部分。

3.4.4 案例——制作愛心包裝會員注冊表單

前面講解了表單元素的基本用法，其中，文本字段比較簡單，也是最常用的表單標簽。選擇欄在具體的應用過程中有一定的難度，讀者需要結合實踐、反復練習才能夠掌握。下面通過一個綜合的案例將這些表單元素集成在一起，制作愛心包裝會員注冊表單。

【例3-13】 制作愛心包裝會員注冊表單。本例在瀏覽器中顯示的效果如圖3-19所示。

【說明】“職業”選擇欄使用的是彈出式選擇欄；“收入”選擇欄使用的是字段式選擇欄，<select>標簽中的size屬性值設置為3。

3.4.5 表單分組

大型表單容易在視覺上產生混淆，通過對表單分組可以將表單上的元素在形式上進行組合，達到一目了然的效果。常見的分組標簽有<fieldset>和<legend>標簽，格式如下。

其中，<fieldset>標簽可以看作表單的一個子容器，將所包含的內容以邊框環繞方式顯示；<legend>標簽則是為<fieldset>標簽邊框添加相關的標題。

【例3-14】 表單分組示例。本例文件3-14.html在瀏覽器中顯示的效果如圖3-20所示。

3.4.6 使用表格布局表單

從第3.4.4節的愛心包裝會員注冊表單案例中可以看出，由于表單沒有經過布局，頁面整體看起來不太美觀，如圖3-19所示。在實際應用中，可以采用以下兩種方法布局表單：一是使用表格布局表單，二是使用CSS樣式布局表單。本節主要講解使用表格布局表單。

【例3-15】使用表格布局制作愛心包裝聯系我們表單，表格布局示意圖如圖3-21所示，最外圍的虛線表示表單，表單內部包含一個6行3列的表格。其中，第一行和最后一行使用了跨2列的設置。本例文件3-15.html在瀏覽器中顯示的效果如圖3-22所示。

3.4.7 表單的高級用法

在某些情況下，用戶需要對表單元素進行限制，如設置表單元素為只讀或禁用。限制表單元素常應用于以下場景。

1）只讀場景：網站服務器不希望用戶修改的數據，這些數據在表單元素中顯示。例如，注冊或交易協議、商品價格等。

2）禁用場景：只有滿足某個條件后，才能選用某項功能。例如，只有用戶同意注冊協議后，才允許單擊“注冊”按鈕。

只讀和禁用兩種效果分別通過設置readonly和disabled屬性來實現。

【例3-16】 制作愛心包裝服務協議頁面，服務協議只能閱讀而不能修改，并且只有用戶同意注冊協議后，才允許單擊“注冊”按鈕。本例在瀏覽器中顯示的效果如圖3-23所示。

【說明】用戶勾選“同意以上協議”復選框并不能真正實現使“注冊”按鈕有效，還需要為復選框添加JavaScript腳本才能實現這一功能，這里只是講解如何使表單元素只讀和禁用。