前端 - 基础 表单标签 - 表单元素 input - type 属性 ( 单选按钮和复选按钮 )

input 标签 type 属性 ,上一篇讲了 输入框 和 密码框 

这节看看 单选按钮 和 复选 按钮 

 

目录

单选按钮  : 

复选按钮 


     

    #  看上图就可以看到    单选按钮 --  radio    和     复选 按钮 -- checkbox 

       

单选按钮  : 

        所谓单选按钮就是  有时网页会给你几个选项,让你进行选择,你选了 A 就不能再选 B 

        说白就是 我们做的 单选题,即 多选一   

         示例  : 

        

        ===>>>

        

         这就是 单选按钮 

         ===>>>

          

          你选了男,就不能选 女了 ,选了 女,也就不能 选男了 

          

          但是,请看 

        

          咦,这是啥情况, 咋都能选 ???

          ===>>>

          要说明的是,我们的单选按钮 没问题,这个涉及到  < input > 标签 除了 type 属性

          还有其它重要属性,而上示问题就和 其它属性 -- name  有关系了

          解释  :  name 属性 是用来标识 表单元素的名字, 在上示 性别单选按钮中,必须有相同的

                        名字 name ,才可以实现 多选一 ,即单选题;

                        而上示的代码中,我们并没有 编辑 name 属性,所以才造成了问题。 

                        ===>>>

                        

                        name 值必须保持一致,我们自定义 name 值为 SEX ,当然,由你定义

                        保持一致即可。

                        ===>>>

                        

                          这个时候就只能进行单选了,选男就不能选女了 ~!! 

                          我们下节就讲  name 属性 ~!!   

          

复选按钮 

         复选按钮 -- checkbox  , 即 多选题,多选多 

         示例  : 

         

         ===>>>

       

       这就可以进行多选了 

       

        

         对于 复选按钮,也是如此, 最好也得有 name 属性, 并且 name 属性 得保持一致 

         这样呢,就把数据送到后台中去,后台就会明白 这么多按钮里面,你选的是哪一个 ~!!

         在 本节中 复选按钮,我们没有 编辑 name 属性。

         按理是要编辑的,  你就和单选按钮同理编辑。 

         

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Can‘t connect to server on ‘localhost‘ (10061)

问题&#xff1a;电脑关机重启后&#xff0c;连接不上mysql了&#xff0c;报错信息如下&#xff1a;2002 - Cant connect to server on localhost (10061)解决办法&#xff1a;很大的原因是mysql服务没有启动&#xff0c;需要你重启一下mysql&#xff1a; 以管理员的身份运行cm…

R使用netmeta程序包实现二分类数据的频率学网状meta分析

该研究检索了Cochrane对照试验中心注册&#xff0c;CINAHL&#xff0c;Embase&#xff0c;LILACS数据库&#xff0c;MEDLINE&#xff0c;MEDLINEIn-Process&#xff0c;PsycINFO&#xff0c;监管机构网站&#xff0c;以及从一开始就发布和未发表的双盲随机对照试验的国际注册20…

重构智能防丢产品,苹果Find My技术引领市场发展

目前市场上最主要的防丢技术是蓝牙防丢和GPS防丢&#xff0c;蓝牙防丢是通过感应防丢器与绑定手机的距离来实现防丢的。一般防丢会默认设置一个最远安全距离&#xff0c;超过这个安全距离后&#xff0c;与手机蓝牙信号断开&#xff0c;触发防丢报警&#xff0c;用户根据防丢报警…

百度贝塞尔曲线证码识别代码

一、前言 百度出了如图所示的验证码&#xff0c;需要拖动滑块&#xff0c;与如图所示的曲线轨迹进行重合。经过不断研究&#xff0c;终于解决了这个问题。我把识别代码分享给大家。 下面是使用selenium进行验证的&#xff0c;这样可以看到轨迹滑动的过程&#xff0c;如果需要…

Leetcode 234. 回文链表

心路历程&#xff1a; 一开始想到用栈&#xff0c;但是发现还是得到中点后才开始判断&#xff0c;时间空间没什么区别&#xff0c;还不如直接获取数组后正逆对比&#xff1b; 看了网上的O&#xff08;1&#xff09;空间复杂度方法&#xff0c;意思是按照奇数偶数判断完之后&am…

保护JavaScript代码安全性:探究JScrambler、JShaman、JSFack等常用加密混淆工具

摘要 本篇技术博客将介绍五款常用且好用的在线JavaScript加密混淆工具&#xff0c;包括 jscrambler、JShaman、jsfack、freejsobfuscator 和 jjencode。通过对这些工具的功能及使用方法进行详细解析&#xff0c;帮助开发人员更好地保护和加密其 JavaScript 代码&#xff0c;提…

142.环形链表

给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整…

