html学习之下拉列表框 

 1 <body>
 2 下拉列表框(单选):
 3     <select name="select1">
 4         <optgroup label="数码产品">
 5             <option value="">数码相机</option>
 6             <option value="">手机通讯</option>
 7             <option value="">电脑平板</option>
 8         </optgroup>
 9         <optgroup label="生鲜食材">
10             <option value="">原生海鲜</option>
11             <option value="">有机果蔬</option>
12         </optgroup>
13     </select>
14 
15     多行列表框(单选)：
16     <select name="select2" size="2">
17         <optgroup label="数码产品">
18             <option value="">数码相机</option>
19             <option value="">手机通讯</option>
20             <option value="">电脑平板</option>
21         </optgroup>
22         <optgroup label="生鲜食材">
23             <option value="">原生海鲜</option>
24             <option value="">有机果蔬</option>
25         </optgroup>
26     </select>
27     多行列表框(多选)：
28     <select name="select2" size="6" multiple>
29         <optgroup label="数码产品">
30             <option value="">数码相机</option>
31             <option value="">手机通讯</option>
32             <option value="">电脑平板</option>
33         </optgroup>
34         <optgroup label="生鲜食材">
35             <option value="">原生海鲜</option>
36             <option value="">有机果蔬</option>
37         </optgroup>
38     </select>
39 </body>


运行结果如下：

下拉列表框(单选):

多行列表框(单选)：

多行列表框(多选)：

总结：注意三种列表框的区分，根据实际需求选择适合的一种，灵活运用

posted @ 2017-07-18 22:45  一码定乾坤  阅读(315)  评论(0)  编辑  收藏  举报