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

随机推荐

php 页面间传递数据
b.php <?php function getClientIP() { if (getenv("HTTP_CLIENT_IP")) $ip = getenv("H ...
安卓开发笔记——关于开源项目SlidingMenu的使用介绍（仿QQ5.0侧滑菜单）
记得去年年末的时候写过这个侧滑效果,当时是利用自定义HorizontalScrollView来实现的,效果如下: 有兴趣的朋友可以看看这篇文件<安卓开发笔记——自定义HorizontalScro ...
vue跨域代理配置
实际:http://a.com/b.php 代理:http://localhost/b.php 配置config/index.js proxyTable: { '/api': { target:'ht ...
iOS - DNS劫持
******科普** 1.DNS劫持的危害不知道大家有没有发现这样一个现象,在打开一些网页的时候会弹出一些与所浏览网页不相关的内容比如这样奇(se)怪(qing)的东西图一或者这样图二 ...
排查java进程cpu占用高的问题
一.思路分两步,主要是找出占用cpu高的进程,再找出该进程内到底是哪个线程占用cpu高. 二.找出占用cpu高的进程参考: https://blog.csdn.net/hfhwfw/article ...
OpenJDK与JDK的区别分析
一.以下是具体分析: 以下内容转自http://fgh2011.iteye.com/blog/1771649: 使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JD ...
spring框架排错
1.格式错误. http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/sp ...
web -- Navigator.vibrate(); 使设备（有振动硬件）产生有频率的振动
MDN 文档此方法需要用户手势. 否则,它返回false. const koa2 = require(`koa2`); const Router = require(`koa-router`); c ...
apache 设置环境变量
在apache设置环境变量有什么好处: 提高代码的可移植性,不用因为换服务器而改项目代码
使用介质设备安装 AIX 以通过 HMC 安装分区
使用介质设备安装 AIX 以通过 HMC 安装分区原文:https://www.ibm.com/support/knowledgecenter/zh/ssw_aix_72/com.ibm.aix.h ...

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

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

随机推荐

热门专题