2.6　表單

現實中的表單類似我們去銀行辦理信用卡填寫的單子。在我們設計的網頁中，也需要跟用戶進行交互，收集用戶資料，此時也需要表單。表單在網頁中主要負責數據采集，它用<form>標簽定義。用戶輸入的信息都要包含在<form>標簽中，通過按鈕提交后，<form>、</form>之間包含的數據將被提交到服務器或者電子郵件里。

表單在網頁中用來供訪問者填寫信息，從而能采集客戶端信息，使網頁具有交互的功能。一般是將表單設計在一個HTML文檔中，當用戶填寫完信息后執行提交（submit）操作，于是表單的內容就從客戶端的瀏覽器傳送到服務器端，經過服務器上的ASP或PHP等處理程序處理后，再將用戶所需信息傳送回客戶端的瀏覽器上，這樣網頁就具有了交互性。表單應用的場景一般有登錄注冊、搜索框等，如圖2-35所示。

在HTML中，一個完整的表單通常由表單控件（表單元素）、提示信息和表單域3部分構成，如圖2-36所示。

對表單構成中的表單控件、提示信息和表單域的具體解釋如下。

（1）表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、搜索框等。

（2）提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。

（3）表單域：指<form>標簽本身，它是一個包含表單元素的區域。相當于一個容器，用來容納所有的表單控件和提示信息，可以通過它處理表單數據所用程序的URL網址，定義數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器。

2.6.1　表單標簽<form>

表單<form>標簽是成對標簽，用于定義一個完整的表單框架，其內部所包含的各式各樣的表單控件數據將被完整地提交給服務器。

表單的基本語法格式如下：

表單標簽的常用屬性主要有name、action、method、enctype等，其屬性、取值及描述如表2-16所示。

method屬性用于設置表單數據的提交方式，其取值為get或post，二者的區別如下：

（1）get方式提交的數據參數會直接拼接在URL后面，直接在瀏覽器網址欄可以看到全部內容，而post方式則看不到。

（2）get方式一般用于提交少量數據，最多提交2KB數據；post方式用來提交大量數據，post理論上對數據量沒有限制，完全取決于服務器的限制要求。

（3）post方式適用于安全級別相對較高的數據，而get方式相對不安全。

enctype屬性用于規定表單數據發送時的編碼方式，有以下3種屬性值。

（1）text/plain：主要用于向服務器傳遞大量文本數據，比較適用于電子郵件的應用。

（2）multipart/form-data：上傳二進制數據，只有使用了multipart/form-data才能完整地對文件數據進行上傳操作。

（3）application/x-www-form-urlencoded：是其默認值。該屬性主要用于處理少量文本數據的傳遞。在向服務器發送大量文件（包含非ASCII字符的文本或二進制數據）時效率很低。

單純的<form>標簽不包含任何可視化內容，需要與表單組件配合使用達到完整的表單效果。

2.6.2　輸入標簽<input>

<input>標簽為單標簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型，如文本輸入框、密碼框、單選和復選框等。除了type屬性之外，<input>標簽還可以定義很多其他的屬性，其常用屬性如表2-17所示。

<input>標簽的基本語法格式如下：

1．單行文本框

在<input>標簽中，type的屬性值為text時表示單行文本輸入框，這也是type屬性的默認值。這是見得最多也是使用最多的屬性值，例如登錄時輸入用戶名，注冊時輸入電話號碼、電子郵件、家庭住址等。

基本語法格式如下：

單行文本的name屬性值必須是唯一的，可以使用size屬性將文本框可見字符的寬度設置為20，使用maxlength屬性設置最多允許輸入10個字符。默認情況下，單行文本框首次加載時內容為空，可以為其value屬性預設初始文本，代碼如下：

2．密碼框

在<input>標簽中，type的屬性值為password時表示密碼框，和單行文本框最大的區別是當在此輸入框輸入信息時顯示為保密字符，其余特征和單行文本框相同，如例2-27所示。

基本語法如下：

【例2-27】　用戶信息輸入

在瀏覽器中的顯示效果如圖2-37所示。

注意：表單控件要想正確提交，必須設置name屬性。

3．單選按鈕

在<input>標簽中，type的屬性值為radio時表示單選按鈕，默認樣式是小圓圈，通常出現在多選一的頁面設定中。

基本語法格式如下：

