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

随机推荐

Java处理Exception无法捕获的异常
场景: 使用try...catch(Exception e){}来捕获异常,执行过程中线程中断或阻塞了,但是catch块中却并没有捕获到异常信息. try{ // 此处可能是调用一个远程的接口,或是调 ...
[PYTHON-TSNE]可视化Word Vector
需要的几个文件: 1.wordList.txt,即你要转化成vector的word list: spring maven junit ant swing xml jre jdk jbutton jpa ...
什么是web标准、可用性、可访问性
前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师.交互设计师.用户研究员甚至视觉设计师,一般都对web标准.可用性和可访问性的理解有要求.那么到底什么是web标准.可用性.可访问性呢? ...
Asp.Net Identity cookie共享
n the Startup.Auth.cs file, add the CookieDomain parameter with your domain: var cookieAuthenticatio ...
.NET/C# 优化心得
网上的优化千篇一律,遂干脆自己写一个,总结总结网上说的与自己的想法. 1.关于sql方面的优化,详见Mysql语句的优化 2.对于不常更新的网页,使用静态页,使用 cdn 加速. 3.关于主从同步,如 ...
Python数据结构———队列
队列(Queue) 队列也是一系列有顺序的元素的集合,新元素的加入在队列的一端,叫做“队尾”(rear),已有元素的移除发生在队列的另一端,叫做“队首”(front),和栈不同的是,队列只能在队尾插入 ...
db2 Reorgchk:重组检查，是否需要重组
Reorgchk:重组检查,是否需要重组.判断表或索引是否需要重组,有2种方法:1.通过reorgchk工具 reorgchk工具利用8个公式(3个表公式,5个索引公式),如果表统计结果F1,F2或 ...
IBatisNet不常用到的配置(Dao.config ConnectionTimeout)，居然不起作用（前辈留给我们的坑）
IBattis 默认超时时间好像是30s,可多于这个时间总就会报错:DaoProxy : unable to intercept method name 'ExcuteQuery', cause : ...
文本分类学习（十）构造机器学习Libsvm 的C# wrapper（调用c/c++动态链接库）
前言: 对于SVM的了解,看前辈写的博客加上读论文对于SVM的皮毛知识总算有点了解,比如线性分类器,和求凸二次规划中用到的高等数学知识.然而SVM最核心的地方应该在于核函数和求关于α函数的极值的方法: ...
html学习_网页与html直接的关系

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

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

随机推荐

热门专题