0
点赞
收藏
分享

微信扫一扫

select下拉表单

佛贝鲁先生 2022-01-16 阅读 80
html前端

1.应用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用

<select>表单控件定义下拉列表

语法:

<select>

    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>

  ....
</select>

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select下拉表单</title>
</head>

<body>
       <form> 
            
            籍贯  
            <select>
                 <option>北京</option>
                 <option>吉林</option>
                 <option>长春</option>
            </select>    

        </form>
</body>

</html>

运行效果:

 2.<select>中至少包含一对<option>

3.在<option>中定义selected="selected"时,当前项即为默认选中项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select下拉表单</title>
</head>

<body>
       <form> 
            
            籍贯  
            <select>
                 <option>北京</option>
                 <option selected="selected">吉林</option>
                 <option>长春</option>
            </select>    

        </form>
</body>

</html>

运行效果:

 

举报

相关推荐

0 条评论