多個radio類型的按鈕可以組合在一起使用，為它們添加相同的name屬性值即可表示這些單選按鈕屬于同一個組。name值一定要相同，否則就不能多選一，其中value屬性值為該表單元素在提交數據時傳遞的數據值，示例代碼如下：

單選按鈕可以使用checked屬性設置默認選項。checked屬性的完整寫法為checked="checked"，可簡寫為checked。如果沒有使用checked屬性，則首次加載時所有選項均處于未被選中狀態，示例代碼如下：

注意：只能為單選按鈕組的其中一個選項使用checked屬性。

4．復選框

在<input>標簽中，type的屬性值為checkbox時表示復選框，復選框也叫多選框。

基本語法格式如下：

用戶可以選擇多個選項，其中value屬性中的值用來設置用戶選中該項目后提交到服務器中的值，name為復選框的名稱，相同的name屬性值即可表示這些復選框屬于同一個組，即使在同一個組內復選框也允許多選，而且在復選框中允許多個選項同時使用checked屬性，并且允許默認選中多個選項，示例代碼如下：

復選框與單選按鈕的應用如例2-28所示。

【例2-28】　復選框與單選按鈕的應用

在瀏覽器中的顯示效果如圖2-38所示。

5．提交按鈕

在<input>標簽中，type的屬性值為submit時表示提交按鈕，在單擊“提交”按鈕時可以向服務器發送表單數據，數據會發送到表單的action屬性中指定的頁面，value屬性中的值為按鈕上顯示的文字。

基本語法格式如下：

如果不設置value屬性值，則它的初始值為“提交查詢按鈕”。

6．重置按鈕

在<input>標簽中，type的屬性值為reset時表示重置按鈕，重置按鈕的作用是單擊按鈕之后表單會刷新回到默認狀態，清空表單中所有的數據。在value屬性中輸入的值為按鈕上顯示的文本。

基本語法格式如下：

7．普通按鈕

在<input>標簽中，type的屬性值為button時表示普通按鈕，value屬性值為按鈕上顯示的文本。

基本語法格式如下：

該按鈕在單擊后無任何效果，需要和JS腳本配合使用。可以為其添加onclick事件，當用戶單擊按鈕時觸發事件并執行代碼，示例代碼如下：

8．圖片按鈕

在<input>標簽中，type的屬性值為image時表示圖片按鈕，這個功能是將圖片轉換為圖片形式按鈕，該按鈕的單擊效果與submit按鈕的單擊效果完全一樣，也是用于表單數據的提交。

基本語法格式如下：

圖片提交按鈕需要配合src和alt屬性使用，其中src是圖片的路徑，alt屬性是圖片無法正常顯示時的替代文本內容，示例代碼如下：

使用<input>標簽中的image類型生成圖片提交按鈕，可以替代純文字的submit按鈕，如例2-29所示。

【例2-29】　3種按鈕的應用

在瀏覽器中的顯示效果如圖2-39所示。

當單擊圖2-39（a）中的“提交”或圖片“登錄”按鈕時會跳轉到百度頁面。輸入的信息數據以“name屬性值=value屬性值”（鍵-值對）形式提交于服務器中，如username=admin。

注意：表單控件要想正確提交，必須設置name屬性。用戶在控件中輸入的數據默認會賦值給value屬性。

9．文件上傳

在<input>標簽中，type的屬性值為file時表示文件上傳，使用戶可以選擇一個或多個元素以提交表單的方式上傳到服務器。

基本語法格式如下：

除了被所有<input>標簽共享的公共屬性，file類型的<input>標簽還支持下列屬性，如表2-18所示。

file類型的<input>標簽特有屬性的詳細講解如下。

（1）accept：accept屬性是一個字符串，它定義了文件input應該接受的文件類型，示例代碼如下：

（2）capture：capture屬性指出了文件input是圖片還是視頻／音頻類型，如果存在，則請求使用設備的媒體捕獲設備（如攝像機），而不是請求一個文件輸入。

（3）files：FileList對象每個已選擇的文件。如果multiple屬性沒有指定，則這個列表只有一個成員。

（4）multiple：當將布爾類型屬性指定為multiple時，文件input允許用戶選擇多個文件。用戶可以用他們選擇的平臺允許的任何方式從文件選擇器中選擇多個文件（如按住Shift或Ctrl鍵，然后單擊）。如果只想讓用戶為每個<input>選擇一個文件，則可省略multiple屬性。

讓我們來看一個完整文件上傳的示例，如例2-30所示。

