5.2 表單基本元素的使用

表單元素是能夠讓用戶在表單中輸入信息的元素，常見的有文本框、密碼框、下拉菜單、單選框、復選框等。本節主要講述表單基本元素的使用方法和技巧。

5.2.1 單行文本輸入框text

文本框是一種讓訪問者自行輸入內容的表單對象，通常被用來填寫單個字或者簡短的回答，如用戶姓名和地址。代碼格式如下：

     <input type="text" name="..." size="..." maxlength="..." value="...">

其中，type="text"定義單行文本輸入框；name屬性定義文本框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；size屬性定義文本框的寬度，單位是單個字符寬度；maxlength屬性定義最多輸入的字符數；value屬性定義文本框的初始值。

【例5.2】（實例文件：ch05\5.2.html）

在IE 11.0中的瀏覽效果如圖5-2所示，顯示兩個單行文本輸入框。

圖5-2 單行文本輸入框

5.2.2 多行文本框標記<textarea>

多行文本框標記<textarea>主要用于輸入較長的文本信息，代碼格式如下：

     <textarea name="..." cols="..." rows="..." wrap="..."></textarea >

其中，name屬性定義多行文本框的名稱，要保證數據的準確采集，必須定義一個獨一無二的名稱；cols屬性定義多行文本框的寬度，單位是單個字符寬度；rows屬性定義多行文本框的高度，單位是單個字符高度；wrap屬性定義輸入內容大于文本域時顯示的方式。

【例5.3】（實例文件：ch05\5.3.html）

在IE 11.0中的瀏覽效果如圖5-3所示，顯示多行文本框。

圖5-3 多行文本框

5.2.3 密碼輸入框password

密碼輸入框是一種特殊的文本域，主要用于輸入一些保密信息。當網頁瀏覽者輸入文本時，顯示的是黑點或者其他符號，這樣就增加了輸入文本的安全性，代碼格式如下：

     <input type="password" name="..." size="..." maxlength="...">

其中，type="password"定義密碼框；name屬性定義密碼框的名稱，要保證唯一性；size屬性定義密碼框的寬度，單位是單個字符寬度；maxlength屬性定義最多輸入的字符數。

【例5.4】（實例文件：ch05\5.4.html）

在IE 11.0中的瀏覽效果如圖5-4所示，輸入用戶名和密碼時可以看到密碼以黑點的形式顯示。

圖5-4 密碼輸入框

5.2.4 單選按鈕radio

單選按鈕主要是讓網頁瀏覽者在一組選項里只能選一個，代碼格式如下：

     <input type="radio" name="..." value = "...">

其中，type="radio"定義單選按鈕；name屬性定義單選按鈕的名稱，單選按鈕都是以組為單位使用的，在同一組中的單選項都必須用同一個名稱；value屬性定義單選按鈕的值，在同一組中它們的值必須是不同的。

【例5.5】（實例文件：ch05\5.5.html）

在IE 11.0中的瀏覽效果如圖5-5所示，有5個單選按鈕，用戶只能同時選中其中一個單選按鈕。

圖5-5 單選按鈕

5.2.5 復選框checkbox

復選框主要是讓網頁瀏覽者在一組選項里可以同時選擇多個選項。每個復選框都是一個獨立的元素，都必須有一個唯一的名稱，代碼格式如下：

     <input type="checkbox" name="…" value ="…">

其中，type="checkbox"定義復選框；name屬性定義復選框的名稱，在同一組中的復選框都必須用同一個名稱；value屬性定義復選框的值。

【例5.6】（實例文件：ch05\5.6.html）

在IE 11.0中的瀏覽效果如圖5-6所示，其中有5個復選框，其中【黑客攻防】復選框被默認選中。

圖5-6 復選框的效果

5.2.6 選擇列表標記<select>

選擇列表主要用于在有限的空間里設置多個選項，既可以用作單選，也可以用作多選，代碼格式如下：

     <select name="..." size="..." multiple>
     <option value="..." selected>
     ...
     </option>
      ...
     </select>

其中，name屬性定義選擇列表的名稱；size屬性定義選擇列表的行數；multiple屬性表示可以多選，如果不設置該屬性，就只能單選；value屬性定義選擇項的值；selected屬性表示默認已經選擇本選項。

【例5.7】（實例文件：ch05\5.7.html）

在IE 11.0中的瀏覽效果如圖5-7所示，在選擇列表框內顯示為3行選項，用戶可以按住Ctrl鍵選擇多個選項。

圖5-7 選擇列表的效果

5.2.7 普通按鈕button

普通按鈕用來控制其他定義了腳本的處理工作，代碼格式如下：

     <input type="button" name="..." value="..." onclick="...">

其中，type="button"定義普通按鈕；name屬性定義普通按鈕的名稱；value屬性定義按鈕的顯示文字；onclick屬性表示單擊行為，也可以通過指定腳本函數來定義按鈕的行為。

【例5.8】（實例文件：ch05\5.8.html）

在IE 11.0中的瀏覽效果如圖5-8所示，單擊【單擊我】按鈕，即可實現將文本框1中的內容復制到文本框2中。

圖5-8 單擊按鈕后的復制效果

5.2.8 提交按鈕submit

提交按鈕用來將輸入的信息提交到服務器，代碼格式如下：

     <input type="submit" name="..." value="...">

其中，type="submit"定義提交按鈕；name屬性定義提交按鈕的名稱；value屬性定義按鈕的顯示文字。通過提交按鈕可以將表單里的信息提交給表單里action所指向的文件。

【例5.9】（實例文件：ch05\5.9.html）

在IE 11.0中的瀏覽效果如圖5-9所示，輸入內容后單擊【提交】按鈕，即可將表單中的數據提交到指定的服務器中。

圖5-9 提交按鈕

5.2.9 重置按鈕reset

重置按鈕用來清空表單中輸入的信息，代碼格式如下：

     <input type="reset" name="..." value="...">

其中，type="reset"定義重置按鈕；name屬性定義重置按鈕的名稱；value屬性定義按鈕的顯示文字。

【例5.10】（實例文件：ch05\5.10.html）

在IE 11.0中的瀏覽效果如圖5-10所示，輸入內容后單擊【重置】按鈕，即可實現將表單中的數據清空的目的。

圖5-10 重置按鈕