下拉列表的使用-HTML入门基础（025）

最新推荐文章于 2023-10-31 22:10:07 发布

虾米大王

最新推荐文章于 2023-10-31 22:10:07 发布

阅读量1.2k

点赞数

分类专栏： html 文章标签： html5 html css css3 javascript

本文链接：https://blog.csdn.net/modern358/article/details/110270436

版权

html 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

我们接着之前的内容继续，今天分享一下关于下拉列表的使用。很多时候我们需要在网页上显示一些内容具有互斥性，但是内容较多，如果都使用单选按钮，面积大，操作也不方便，就可以使用下拉列表框。

下拉列表框select：

下拉列表select和option标签需要配合使用。这个有点类似无序列表ul和li的关系。

语法：

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

示例代码：

<html>  <head>    <title>下拉列表</title>  </head>  <body>    <select>      <option>HTML</option>      <option>CSS</option>      <option>Javascript</option>    </select>  </body></html>

select标签属性
属性	说明
multiple	可选，默认下拉列表只能选择一项，开启此属性multiple="multiple"，可以选择多项
size	展开列表后可显示的数目

multiple属性语法：

<select multiple="multiple">  <option>选项内容</option>  <option>选项内容</option>  <option>选项内容</option></select>

示例代码：

<html>  <head>    <title>下拉列表</title>  </head>  <body>    <select multiple="multiple">      <option>HTML</option>      <option>CSS</option>      <option>Javascript</option>    </select>  </body></html>

需要多项选择时，按住ctrl键即可。

size属性：

语法：

<select size="数字">  <option>选项内容</option>  <option>选项内容</option>  <option>选项内容</option></select>

示例代码：

<html>  <head>    <title>下拉列表</title>  </head>  <body>    <select size="2">      <option>HTML</option>      <option>CSS</option>      <option>Javascript</option>      <option>HTML</option>      <option>CSS</option>      <option>Javascript</option>    </select>  </body></html>

浏览器差异，我们试着分别将size的取值为1,2,3时会发现它对360浏览器无效，而IE和火狐可以显示。这个是因为360浏览器最低有4个选项，不同的浏览器在解释HTML时有会差异，这个就是浏览器兼容性问题。

option标签：

option标签属性
属性	说明
value	选项的值
selected	当前选中

语法：

<select>  <option value="值">选项内容</option>  <option value="值" selected="selected">选项内容</option>  <option value="值">选项内容</option></select>

示例代码：

<html>  <head>    <title>option标签</title>  </head>  <body>    <select>      <option>1</option>      <option>2</option>      <option selected="selected">3</option>      <option>4</option>      <option>5</option>    </select>  </body></html>

option标签中value属性，主要是保存的值，是需要传送至服务器保存至数据库的键值。

按钮标签button：

之前的内容，我们分享过表单按钮<input type="button">，表单按钮使用的是input标签，而input标签是自闭合标签，没有结束符号。所以无法在表单按钮插入其他内容。

除了表单按钮以外，还有一种按钮使用button标签实现。

语法：

<button>文本或图像</button>

可以在开始和结束符之间，插入文本或者其他标签，功能会更强大些。

示例代码：

<html>  <head>    <title>按钮的区别</title>  </head>  <body>    <button>button标签按钮</button><br>    <input type="button" value="表单标签按钮"><br>  </body></html>

从浏览器的预览效果上看，两个按钮是一样的，但是代码实现方式不一样，input标签按钮的文字是用value属性定义的，而button标签按钮的文字则是包裹在开始和结束之间定义的。

初学者会有疑问了，在前端开发中，到底是用input标签按钮，还是使用button标签按钮呢？

在前端开发中，表单是要涉及提交数据至服务器的，button按钮无法实现这个功能，因为我们都是使用input标签按钮的，基本不用button标签按钮。