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

随机推荐

eclipse java ee jsp tomcat Server文件夹给删了，怎么办？
右键选择属性选择Switch location 就可以了
bigtable原理
bigtable原理数据模型 A Bigtable is a sparse, distributed, persistent multi-dimensional sorted map. The ma ...
Invoke和BeginInvoke理解
在Invoke或者BeginInvoke的使用中无一例外地使用了委托Delegate,至于委托的本质请参考我的另一随笔:对.net事件的看法. 一.为什么Control类提供了Invoke和Begin ...
Markdown 列表
如下,分别表示无序列表 .有序列表 .待办列表 - Red - Blue - Green . Red . Blue . Green - [ ] 不勾选 - [x] 勾选
C++定义字符数组
问:C++中定义字符型数组时'\0'是不是也占一位?是不是定义char a[5],只能有4个字符?那计算字符长度时又否忽略'\0'? 答: C++中定义字符型数组时'\0'是不是也占一位?是不是定义c ...
Linux设备驱动剖析之IIC（三）
下面以eeprom用户程序调用ioctl函数的写操作为例追踪IIC子系统的调用过程.eeprom的用户测试是大部分开发板都自带的.看写一个字节数据的eeprom_write_byte函数的定义: in ...
windows下搭建docker
1.下载,双击安装,然后一路next 2.启动,然后打开docker的settings 在shared drives里勾选你想要把项目存放的盘,点击Apply(这里在windows系统下有个坑,项目只 ...
安装 powerline
使用说明: https://powerline.readthedocs.io/en/latest/usage.html ~ vim,在 .vimrc 中添加配置 set rtp+=/usr/lib/p ...
FastJson 自定义Serialize、Parser
FastJson 自定义Serialize.Parser 今天在处理Json反序列化时,在C#传过来的JSON字符串中枚举类型为int类型,FastJson对于枚举的处理有两种类型,一种是字符串一种是 ...
http://202.194.116.8/webapps/portal/frameset.jsp?tab_id=_2_1&url=%2fwebapps%2fblackboard%2fexecute%2
http://202.194.116.8/webapps/portal/frameset.jsp?tab_id=_2_1&url=%2fwebapps%2fblackboard%2fexecu ...

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

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

随机推荐

热门专题