3.3 表單元素

在上一章的塊級標簽中，已經講解了表單的工作原理和表單標簽的基本語法，本節將講解表單元素的基本用法。表單中通常包含一個或多個表單元素，常見的表單元素見表3-1。

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

3.3.1 <input>元素

<input>元素用來定義用戶輸入數據的輸入字段，根據不同的type屬性，輸入字段可以是文本字段、密碼字段、復選框、單選按鈕、按鈕、隱藏域、圖像、文件等。<input>元素的基本格式為：

<input>元素常用屬性的含義如下。

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

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

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

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

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

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

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

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

1.文字框

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

例如，以下輸入用戶名的文本框的代碼如下：

其中，type="text"表示<input>元素的類型為文本框，name="userName"表示文本框的名字為userName，size="18"表示文本框的寬度為18個字符，value="tom"表示文本框中初始顯示的內容為“肥貓”，頁面中的效果如圖3-12所示。

2.密碼框

將<input>元素type屬性值為password，則定義的表單元素為密碼框，輸入的文本顯示為“*”。密碼框的格式為：

例如，以下輸入用戶名的文本框的代碼如下：

其中，type="password"表示<input>元素的類型為密碼框，name="pass"表示密碼框的名字為pass，size="18"表示密碼框的寬度為18個字符，頁面中的效果如圖3-13所示。

3.按鈕

表單中的按鈕有4種類型，即重置按鈕、提交按鈕、普通按鈕和圖片按鈕。

（1）重置按鈕

如果瀏覽者想清除輸入到表單中的全部內容，可以使用<input>元素中的type屬性設置重置（reset）按鈕，以省去在重新輸入前，一項一項刪除的麻煩。重置按鈕的格式為：

當省略value的設置值時，重置按鈕的默認顯示為“重置”。

（2）提交按鈕

當瀏覽者完成表單的填寫，想要發送時，可使用<input>元素的type屬性設置的提交（submit）按鈕，將表單內容送給action屬性中的網址或函件信箱。提交按鈕的格式為：

當省略value的設置值時，提交按鈕的默認顯示為“提交”。

（3）普通按鈕

如果瀏覽者想制作一個用于觸發事件的普通按鈕，可使用<input>元素的type屬性設置普通（button）按鈕。普通按鈕的格式為：

（4）圖片按鈕

如果瀏覽者想制作一個美觀的圖片按鈕，可使用<input>元素的type屬性設置圖片（image）按鈕。圖片按鈕的格式為：

【演練3-7】制作不同類型的表單按鈕，本例文件3-7.html在瀏覽器中顯示的效果如圖3-14所示。

代碼如下：

如果用戶覺得上面的提交按鈕不太美觀，在實際應用中，可以用圖片按鈕代替，如圖3-15所示。實現圖片按鈕最簡單的方法就是配合使用type屬性和src屬性。例如，將上面定義“注冊”提交按鈕的代碼修改如下：

【說明】使用這種方法實現的圖片按鈕比較特殊，雖然type屬性沒有設置為“submit”，但仍然具有提交功能。

4.復選框

在頁面中有些地方需要列出多個選項，瀏覽者可以通過復選框來選擇其中的一項或多項。將<input>元素的type屬性設置為“checkbox”，則定義的表單元素為復選框。復選框的格式為：

其中，value屬性可設置復選框的提交值，用checked屬性表示是否為默認選中項，name屬性是復選框的名稱，同一組的復選框的名稱是一樣的。

例如，以下選擇“關注的最新櫥柜”復選框的代碼如下：

其中，“不銹鋼櫥柜”和“實木櫥柜”兩個復選框設置了checked="checked"默認選中屬性，頁面瀏覽后，這兩種櫥柜名稱前面的復選框自動勾選，如圖3-16所示。

5.單選按鈕

單選按鈕用于一組相互排斥的選項，組中的每個選項應具有相同的名稱，以確保瀏覽者只能選擇一個選項。單選按鈕的格式為：

其中，value屬性可設置單選按鈕的提交值，用checked屬性表示是否為默認選中項，name屬性是單選按鈕的名稱，同一組的單選按鈕的名稱是一樣的。

例如，以下選擇“最喜歡的櫥柜類型”單選按鈕的代碼如下：

其中，類型為“歐式系列”的單選按鈕設置了checked="checked"默認選中屬性，頁面瀏覽后，“歐式系列”的單選按鈕自動選中，如圖3-17所示。

6.隱藏域

網站服務器發送到客戶端的信息，除用戶直觀看到的頁面內容之外，可能還包含一些“隱藏”信息。例如，用戶登錄后的用戶名、用于區別不同用戶的用戶ID等。這些信息對于用戶可能沒用，但對網站服務器有用，一般將這些信息“隱藏”起來，而不在頁面中顯示。

