一、下拉列表简介

在HTML中，下拉列表由select和option这两个标签配合使用来表示的。这一点跟无序列表很像，其中无序列表是由ul和li这两个标签配合使用来表示。为了更好地理解，我们可以把下拉列表看成是一种“特殊的无序列表”。

语法：

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>jQuery</option>
            <option>JavaScript</option>
            <option>Vue.js</option>
        </select>
    </form>
</body>
</html>

浏览器预览效果如下图所示。

分析：

下拉列表是最节省页面空间的一种方式，因为它在默认情况下只显示一个选项，只有点击后才会看到全部选项。当我们点击下拉列表后，全部选项就会显示出来，预览效果如下图所示。

二、select标签属性

在HTML中，select标签常用属性有两个，如下表所示。

表1 select标签常用属性
属性 说明
multiple 设置下拉列表可以选择多项
size 设置下拉列表显示几个列表项，取值为整数

举例：multiple属性

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select multiple>
            <option>HTML</option>
            <option>CSS</option>
            <option>jQuery</option>
            <option>JavaScript</option>
            <option>Vue.js</option>
            <option>HTML5</option>
            <option>CSS3</option>
        </select>
    </form>
</body>
</html>

浏览器预览效果如下图所示。

分析：

默认情况下，下拉列表只能选择一项，我们可以通过multiple属性设置下拉列表可以选择多项。想要选取多项，可以使用“Ctrl+鼠标左键”来选取。

下拉列表的multiple属性没有属性值，这是HTML5的最新写法，这个跟单选框中的checked属性是一样的。

举例：size属性

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select size="5">
            <option>HTML</option>
            <option>CSS</option>
            <option>jQuery</option>
            <option>JavaScript</option>
            <option>Vue.js</option>
            <option>HTML5</option>
            <option>CSS3</option>
        </select>
    </form>
</body>
</html>

浏览器预览效果如下图所示。

分析：

有些小伙伴将size取值为1、2、3时，会发现Chrome浏览器无效。这是因为Chrome浏览器最低是4个选项，我们只能选取4及以上数字。

三、option标签属性

在HTML中，option标签常用属性有两个，如下表所示。

表2 option标签常用属性
属性 说明
selected 是否选中
value 选项值

对于value属性，就不用多说了，几乎所有表单元素都有value属性，这个属性是配合JavaScript以及服务器进行操作的。

举例：selected属性

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select size="5">
            <option>HTML</option>
            <option>CSS</option>
            <option selected>jQuery</option>
            <option>JavaScript</option>
            <option>Vue.js</option>
            <option>HTML5</option>
            <option>CSS3</option>
        </select>
    </form>
</body>
</html>

浏览器预览效果如下图所示。

分析：

selected属性表示列表项是否被选中，它是没有属性值的，这也是HTML5的最新写法，这个跟单选框中的checked属性也是一样的。如果我们把size="5"去掉，此时预览效果如下图所示。

举例：value属性

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select size="5">
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
            <option value="jQuery">jQuery</option>
            <option value="JavaScript">JavaScript</option>
            <option value="vue.js">Vue.js</option>
            <option value="HTML5">HTML5</option>
            <option value="CSS3">CSS3</option>
        </select>
    </form>
</body>
</html>

浏览器预览效果如下图所示。

常见问题：

1、表单元素那么多，而且每一种自己还有好几个属性，应该怎么记忆呢？

对于初学者来说，表单记忆是最关心也是最为头疼的一件事。在HTML入门时，我们不需要花太多时间去记忆这些标签或属性，只需要感性认知即可。忘了的时候，就回来翻一下。此外，HBuilder也会有代码提示，写多了自然就会记住了。

2、表单元素是否一定要放在form标签内呢？

表单元素不一定都要放在form标签内。对于要与服务器进行交互的表单元素就必须放在form标签内才有效。如果表单元素不需要跟服务器进行交互，那就没必要放在form标签内。