其他表單元素
1.textarea元素
當定義input控件的type屬性值為text時，可以創建一個單行文本輸入框。但是，如果需要輸入大量的信息，單行文本輸入框就不再適用，為此HTML語言提供了<textarea></textarea>標記。通過textarea控件可以輕松地創建多行文本輸入框，其基本語法格式如下：
| <textarea cols="每行中的字符數" rows="顯示的行數"> 文本內容 </textarea> |
<textarea>元素除了cols和rows屬性外，還擁有幾個可選屬性，分別為disabled、name和readonly，詳見下表2-7所示。
表2-7<textarea>元素屬性
| 屬性 | 屬性值 | 描述 |
| name | 由用戶自定義 | 控件的名稱 |
| readonly | readonly | 該控件內容為只讀（不能編輯修改） |
| disabled | disabled | 第一次加載頁面時禁用該控件（顯示為灰色） |
下面通過案例2-44來演示<textarea>元素的使用，如圖2-46所示。
例2-44 example2-44.html
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textarea控件</title>
</head>
<body>
<form action="#" method="post">
評論：<br />
<textarea cols="60" rows="8">
評論的時候，請遵紀守法并注意語言文明，多給文檔分享人一些支持。
</textarea><br />
<input type="submit" value="提交"/>
</form>
</body>
</html> |
圖2-46 textarea控件使用
圖2-47 select控件效果
1．select控件
瀏覽網頁時，經常會看到包含多個選項的下拉菜單，例如選擇所在的城市、出生年月、興趣愛好等。如圖2-47左所示即為一個下拉菜單，當點擊下拉三角時，會出現一個選擇列表，如圖2-47右所示。
使用select控件定義下拉菜單的基本語法格式如下：
| <select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select> |
在上面的語法中，<select></select>標記用于在表單中添加一個下拉菜單，<option></option>標記嵌套在<select></select>標記中，用于定義下拉菜單中的具體選項，每對<select></select>中至少應包含一對<option></option>。在HTML中，可以為<select>和<option>標記定義屬性，以改變下拉菜單的外觀顯示效果，具體如下表2-8所示。
表2-8 下拉菜單屬性
| 標記名 | 常用屬性 | 描述 |
| <select> | size | 指定下拉菜單的可見選項數（取值為正整數）。 |
| multiple | 定義multiple="multiple"時，下拉菜單將具有多項選擇的功能，方法為按住Ctrl鍵的同時選擇多項。 |
| <option> | selected | 定義selected =" selected "時，當前項即為默認選中項。 |
下面通過案例2-45來演示幾種不同的下拉菜單效果，如圖2-48所示。
例2-45 example45.html
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>select控件</title> </head> <body> <form action="#" method="post"> 所在校區： <select> <!--最基本的下拉菜單--> <option>-請選擇-</option> <option>北京</option> <option>上海</option> <option>廣州</option> <option>武漢</option> <option>成都</option> </select> 特長（單選）: <select> <option>唱歌</option> <option selected="selected">畫畫</option> <!--設置默認選中項--> <option>跳舞</option> </select> 愛好（多選）: <select multiple="multiple" size="4"> <!--設置多選和可見選項數--> <option>讀書</option> <option selected="selected">寫代碼</option> <!--設置默認選中項--> <option>旅行</option> <option selected="selected">聽音樂</option> <!--設置默認選中項--> <option>踢球</option> </select><br /><br /> <input type="submit" value="提交"/> </form> </body> </html> |
圖2-48 select控件效果
3.datalist元素
datalist元素用于定義輸入框的選項列表，列表通過datalist內的option元素進行創建。如果用戶不希望從列表中選擇某項，也可以自行輸入其他內容。datalist元素通常與input元素配合使用，來定義input的取值。在使用<datalist>標記時，需要通過id屬性為其指定一個唯一的標識，然后為input元素指定list屬性，將該屬性值設置為option元素對應的id屬性值即可。下面通過案例2-46來演示datalist元素的使用，如圖2-49所示。
例2-46 example46.html
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>datalist元素</title> </head> <body> <form action="#" method="post"> 請輸入用戶名：<input type="text" list="namelist"/> <datalist id="namelist"> <option>admin</option> <option>lucy</option> <option>lily</option> </datalist> <input type="submit" value="提交" /> </form> </body> </html> |
圖2-49 datalist元素
4.keygen元素
keygen元素用于表單的密鑰生成器，能夠使用戶驗證更為安全、可靠。當提交表單時會生成兩個鍵：一個是私鑰，它存儲在客戶端；一個是公鑰，它被發送到服務器，驗證用戶的客戶端證書。如果新的瀏覽器能夠對keygen元素的支持度再增強一些，則有望使其成為一種有用的安全標準。keygen元素擁有多個屬性，常用屬性及說明如下表2-9所示。
表2-9keygen元素屬性
| 屬性 | 說明 |
| autofocus | 使keygen字段在頁面加載時獲得焦點。 |
| challenge | 如果使用，則將keygen的值設置為在提交時詢問。 |
| disabled | 禁用 keytag 字段。 |
| form | 定義該 keygen 字段所屬的一個或多個表單。 |
| keytype | 定義 keytype。rsa 生成 RSA 密鑰。 |
| name | 定義 keygen 元素的唯一名稱。name 屬性用于在提交表單時搜集字段的值。 |
keygen元素示例代碼如下：
| 請選擇加密強度：<keygen name="security"/> |
5．output元素
output元素用于不同類型的輸出，可以在瀏覽器中顯示計算結果或腳本輸出。其常用屬性有3個，具體如下表2-10所示。
表2-10 output元素屬性
| 屬性 | 說明 |
| for | 定義輸出域相關的一個或多個元素。 |
| form | 定義輸入字段所屬的一個或多個表單。 |
| name | 定義對象的唯一名稱。 |
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
執行計算然后在 <output> 元素中顯示結果：
