免费观看已满十八岁电视剧两人_国产+高潮+白丝+中岀+白_国产大片b站免费观看推荐_大尺度床震捏胸呻吟视频_亚洲AV永久无码天堂网国产_日本天堂免费网站_小雪yin荡公交嗯啊校花_向日葵视频色_好硬好大好爽18禁免费看男男

【六六互聯(lián)】長期出售【美國抗投訴服務(wù)器】【歐洲抗投訴服務(wù)器】【亞洲抗投訴服務(wù)器】
2022/08/11/ - - 0 條評論

其他表單元素

1.textarea元素

    當(dāng)定義input控件的type屬性值為text時(shí)，可以創(chuàng)建一個(gè)單行文本輸入框。但是，如果需要輸入大量的信息，單行文本輸入框就不再適用，為此HTML語言提供了<textarea></textarea>標(biāo)記。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：

 

<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">

    文本內(nèi)容

</textarea>

 

<textarea>元素除了cols和rows屬性外，還擁有幾個(gè)可選屬性，分別為disabled、name和readonly，詳見下表2-7所示。

表2-7<textarea>元素屬性                       

 

屬性

 		 

屬性值

 		 

描述

 
 

name

 		 

由用戶自定義

 		 

控件的名稱

 
 

readonly

 		 

readonly

 		 

該控件內(nèi)容為只讀（不能編輯修改）

 
 

disabled

 		 

disabled

 		 

第一次加載頁面時(shí)禁用該控件（顯示為灰色）

 

下面通過案例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">
 評論的時(shí)候，請遵紀(jì)守法并注意語言文明，多給文檔分享人一些支持。
     </textarea><br />
     <input type="submit"  value="提交"/>
 </form>
 </body>
 </html>

 

其他表單元素 

圖2-46 textarea控件使用

其他表單元素

其他表單元素

     圖2-47 select控件效果

1．select控件

瀏覽網(wǎng)頁時(shí)，經(jīng)常會看到包含多個(gè)選項(xiàng)的下拉菜單，例如選擇所在的城市、出生年月、興趣愛好等。如圖2-47左所示即為一個(gè)下拉菜單，當(dāng)點(diǎn)擊下拉三角時(shí)，會出現(xiàn)一個(gè)選擇列表，如圖2-47右所示。

使用select控件定義下拉菜單的基本語法格式如下：


 

<select>

 

         <option>選項(xiàng)1</option>

 

         <option>選項(xiàng)2</option>

 

         <option>選項(xiàng)3</option>

 

       ...

 

     </select>

 

在上面的語法中，<select></select>標(biāo)記用于在表單中添加一個(gè)下拉菜單，<option></option>標(biāo)記嵌套在<select></select>標(biāo)記中，用于定義下拉菜單中的具體選項(xiàng)，每對<select></select>中至少應(yīng)包含一對<option></option>。在HTML中，可以為<select>和<option>標(biāo)記定義屬性，以改變下拉菜單的外觀顯示效果，具體如下表2-8所示。

表2-8 下拉菜單屬性

                     

 

標(biāo)記名

 		 

常用屬性

 		 

描述

 
 

<select>

 		 

size

 		 

指定下拉菜單的可見選項(xiàng)數(shù)（取值為正整數(shù)）。

 
 

multiple

 		 

定義multiple="multiple"時(shí)，下拉菜單將具有多項(xiàng)選擇的功能，方法為按住Ctrl鍵的同時(shí)選擇多項(xiàng)。

 
 

<option>

 		 

selected

 		 

定義selected  =" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。

 

下面通過案例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">

 

    所在校區(qū)：

 

     <select>                              <!--最基本的下拉菜單-->

 

         <option>-請選擇-</option>

 

         <option>北京</option>

 

         <option>上海</option>

 

         <option>廣州</option>

 

         <option>武漢</option>

 

         <option>成都</option>

 

     </select>

 

     &nbsp;&nbsp;特長（單選）:

 

     <select>

 

         <option>唱歌</option>

 

         <option selected="selected">畫畫</option>  

 

<!--設(shè)置默認(rèn)選中項(xiàng)-->

 

         <option>跳舞</option>

 

     </select>

 

     &nbsp;&nbsp;愛好（多選）:

 

     <select multiple="multiple"    size="4">         

 

 <!--設(shè)置多選和可見選項(xiàng)數(shù)-->

 

         <option>讀書</option>

 

         <option selected="selected">寫代碼</option>

 

<!--設(shè)置默認(rèn)選中項(xiàng)-->

 

         <option>旅行</option>

 

         <option selected="selected">聽音樂</option>

 

<!--設(shè)置默認(rèn)選中項(xiàng)-->

 

         <option>踢球</option>

 

     </select><br /><br />

 

     <input type="submit" value="提交"/>

 

</form>

 

</body>

 

</html>

 

其他表單元素

圖2-48 select控件效果

3.datalist元素

datalist元素用于定義輸入框的選項(xiàng)列表，列表通過datalist內(nèi)的option元素進(jìn)行創(chuàng)建。如果用戶不希望從列表中選擇某項(xiàng)，也可以自行輸入其他內(nèi)容。datalist元素通常與input元素配合使用，來定義input的取值。在使用<datalist>標(biāo)記時(shí)，需要通過id屬性為其指定一個(gè)唯一的標(biāo)識，然后為input元素指定list屬性，將該屬性值設(shè)置為option元素對應(yīng)的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元素用于表單的密鑰生成器，能夠使用戶驗(yàn)證更為安全、可靠。當(dāng)提交表單時(shí)會生成兩個(gè)鍵：一個(gè)是私鑰，它存儲在客戶端；一個(gè)是公鑰，它被發(fā)送到服務(wù)器，驗(yàn)證用戶的客戶端證書。如果新的瀏覽器能夠?qū)eygen元素的支持度再增強(qiáng)一些，則有望使其成為一種有用的安全標(biāo)準(zhǔn)。keygen元素?fù)碛卸鄠€(gè)屬性，常用屬性及說明如下表2-9所示。

表2-9keygen元素屬性                          

 

屬性

 		 

說明

 
 

autofocus

 		 

使keygen字段在頁面加載時(shí)獲得焦點(diǎn)。

 
 

challenge

 		 

如果使用，則將keygen的值設(shè)置為在提交時(shí)詢問。

 
 

disabled

 		 

禁用 keytag 字段。

 
 

form

 		 

定義該 keygen  字段所屬的一個(gè)或多個(gè)表單。

 
 

keytype

 		 

定義 keytype。rsa 生成 RSA 密鑰。

 
 

name

 		 

定義 keygen 元素的唯一名稱。name 屬性用于在提交表單時(shí)搜集字段的值。

 

keygen元素示例代碼如下：

 

請選擇加密強(qiáng)度：<keygen  name="security"/>

 

5．output元素

output元素用于不同類型的輸出，可以在瀏覽器中顯示計(jì)算結(jié)果或腳本輸出。其常用屬性有3個(gè)，具體如下表2-10所示。

表2-10 output元素屬性

               

 

屬性

 		 

說明

 
 

for

 		 

定義輸出域相關(guān)的一個(gè)或多個(gè)元素。

 
 

form

 		 

定義輸入字段所屬的一個(gè)或多個(gè)表單。

 
 

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>

執(zhí)行計(jì)算然后在 <output> 元素中顯示結(jié)果：

其他表單元素