14.按钮和多选框

news2024/11/15 15:09:19

<p>爱好:
    <input type="checkbox" value="Riding" name="hobby">骑行
    <input type="checkbox" value="experiment" name="hobby">做实验
    <input type="checkbox" value="learn" name="hobby">学习
    <input type="checkbox" value="Playing games" name="hobby">玩游戏
    </p>

上面是多选框的代码,和单选框不同的是,多选框的type=“checkbox”,并且在同一组里可以同时选取多个已有选项,效果如下图

请添加图片描述

最后,我们按照上图输入的信息提交到指定网址,使用的方式是get,网址提取到信息如下图

请添加图片描述

如图中所示,没有输入的信息则为空,已选择的多选框则会在后面展示出来

然后是按钮标签,代码如下

<p>按钮:
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resource/image/02.jpg">
    </p>
    <P>
        <input type="submit">
        <input type="reset" value="清空表单">
    </P>

按钮标签有上面4中,最直接的一种就是button,他生成的按钮点击没有直接的效果,需要结合gss进行设置,然后就是图像按钮,他和submit按钮的作用一样,点击之后会把该网页填写的信息提交到(action)指定网址。最后一个reset按钮,它是个重置按钮,点击后会把该页面你填写或选择过的所有信息全部清空。网页展示效果如下图

请添加图片描述

感谢您的观看,能和您一起学习是我最大的荣幸!

参考学习资料:按钮和多选框——狂神说

下面是我的微信公众号,与csdn同步更新,有需要的朋友可以关注一波~
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1967179.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

牛客JS题(十六)生成页码

注释很详细&#xff0c;直接上代码 涉及知识点&#xff1a; 合法性判断JS除法的特点 题干&#xff1a; 我的答案 <!DOCTYPE html> <html><head><meta charsetutf-8></head><body><ul id"ul"></ul><script type&…

Vsftp 源码安装部署(CentOS 8)

概述 运行环境是 CentOS 8.2 ,尝试搭建 ftp 服务&#xff0c;网上找了很多的方式&#xff0c;基本都是 yum 安装&#xff0c;但是因为未连接互联网&#xff0c;因此只能源码安装。 rpm 包下载地址&#xff08;无效&#xff09; RPM resource vsftpd 基本都是针对 CentOS 9 以…

RV1103调用摄像头运行yolov5进行实时检测

目录 前言运行Yolov5模型第一步&#xff1a;修改CMA_SIZE第二步&#xff1a;修改yolov5项目代码第三步&#xff1a;运行程序 前言 买了luckfox pico的rv1103开发板&#xff0c;摄像头是SC3336 3MP Camera (A)摄像头&#xff0c;参考RV1103 Luckfox Pico使用SPI NAND Flash烧录…

数据库备份与恢复和日志管理

一、数据库备份的概述 1、数据库备份的目的&#xff1a;备灾。在生产环境中&#xff0c;数据的安全性非常重要 2、造成数据丢失的原因&#xff1a;程序出错、人为的问题、磁盘故障、自然灾害。 二、备份的分类 从物理和逻辑的角度 1、物理备份&#xff1a; 对数据库操作系…

可视掏耳勺安全吗?独家揭示六大风险弊病!

很多人习惯在洗漱完顺手拿一根棉签掏耳朵&#xff0c;但是棉签的表面直径大且粗糙&#xff0c;不易将耳朵深处的耳垢挖出&#xff0c;耳垢堆积在耳道深处长时间不清理会导致堵塞耳道&#xff0c;引起耳鸣甚至感染。而可视掏耳勺作为一种新型的挖耳工具&#xff0c;它的安全性也…

OpenAI突然上线两件“杀手锏”:势在维持大模型霸主地位

在最近的大模型战争中&#xff0c;OpenAI似乎很难维持霸主地位。虽然没有具体的数据统计&#xff0c;但Claude3.5出现后&#xff0c;只是看网友们的反响&#xff0c;就能感觉到OpenAI订阅用户的流失&#xff1a;既然Claude3.5比GPT-4o好用&#xff0c;为什么我们不去订阅Claude…

html+css 实现遮罩按钮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽效果&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 文…

mybatis-plus批量插入优化

mybatis-plus批量插入优化 背景优化新的问题分批插入springboot3整合mybaits-plus 背景 使用的mybatisplus的批量插入方法&#xff1a;saveBatch()&#xff0c;打印 sql 日志发现&#xff0c;底层还是一条条的 insert 语句&#xff0c;这显然是不行的 优化 之前就看到过网上都…

怎么把C盘分成两个盘?让C盘分区更简单,赶快试试!

