前端 HTML form表单标签 select标签 option 下拉框

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 ...

随机推荐

ELK+Filebeat+Kafka+ZooKeeper 构建海量日志分析平台
日志分析平台,架构图如下: 架构解读 : (整个架构从左到右,总共分为5层) 第一层.数据采集层最左边的是业务服务器集群,上面安装了filebeat做日志采集,同时把采集的日志分别发送给两个logs ...
centos7目录统计之du命令
CentOS下du查看计算目录大小的命令用法实例: [root@localhost local]# du -hs smgpdfd 3.3G smgpdfd [root@localhost lo ...
MTK 自定义系统服务
添加系统服务需要添加aidl,service,manager文件,需要修改SystemServer,Context,ContextImpl 下面举例进行说明,主要添加一个服务,用于获取系统时间和版本号 ...
分辨率，PPi,DPI,DPR,物理像素，逻辑像素
屏幕尺寸:指的是屏幕对角线的长度分辨率:是指宽度上和高度上最多能显示的物理像素点个数点距:像素与像素之间的距离,点距和屏幕尺寸决定了分辨率大小 PPI:屏幕像素密度,即每英寸(1英寸=2.54厘米 ...
Texture::setUnRefImageDataAfterApply
当该值设置为true时,OSG在应用过该纹理对象后(apply),自动释放其对Image对象的引用,以减少内存占用
genieacs Installation on Ubuntu14.04
Beside the installation guide on the main page, here is a guide to install GenieACS off a freshly in ...
python 读取配置文件方法
#coding=utf8 import ConfigParser config = ConfigParser.ConfigParser() config.readfp(open(raw_input(& ...
第八天py
我发现这个老师讲的太基础只是我懒得跳过而已想慢慢听列表公共功能索引切片 for 长度特有功能翻转排序追加插入索引位置删除
关于OpenJDK和Orcale JDK区别
一.环境Centos 今天搞tomcat发现了一个问题,众所周知,tomcat需要java环境支持,然后我今天就想着尝试yum安装java,命令 yum install -y java* 确实可以安装 ...
Ubuntu系统中各种文件颜色的含义
蓝色:文件夹 ,ls -l或ll时可以看到权限部分的第1个字母是d红色:压缩文件绿色:可执行文件,包括jar白色:文本文件红色闪烁:错误的符号链接淡蓝色:符号链接黄色:设备文件灰色:其它文件 ...

前端 HTML form表单标签 select标签 option 下拉框

前端 HTML form表单标签 select标签 option 下拉框的更多相关文章

随机推荐

热门专题