HTML教程-HTML<select>标签

HTML <select>
标签用于创建带有多个选项的下拉列表。在 <select>
标签中嵌套 <option>
元素来定义列表中的选项。
可以使用 <optgroup>
元素将相关选项分组。
如果要将数据发送到服务器,则在 <form>
元素内使用 <select>
标签。
语法
<select>
<option></option>
</select>
下面是关于 HTML <select>
标签的一些规范说明:
显示 | 内联 |
---|---|
开始标签/结束标签 | 开始标签和结束标签都有 |
用法 | 输入 |
示例
<!DOCTYPE html>
<html>
<head>
<title>HTML select Tag</title>
<style>
.img {
background-image: url("india.jpg");
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="img">
<h2>Example of select tag</h2>
<form>
<label>Choose your Favorite city in India</label>
<select>
<option>New Delhi</option>
<option>Indore</option>
<option>Jaipur</option>
<option>Jodhpur</option>
<option>Chandigarh</option>
<option>Mumbai</option>
<option>Bengaluru</option>
<option>Lucknow</option>
<option>Amritsar</option>
</select>
</form>
</div>
</body>
</html>
属性:
标签特定属性:
属性 | 值 | 描述 |
---|---|---|
autofocus | autofocus | 此属性在页面加载时自动将焦点设置到下拉列表上。 |
disabled | disabled | 它用于禁用控件,用户无法与下拉列表交互。 |
form | form-id | 它指定一个或多个表单,以便选择属于哪个表单。 |
multiple | multiple | 如果设置了此属性,则用户可以从列表中选择多个选项。 |
name | name | 它确定下拉列表的名称。 |
required | required | 如果指定了此属性,则用户必须在提交表单之前选择该字段。 |
size | number | 它指定列表中可见的选项数。 |
全局属性:
HTML 中的 <select>
标签支持全局属性。
事件属性:
HTML 中的 <select>
标签支持事件属性。
支持的浏览器
元素 | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
<select> | 是 | 是 | 是 | 是 | 是 |