【例2-30】　多格式文件上傳應用

在瀏覽器中的顯示效果如圖2-40所示。

10．隱藏域

在<input>標簽中，type的屬性值為hidden時表示隱藏域，隱藏域在頁面中對于用戶來講是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，以利于被處理表單的程序所使用。

基本語法格式如下：

瀏覽者單擊“發送”按鈕發送表單時，隱藏域的信息也被一起發送到服務器。有些時候我們要給用戶一信息，讓他在提交表單時確定用戶的身份，如例2-31所示。

【例2-31】　隱藏域的應用

在瀏覽器中的顯示效果如圖2-41所示。

2.6.3　標記標簽<label>

在HTML中<label>標簽不會向用戶展示任何特殊內容，它的作用是把自己與其他標簽“綁定”起來，也可以說是與其他元素關聯到一起。它提升了用戶的使用體驗，當用戶單擊由<label>元素定義的文本內容時，與該文本內容關聯的輸入控件將獲得焦點。

<label>與其他元素關聯的方式有以下兩種。

（1）顯式關聯：顯式關聯只要<label>的"for"屬性值和目標標簽的ID屬性值一致即可。

（2）隱式關聯：隱式關聯可通過標簽嵌套完成。

1．顯式關聯

一個具有兩個文本輸入框及相關標簽（label）的HTML表單，示例代碼如下：

當單擊文本內容或文本框時都會在文本框中聚焦，這就是<label>標簽的功能。

2．隱式關聯

現在把<input>標簽嵌套到<label>標簽中以實現隱式關聯，示例代碼如下：

2.6.4　多行文本標簽<textarea>

在使用表單時，例如姓名、年齡字段一般使用單行文本框，但是當涉及描述信息且內容比較多時，單行文本框很有可能放不下所有的內容，這時就需要用到多行文本框。

在HTML中，使用<textarea>標簽來表示多行文本框，又叫作文本域。與其他<input>標簽不同，<textarea>標簽是閉合標簽，它包含起始標簽和結束標簽，文本內容需要寫在兩個標簽中間。

具體語法格式如下：

文本域<textarea>的屬性解釋：

（1）同所有表單元素相同，文本域要想正確提交數據，也必須設置name屬性。

（2）cols屬性用來指定每行可以顯示的字符數，也就是文本域的可見寬度。一般情況下，如果內容超出文本域寬度，會自動換行顯示。

（3）rows屬性用來設置文本域的可見行數，也就是文本域的高度。當文本內容超出設置高度時，會出現縱向滾動條。用戶拖動滾動條可以查看全部內容。

默認情況下，<textarea>標簽形成的多行文本框是可編輯狀態，可以使用readonly屬性將文本域設置為只讀狀態，或使用disabled屬性禁用該文本域，如例2-32所示。

【例2-32】　文本域的應用

在瀏覽器中的顯示效果如圖2-42所示。

通過運行結果可以發現，文本域的右下角有一個收縮按鈕，拖曳該按鈕可以手動改變文本域的寬和高。

2.6.5　下拉列表標簽<select>

下拉列表是網頁中一種最節省頁面空間的選擇方式，最常見的用法是<select>標簽配合<option>標簽使用，形成下拉菜單。

基本語法格式如下：

<select>標簽和<option>標簽的屬性、取值及描述如表2-19所示。

當下拉選項比較多且需要進行分類時，可以使用<optgroup>標簽定義選項組。<optgroup>標簽有兩個屬性，如表2-20所示。

具體語法格式，示例代碼如下：

使用列表<select>標簽配合選項<option>標簽、選項組</optgroup>標簽可形成不同樣式的列表菜單，如例2-33所示。

【例2-33】　列表標簽應用

在瀏覽器中的顯示效果如圖2-43所示。

2.6.6　域標簽<fieldset>

<fieldset>標簽可將表單內的相關元素分組，通常和<legend>標簽一起用，<legend>標簽定義了<fieldset>的提示信息。

具體語法格式如下：

示例顯示效果如圖2-44所示。

這個標簽主要用于頁面元素的分組，因為現在流行的頁面布局方式是DIV+CSS，所以這些傳統的HTML標簽應用的機會已經非常少了。

2.6.7　綜合實戰

以“阿里巴巴注冊頁面”為例，其頁面顯示效果如圖2-45所示。

頁面整體采用表格布局來完成頁面設計，注冊頁面使用表單和表單控件實現，實現代碼如下：