在日常使用电脑的过程中&#xff0c;有时我们可能希望将C盘分割成两个独立的分区&#xff0c;以便更好地管理文件和数据。这种操作需要谨慎进行&#xff0c;因为错误的分区操作可能导致数据丢失。那么&#xff0c;我们该怎么把C盘分成两个盘呢&#xff1f;下面&#xff0c;我将…

Telegraf 命令行指南:高效监控数据的秘诀

Telegraf 是一个轻量级的服务器监控代理&#xff0c;它支持从数百种数据源收集、处理和发送数据到各种存储库。它由 InfluxData 开发&#xff0c;常用于时间序列数据库 InfluxDB。Telegraf 的灵活性和强大的插件系统使其成为监控基础设施的理想选择。本文将为您提供一个 Telegr…

【解决方案】华普微基于收发芯片系列的LED智能灯控高效解决方案

一、方案概述 LED智能灯是一种集LED照明技术与智能控制技术于一体的现代照明产品。它采用高效节能的LED作为光源&#xff0c;相比传统灯具&#xff0c;具有更低的能耗、更长的使用寿命以及更环保的特性。 智能灯通过内置的智能芯片或连接外部智能设备&#xff08;如智能手机、…

vue2-级联选择器

级联选择器 一、市面上的级联选择器二、功能实现1、数据类型2、隐藏下拉框的方法3、html结构4、CSS代码5、各个方法代码 三、实现样式截图1、一级菜单1、鼠标放到一级菜单&#xff0c;就显示二级菜单2、鼠标点击一级菜单的时候 2、二级菜单1、鼠标放到二级菜单的时候&#xff0…

合规征程新里程碑:ATFX荣获香港SFC牌照,运营再上新台阶

全球知名金融科技品牌ATFX又传来好消息&#xff0c;继2023年6月获得阿联酋SCA第五类牌照后&#xff0c;ATFX全球合规运营策略再次取得重大成功。日前&#xff0c;ATFX宣布获得中国香港证券及期货事务监察委员会&#xff08;SFC&#xff09;颁发的第三类牌照&#xff08;号码&am…

GAMES104:06(下)游戏中地形大气和云的渲染2-学习笔记

文章目录 三、大气Atmosphere3.1 大气散射理论3.1.1 Analytic Atmosphere Appearance Modeling&#xff08;经验模型&#xff09;3.1.2 Participating Media参与介质3.1.3 辐射传递方程RTE(Radiative Transfer Equation)3.1.4 体积渲染公式VRE(Volume Rendering Equation) 3.2 …

比原生Transformer快的LMDeploy

创建conda环境 conda create lmdeploy conda activate lmdeploy 安装依赖包(注&#xff1a;下对应的版本要不然容易报错) pip install pytorch2.1.2 pip install lmdeploy[all]0.3.0 下载模型 通过Git协议下载模型。首先安装git-lfs组件 此处使用的root权限 curl -s ht…

YOLOv8改进 | 主干网络 | 简单而优雅且有效的VanillaNet 【华为诺亚方舟】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录 &#xff1a;《YOLOv8改进有效…

【C++核心篇】—— C++面向对象编程:封装相关语法使用和注意事项详解(全网最详细!!!)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、封装&#xff08;类&#xff09;1.封装的使用&#xff08;类和对象&#xff09;2. 对象的初始化和清理2.1 构造函数2.2 析构函数2.3 构造函数的分类及调用 …

海外仓代理模式,借鸡生蛋也能成为跨境新出路

国际物流是跨境电商生态圈同质化最严重跨境电商最开放的“地带”。唯独海外仓&#xff0c;算是国际物流行业唯一的一块“世外桃源”&#xff0c;但一个1000平米的小仓库&#xff0c;每年至少要花费100万的运转资金&#xff0c;无论是新企业还是成熟的企业&#xff0c;建立海外仓…

成都云飞浩容文化传媒有限公司怎么样?靠谱吗?

在数字经济的浪潮中&#xff0c;电商行业如同一艘巨轮&#xff0c;乘风破浪&#xff0c;不断前行。而在这片波澜壮阔的蓝海中&#xff0c;成都云飞浩容文化传媒有限公司犹如一颗璀璨的新星&#xff0c;以其专业的电商服务能力和前瞻性的市场洞察&#xff0c;为众多品牌搭建起通…

【Python机器学习】支持向量机——基于最大间隔分隔数据

有些人认为&#xff0c;SVM是最好的现成的分类器&#xff0c;这里说的“现成”指的是分类器不加修改即可直接使用。同时&#xff0c;这就意味着在数据上应用基本形式的SVM分类器就可以得到低错误率的结果。SVM能够对训练集之外的数据点做出很好的分类决策。 支持向量机&#x…