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