Spring Boot集成JPA快速入门demo

1.JPA介绍 JPA (Java Persistence API) 是 Sun 官方提出的 Java 持久化规范。它为 Java 开发人员提供了一种对象/关联映射工具来管理 Java 应用中的关系数据。他的出现主要是为了简化现有的持久化开发工作和整合 ORM 技术&#xff0c;结束现在 Hibernate&#xff0c;TopLink&am…

保护前端代码安全:探索JScrambler、JSFack、IpaGuard等五款JavaScript加密工具

摘要 本篇技术博客将介绍五款常用且好用的在线JavaScript加密混淆工具&#xff0c;包括 jscrambler、JShaman、jsfack、freejsobfuscator 和 jjencode。通过对这些工具的功能及使用方法进行详细解析&#xff0c;帮助开发人员更好地保护和加密其 JavaScript 代码&#xff0c;提…

websocketpp上手笔记-Windows安装

WebSocketpp是什么 最近手上有一个c项目&#xff0c;需要用websocket从服务器端收内容。于是网上找了圈&#xff0c;发现WebSocketpp库可以做websocket的客户端。 WebSocketpp也叫WebSocket&#xff0c;github地址是&#xff1a;https://github.com/zaphoyd/websocketpp&…

KMP字符串匹配算法

本文用于记录个人算法竞赛学习&#xff0c;仅供参考 目录 一.KMP 二.next数组&#xff08;前缀表&#xff09; 三.具体实现模板 四.题解 先来看一个问题 28. 找出字符串中第一个匹配项的下标 - 力扣&#xff08;LeetCode&#xff09; 对于这个问题&#xff0c;一般暴力做法…

三、Java的流程控制

1、Java的顺序流程控制 程序由一系列语句组成。 Java虽然是一种面向对象的计算机语言,但是在一个局部,例如方法体内,快语句内仍然需要面向过程的程序设计和方法。 作为面向过程程序设计精华的结构化程序设计思想,仍然是面向对象程序设计方法的基石。 1)表达式语句 由运…

浪潮分布式存储AS13000G6-M36、NF5466M6硬盘背板改扩配参考

AS13000G6分布式存储机型描述 浪潮分布式存储AS13000G6-M36机型&#xff0c;实际就是NF5466M6加上分布式存储软件的一体机产品&#xff0c;而NF5468M6也就是NF5280M6的主板加4U机箱结构。 该机器最大的特点是在4U空间内可以配置36块3.5寸大盘&#xff0c;硬盘背板为3.5*12&…

B82793S0513N201 共模扼流圈滤波器电感 51uH 800mA

B82793S0513N201是一款由TDK(东电化)公司生产的数据线扼流圈&#xff0c;用于电信领域的xDSL变压器。 制造商: TDK 产品品种: 共模扼流圈/滤波器 RoHS: 详细信息 系列: B82793S 安装风格: PCB Mount 端接类型: SMD/SMT 通道数量: 1 Channel 电感: 51 uH 容差: 30 % 最大直流电…

护眼台灯什么品牌好?台灯目前口碑最好的护眼灯推荐

随着生活水平的提供&#xff0c;越来越多的人重视起自身健康问题&#xff0c;尤其是视力健康&#xff0c;因此都会选择一款好的护眼台灯。不过市面上的护眼台灯款式多得人数不清&#xff0c;其中还包括了很多劣质产品。 这类台灯往往采用劣质LED灯珠&#xff0c;这种灯珠对人体…

【5G 接口协议】CU与DU之间的F1协议介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…

如何使用 Python 本地客户端操作读写云服务器 Redis 缓存数据库详细教程(更新中)

Redis 基本概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的使用 ANSI C 语言编写的、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库&#xff0c;并提供多种语言的 API。它通常被称为数据结构服务器&#xff0c;因为值&#xff08;value…

【Leetcode】2810. 故障键盘

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517; 你的笔记本键盘存在故障&#xff0c;每当你在上面输入字符 ′ i ′ i ′i′ 时&#xff0c;它会反转你所写的字符串。而输入其他字符则可以正常工作。 给你一个下标从 0 0 0 开始…

.sdf和.msp文件读取

前言 .sdf和.msp文件都可以用来存储分子信息&#xff0c;.sdf文件可以用rdkit读取&#xff0c;.msp文件就只能当成文本文档读取了。 读取 rdkit安装 pip install rdkit .sdf读取 from rdkit import Chemsuppl_h Chem.SDMolSupplier(../data/HMDB/f_hmdb.sdf) # 得到一个迭…

【字节跳动笔试题汇总】 2024-03-31-字节跳动春招笔试题-三语言题解(CPP/Python/Java)

&#x1f36d; 大家好这里是KK爱Coding &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新字节跳动近期的春秋招笔试题汇总&#xff5e; &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&…