前端 HTML form表单标签 select标签 option 下拉框
<select></select>
select里面通常跟option配合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
<!-- 下拉框 -->
<select>
<option>广州</option>
<option>深圳</option>
<option>山东</option>
<option>北京</option>
</select>
</div>
</form>
</div>
</body>
</html>
加上name属性 提交后台，让他提交到后台 在每个<option>里面加value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
<!-- 下拉框 -->
<select name="sel">
<option value="1">广州</option>
<option value="2">深圳</option>
<option value="3">山东</option>
<option value="4">北京</option>
</select>
</div>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
url上显示提交的值
select的size属性
size取值大于1的话，则为滚动列表，否则就是下拉选项框，默认size等于1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
<!-- 下拉框 -->
<select name="sel" size="3">
<option value="1">广州</option>
<option value="2">深圳</option>
<option value="3">山东</option>
<option value="4">北京</option>
</select>
</div>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
select的multiple属性
multiple属性设置多选，该属性出现在<select>中,那么就允许多选(针对滚动列表)
按着ctrl选多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
<!-- 下拉框 -->
<select name="sel" size="3" multiple>
<option value="1">广州</option>
<option value="2">深圳</option>
<option value="3">山东</option>
<option value="4">北京</option>
</select>
</div>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
提交后台拿到两个选中值
select标签的selected 设置默认值
selected预选中，注意：如果不设置selected属性的话，那么选项框中的第一项会默认被选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
<!-- 下拉框 -->
<select name="sel">
<option value="1">广州</option>
<option value="2">深圳</option>
<option selected value="3">山东</option>
<option value="4">北京</option>
</select>
</div>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
单选框
多选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
<!-- 下拉框 -->
<select name="sel" size="3" multiple>
<option value="1">广州</option>
<option value="2">深圳</option>
<option selected value="3">山东</option>
<option value="4">北京</option>
</select>
</div>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
optgroup 下拉框分组功能
用optgroup标签包着option标签，optgroup label属性为组名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
<!-- optgroup 下拉框分组功能 -->
<select name="city" size="5" multiple="multiple">
<optgroup label="广东省">
<option value="1">广州</option>
<option value="2">深圳</option>
</optgroup> <optgroup label="浙江省">
<option value="1">杭州</option>
<option value="2">温州</option>
</optgroup>
</select>
</div>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
前端 HTML form表单标签 select标签 option 下拉框的更多相关文章
- form表单的属性标签
form表单的常用标签 表单: <form id="" name="" method="post/get" action=" ...
- struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1 function dosearch() {2 if ($(&q ...
- jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
- form表单的属性标签和练习
form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...
- 前端之form表单与css（1）
目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...
- 前端笔记：React的form表单全部置空或者某个操作框置空的做法
1.全部置空的做法,一般在弹出框关闭后,需要重置该form所有表单: this.props.form.resetFields(); 2.针对某个操作框置空的做法 例如,form表单里有一个部门和一个张 ...
- 前端通过form表单构造带参数url
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- form表单里如果只存在一个文本框，enter键提交
在这里说一说浏览器里form表单的默认行为 我们都知道浏览器是存在很多默认行为的,可能是出于常用行为考虑又或者是历史原因.但有时候我们不需要这些默认行为.以下: 1).当form表单里只存在一个inp ...
随机推荐
- PHP最全笔记（二）(值得收藏，不时翻看一下)
/* [goto]5.3+ 版本 */用来跳转到程序中的某一指定位置该目标位置可以用目标名称 加上冒号来标记.PHP中的goto有一定限制,只能在同一个文件和作用域中跳转, 也就是说你无法跳出一 ...
- Linux监控平台介绍 zabbix监控介绍 安装zabbix 忘记Admin密码如何做
- 使用UIScrollView 结合 UIImageView 实现图片循环滚动
场景: 在开发工作中,有时我们需要实现一组图片循环滚动的情况.当我们使用 UIScrollView 结合 UIImageView 来实现时,一般 UIImageView 会尽量考虑重用,下面例子是以( ...
- yum 快速安装centos7 mysql5.7
CentOS7 yum方式安装MySQL5.7 在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉Maria ...
- [PGM] Variable elimination and Belief propagation
内容范围如题.Lec 08-11的内容:https://www.youtube.com/watch?v=Qa04kw1gKHk&index=36&list=PLQiVpyxVlLkbp ...
- umi怎么去添加配置式路由
今天在学习umi,他的路由机制非常的方便,但是在学到配置式路由的时候,看官方文档里面一笔带过: 对于我这种小萌新来说,有点懵,我需要把配置文件放到哪里呢?经过一番研究,发现它是放在根目录的.umirc ...
- linux后台执行命令：&和nohup
当我们在终端或控制台工作时,可能不希望由于运行一个作业而占住了屏幕,因为可能还有更重要的事情要做,比如阅读电子邮件.对于密集访问磁盘的进程,我们更希望它能够在每天的非负荷高峰时间段运行(例如凌晨).为 ...
- inittab 解析
Linux完成内核(Kernel)引导后,会由init初始化进程调用/etc/inittab配置文件(ps -aux | less,init进程号为始终为1,是所有系统进程的起点,init进程也有一个 ...
- vue编程式路由实现新窗口打开
一. 标签实现新窗口打开: 官方文档中说 v-link 指令被 组件指令替代,且 不支持 target=”_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 ta ...
- 一、在windows环境下修改pip镜像源的方法(以python3为例)
在windows环境下修改pip镜像源的方法(以python3为例) 1.在windows文件管理器中,输入 %APPDATA% 2.会定位到一个新的目录下,在该目录下新建pip文件夹,然后到pip文 ...