HTML表单标签4.2 button按钮标签（在网页中显示用户点击的按钮）select下拉菜单标签（提供多个选项）

最新推荐文章于 2024-03-17 20:14:27 发布
最新推荐文章于 2024-03-17 20:14:27 发布
阅读量493 收藏
点赞数
分类专栏： HTML 文章标签： html 前端 html5 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71385141/article/details/130113722
版权
本文介绍了HTML中的button标签，包括submit、reset和普通按钮的用法，特别指出谷歌浏览器中button的默认行为。同时，详细讲解了select下拉菜单的创建及option的selected属性，用于设定默认选中项。
摘要由CSDN通过智能技术生成

一、button按钮标签

submit提交
reset重置
button普通按钮
  • 谷歌浏览器中button默认是提交按钮。
  • 双标签，便于包裹文字、图片等。

 二、select下拉菜单标签

select标签下拉菜单整体
option下拉菜单每一项

常见属性：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.0">
    <title>Document</title>
</head>
<body>
    省份
    <select>
        <option>安徽</option>
        <option>广东</option>
        <option>江苏</option>
        <option>浙江</option>
        <option>北京</option>
        <option>山东</option>
    </select>
</body>
</html>

 页面效果展示：

 

Adellle
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
仿el-select实现点击按钮显示下拉框
qq_43651168的博客
06-15 1756
实现点击按钮显示下拉框，点击下拉框外面部分下拉框关闭（点击下拉框里面部分下拉框不关闭）
判断Html页面的哪个按钮被点击了-谷歌
csdnbian的博客
08-10 1336
<HTML> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <HEAD> <TITLE></TITLE> <script> document.onclick=function() { var obj = event.srcElement; if(obj.type == "button"){ alert(obj.id); } }
elementui 点击按钮弹出选择框
weixin_35755434的博客
12-29 2006
您好，要在 element-ui 中使用点击按钮弹出选择框，可以使用 element-ui 提供的 Select 组件。 首先，在您的模板中添加一个 Select 组件： <template> <div> <el-button@click="showSelect">选择</el-button> <el-select v-mo...
html下拉菜单的写法
weixin_62394768的博客
07-09 4076
今天我在写导航栏的时候就想有没有可以伸缩的导航栏，简单来说，我想要的那种东西就是导航栏。 就像这样，然后我就像怎么能拿这样有一个东西写出来。 还是用的div分块，代码如下 之后的操作就是用css对页面布局进行操作了 要注意这里的display:inline-block是指不设置宽度时，内容撑开宽度，不会独占一行，其他的就没有什么需要注意的点了，学过html的应该都能理解，无非是设置一下颜色，长宽之类的，对我来说需要注意的就是display属性的用法 以上代码所写出来的下拉按钮如图 非常好用下拉列表在我们
HTML下拉菜单（超详细）：
热门推荐
qq_56045326的博客
10-24 3万+
html代码段： <!--下拉菜单--> <div class="downorder"> <button class="order"> 下拉菜单 </button> <div class="downtext"> <a href="">text1</a> <a href="">text2</a> <a ..
单选下拉 html,javascript – 将下拉菜单转换为单选按钮,无需修改HTML
weixin_39527487的博客
06-03 181
所以这是一种特殊的情况 – 我有一个插件,我不能出于合同原因修改.它显示一组下拉菜单,我需要它来显示一组单选按钮.是否有js / jquery方法将下拉列表转换为单选按钮,而无需更改HTML.记住,我可以添加内容 – 我可以直接修改插件(以及HTML).我知道这是一个不好的方法,相信我,我不喜欢它比你做的更多.可能通过检测下拉选项的值,然后将它们重新格式化为单选按钮,隐藏原始下拉列表？Music ...
html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
weixin_42501270的博客
06-03 1567
前面的文章算是把Bootstrap CSS部分简单的学习了一遍，应该忽视了比较多的细节问题。不过大部分的内容我都过了一遍，并且用代码实现了一遍，而且看到了真实的效果。挺不错的。那么接下来的几篇文章主要来讲解Bootstrap的组件。那么本文主要来讲解以下内容再来熟悉一下这个开始建立一个页面的代码，首先新建一个测试网页加入如下代码复制代码代码如下:Bootstrap下拉菜单用于显示链接列表的可切换、...
干货:HTML中高效获取下拉菜单select中的值
程序员闪充宝
12-16 3031
点击上面　　免费订阅本账号！本公众号主要推送javaweb开发相关技术，基础知识点，同时会深入剖析复杂的问题，分享一些优秀的框架，大型项目经验，当今最流行的Javaweb技术，热点科技新...
点击按钮，显示多条子菜单(html)
peichuangaoling的专栏
03-16 2183
单击按钮，显示多级下拉菜单                           .dropdown-submenu {             position: relative;         }         .dropdown-submenu > .dropdown-menu {             top: 0;             left:
用js实现选项卡，点击不同按钮显示执行不同的操作
psjasf1314的博客
04-12 3622
内容描述：通过不同的按钮显示不同的页面，用js实现。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用js实现选项卡</title> <style> /*class的css写法*/ .active { background-color: gold;
陈表达学html-弹出显示下拉菜单-窗口案例
陈表达的博客
12-12 889
【代码】陈表达学html-弹出显示下拉菜单-窗口案例。
如何制作html下拉按钮,CSS3制作Dropdown下拉菜单的方法
weixin_31741827的博客
06-03 638
:target 是CSS3 中新增的一个伪类，用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置，俗称锚)。CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义。先上效果图正如标题所说，本文是教你如何巧用CSS3:target伪类制作Dropdown下拉菜单，原生HTML+CSS，无J...
获取当前点击的是哪个元素
Giraffe
07-13 1万+
用点击li元素为例 获取当前点击的元素 1 2 3 4 5 //第一种 var doms = document.querySelectorAll('ul li'); for (var i = 0; i < doms.length; i++) { !function(dom,index) { dom
javascript获取点击元素对象
m0_56726855的博客
09-21 6917
获取当前鼠标点击的HTML元素对象 ，可用于判断点击菜单外元素是否为下拉按钮元素实现点击下拉菜单外区域关闭下拉菜单。 实现代码 window.onclick = function (e) { // 获取点击元素对象 var element = document.elementFromPoint(e.clientX,e.clientY); // 获取点击元素的类名并弹窗显示 alert(element.classList); } 测试代码及效果 <...
HTML + CSS 连载 | 36 - select 下拉列表
JingnanJia的博客
10-31 5180
下拉列表也是一种选择类型的元素，下拉列表可以节省网页的空间，默认状态下只显示一个选项，只有在点击下拉按钮的时候才会显示多个选项，比如下面这里选择地址的时候就是使用的下拉列表。可以将整个表单作为一个整体来进行操作；比如对整个表单的数据进行。默认只能选择其中一个选项，但是我们可以通过设置布尔属性。可以看到默认已经显示了两个选项，当然我们也可以通过。元素可以创建一个下拉列表，而下拉列表的选项则由。当然我们想要对表单进行重置或者提交还需要添加添加。使用 LiverServer 打开，可以看到。
html按钮的下拉菜单,按钮下拉菜单
weixin_39980929的博客
06-03 2811
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。按钮下拉菜单其实就是普通的下拉菜单，只不过把“”标签元素换成了“”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。如下所示：按钮下拉菜单按钮下拉菜单项按钮下拉菜单项按钮下拉菜...
html--按钮型下拉框
weixin_46045444的博客
09-14 1168
https://www.cnblogs.com/libingql/p/5844050.html 实际上是按钮触发一个隐藏的子菜单 可以使用延迟函数和display属性控制子元素的显示 <style> .bwbt{background-color: white;border-color: cornflowerblue;border-radius: 5px;border-width: thin;color: cornflowerblue;text-align: center6495EDFF } &
html点击按钮出现下拉框
最新发布
qq_62143596的博客
03-17 680
元素来创建下拉框，但这种方法比较low。在HTML中，要实现点击按钮出现下拉框，可以使用。
html按钮字号,html button样式
weixin_31614747的博客
06-01 3908
html中按钮的字体颜色怎么设置?html中按钮字体的颜色和设置普通字体的颜色都是一样的，使用color属性就可以实现字体颜色的设置。 有以下两种方法： 方法一：jquery方法加颜色。 工具原料：编辑器、浏览器首先设置一个按钮，然后使用css给按钮设置color属性即可实现按钮字怎样在HTML中插入Button按钮,且按钮要显示颜色首先插入内容： 点击 css样式有两种，一种是定义一个class...
在input标签中含下拉菜单和提交按钮， 根据下拉菜单选项查询输入内容Input失去焦点自动点击提交按钮 HTML的代码
05-28
可以使用JavaScript来实现这个功能。可以使用下面的代码： ```html <select id="select"> 选项1 选项2 选项3 </select> <button id="submit">...点击提交按钮时，会获取输入框和下拉菜单的值，并执行查询操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Adellle

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值