QD1-P17 HTML常用标签：下拉框

news2024/11/25 2:27:22

本节学习 HTML 常用标签：select和option

‍

本节视频

www.bilibili.com/video/BV1n64y1U7oj?p=17

‍

知识点1：select标签用法

演示

recording

HTML

<select name="city">
	<option>北京</option>
	<option>上海</option>
	<option>成都</option>
</select>

select标签：下拉框
option标签：下拉框中的选项

知识点2：multiple属性

multiple属性：多选

HTML

<select name="city" multiple="multiple">
	<option>北京</option>
	<option>上海</option>
	<option>成都</option>
</select>

按住ctl键完可以多选

recording

知识点3：size属性

size属性：可见选项数

<select name="city" multiple="multiple" size="4">
	<option>北京</option>
	<option>上海</option>
	<option>成都</option>
	<option>武汉</option>
	<option>重庆</option>
	<option>广州</option>
</select>

效果

recording

知识点4：disabled属性

disabled属性：禁用元素

所有标签都可以使用disable属性。要禁用某个标签，只需要添加属性disabled="disabled"，例如禁用成都这个标签

<option disabled="disabled">成都</option>

成都选项变成灰色不可选状态

Clip_2024-10-11_15-47-59

例如，禁用select标签，整个下拉框都变成灰色不可选状态

Clip_2024-10-11_15-41-26

知识点5：value属性

value属性

如果设置了value属性，提交服务器时，提交value值。

没有设置value属性时，提交option标签中的值，比如"武汉"、"成都"...

<option>成都</option>
<option>武汉</option>

一个完成的HTML示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P17-select标签</title>
	</head>
	<!-- 
	multiple="multiple"
	size="4"
	 -->
	<body>
		<!-- 默认 -->
		<p>选择城市</p>
		<select name="city">
			<option>北京</option>
			<option>上海</option>
			<option disabled="disabled">成都</option>
			<option>武汉</option>
			<option>重庆</option>
			<option>广州</option>
		</select>

		<!-- 显示多个选项 -->
		<hr />
		<p>选择城市</p>
		<select name="city" size="4">
			<option>北京</option>
			<option>上海</option>
			<option disabled="disabled">成都</option>
			<option>武汉</option>
			<option>重庆</option>
			<option>广州</option>
		</select>

		<!-- 按住ctl多选 -->
		<hr />
		<p>选择城市</p>
		<select name="city" size="4" multiple="multiple">
			<option>北京</option>
			<option>上海</option>
			<option disabled="disabled">成都</option>
			<option>武汉</option>
			<option>重庆</option>
			<option>广州</option>
		</select>
	</body>
</html>