假設現在要在表單中添加這樣一項內容:瀏覽所在的城市。這裡不說全國的城市,只說省會以上的城市就有幾十個。假如以上面講過的單選按鈕的形式,將這些城市全部羅列在網頁上,將是一件不堪設想的事情。於是在表單的對像中出現了菜單和列表。說到底,菜單和列表主要是為了節省網頁的空間而產生的。
菜單是一種最節省空間的方式,正常狀態下只能看到一個選項,單擊按鈕打開菜單後才能看到全部的選項。列表可以顯示一定數量的選項,假如超出了這個數量,會自動出現滾動條,瀏覽者可以通過拖動滾動條來觀看各選項。通過<select>和<option>標記可以設計頁面中的菜單和列表效果。
這些屬性的含義如下表所示
| 菜單和列表標記 | 描述 |
|---|---|
| name | 菜單和列表的名稱 |
| size | 顯示的選項數目 |
| multiple | 列表中的項目多選 |
| value | 選項值 |
| selected | 默認選項 |
在頁面中插入菜單和列表。
01 <!-- ------------------------------ -->
02 <!-- 文件範例:11-16.htm -->
03 <!-- 文件說明:插入菜單和列表-->
04 <!-- ------------------------------ -->
05 <title>
06 <head>
07 <title>插入菜單和列表</title>
08 </head>
09 <body>
10 <h1>用戶調查</h1>
11 <Form action=mailto:[email protected] method=get name=invest>
12 請選擇你喜歡的音樂:<br>
13 <select name=music size=4 multiple>
14 <option value=rock Selected>搖滾樂
15 <option value=pop>流行樂
16 <option value=jazz>爵士樂
17 <option value=nation>民族樂
18 </select><br>
19 請選擇你居住的城市:<br>
20 <select name=city>
21 <option value=beijing selected>北京
22 <option value=shanghai>上海
23 <option value=nanjing>南京
24 <option value=guangzhou>廣州
25 </select>
26 <input type=submit name=submit value=提交表單>
27 </Form>
28 </body>
29 </html>
第13行定義了列表顯示項目數量為4,並能夠多項選擇。第14行到第17行定義了選項,其中搖滾樂為默認選擇,第20行定義了默認的菜單數量,第21行到24行定義選項,其中北京為默認選擇。 共2頁上一頁12下一頁