將<input>元素的type屬性設置為hidden類型即可創建一個隱藏域。格式為：

例如，在登錄頁的表單中隱藏用戶的ID信息“u01”，代碼如下：

頁面瀏覽后，隱藏域信息并不顯示，如圖3-18所示，但能通過頁面的HTML代碼查看到。

7.文件域

文件域用于上傳文件，將<input>元素的type屬性設置為file類型即可創建一個文件域。文件域會在頁面中創建一個不能輸入內容的地址文本框和一個“瀏覽”按鈕。格式為：

【演練3-8】制作上傳櫥柜圖片的表單頁面，使用文件域上傳文件，用戶單擊“瀏覽”按鈕后，將彈出“選擇要加載的文件”對話框。選擇文件后，路徑將顯示在地址文本框中，頁面的顯示效果如圖3-19所示。

代碼如下：

【說明】需要注意的是，在設計包含文件域的表單時，由于提交的表單數據包括普通的表單數據和文件數據等多部分內容，所以必須設置表單的“enctype”編碼屬性為“multipart/form-data”，表示將表單數據分為多部分提交。

3.3.2 選擇欄<select>

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

<select>標簽的格式為：

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

size：取數字，表示在帶滾動條的下拉列表中一次可顯示的列表項數，默認值為1。

name：控制操作名。

multiple：加上本項表示可選多個選項，否則只能單選。

<option>標簽的格式為：

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

selected：加上本項表示該項是默認選中的。

value：指定控制操作的初始值。若省略，則初值為option中的內容表示選項值。

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

【演練3-9】制作“用戶年齡”問卷調查的下拉菜單，頁面加載時菜單顯示的默認選項為“20--35歲”，用戶可以單擊菜單下拉箭頭選擇其余的選項。本例文件3-9.html在瀏覽器中顯示的效果如圖3-20所示。

代碼如下：

【說明】菜單中的選項“20--35歲”設置了selected="selected"屬性值，因此，頁面加載時顯示的默認選項為“20--35歲”。

3.3.3 多行文本域<textarea>…</textarea>

在意見反饋欄中往往需要瀏覽者發表意見和建議，且提供的輸入區域一般較大，可以輸入較多的文字。使用<textarea>標簽可以設置允許成段文字的輸入，格式為：

其中的行數和列數是指不拖動滾動條就可看到的部分。另外，<textarea>…</textarea>標簽對中不能使用value屬性賦初始值。

例如，以下輸入“評論天地”多行文本域內容的代碼如下：

其中，cols="40"表示多行文本域的列數為40列，rows="4"表示多行文本域的行數為4行，效果如圖3-21所示。

3.3.4 表單的高級用法

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

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

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

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

【演練3-10】制作夢想櫥柜服務協議頁面，頁面瀏覽后，服務協議只能閱讀而不能修改，并且只有用戶同意注冊協議后，才允許單擊“注冊”按鈕，本例文件3-10.html在瀏覽器中顯示的效果如圖3-22所示。

代碼如下：

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

3.3.5 案例——制作夢想櫥柜會員注冊表單

在講解了以上表單元素的基礎上，下面通過一個綜合的案例將這些表單元素集成在一起，制作夢想櫥柜會員注冊表單。

【演練3-11】制作夢想櫥柜會員注冊表單，收集會員的個人資料。本例文件3-11.html在瀏覽器中顯示的效果如圖3-23所示。

代碼如下：

【說明】“職業”選擇欄使用的是字段式列表，其<select>標簽中的size屬性值設置為3，表示一次可顯示的列表項數為3，而“收入”選擇欄使用的是下拉菜單。

3.3.6 表單布局

從上面的夢想櫥柜會員注冊表單案例中可以看出，由于表單沒有經過布局，頁面整體看起來不太美觀。在實際應用中，可以采用以下兩種方法布局表單：一是使用表格布局表單，二是使用CSS樣式布局表單。本節主要結合上個章節講解的表格來實現表單的布局。

【演練3-12】使用表格布局的方法制作夢想櫥柜會員登錄表單，表格布局示意圖如圖3-24所示，最外圍的虛線表示表單，表單內部包含一個4行3列的表格，其中的第1行和第4行分別使用了跨2列的設置。頁面在瀏覽器中顯示的效果如圖3-25所示。

代碼如下：

【說明】

①在使用表格布局表單的應用中，要注意結合表單的數據信息計算表格布局所需要的行數和列數。

②在制作某些特殊元素的時候，往往需要使用表格的跨行跨列技術，例如，登錄圖片按鈕需要跨2列。

③當單元格內沒有布局的內容時，必須使用“空格”填充以實現布局效果。