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

随机推荐

Python version 2.7 required, which was not found in the registry解决方法
转自:https://blog.csdn.net/zklth/article/details/8117207 新建一个register.py文件,执行该文件,完成python的注册. import s ...
Bitcoin源代码编译安装详解
一.安装准备安装环境:虚拟机Ubuntu 16.04 内存:2G 错误1:如果这里内存分配为1G,则会产生如下错误: g++ : internal compiler error: Killed (p ...
nodejs yarn包管理工具
Yarn https://yarnpkg.com/zh-Hans/docs/install#windows-stable 安装包 Yarn Npm yarn npm i yarn global add ...
scala 可变集合与内存清理的关系
留坑待填使用scala.collection.mutable._期间,发现了当程序运行内存开销较多时,使用系统工具进行内存清理,然后程序报出了变量找不到.内存无法访问.数组访问越界,堆栈溢出等多种错 ...
linux 部分系统命令
在网上看到一些系统命令,贴一记 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # ...
[Android实例] app引导页(背景图片切换加各个页面动画效果)（申明：来源于网络）
[Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...
js callback 和 js 混淆
function test(a,callback){ a+=100; callback(a) } function abc(a){ a+=100; alert(a); } test(5,abc) js ...
poj3080 Blue Jeans【KMP】【暴力】
Blue Jeans Time Limit: 1000MS Memory Limit: 65536K Total Submissions:21746 Accepted: 9653 Descri ...
JMeter结果树响应数据中文乱码解决办法
encoding编码打开apache-jmeter-2.11\bin\jmeter.properties文件,搜索“encoding”关键字,找到如下配置: # The encoding to be ...
VMware与Centos系统安装和重置root密码
VMware与Centos系统安装今日任务 1.Linux发行版的选择 2.vmware创建一个虚拟机(centos) 3.安装配置centos7 4.xshell配置连接虚拟机(centos) ...

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

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

随机推荐

热门专题