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

news2024/11/25 22:31:09

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

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

 

目录

单选按钮  : 

复选按钮 


     

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

       

单选按钮  : 

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

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

         示例  : 

        

        ===>>>

        

         这就是 单选按钮 

         ===>>>

          

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

          

          但是,请看 

        

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

          ===>>>

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

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

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

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

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

                        ===>>>

                        

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

                        保持一致即可。

                        ===>>>

                        

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

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

          

复选按钮 

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

         示例  : 

         

         ===>>>

       

       这就可以进行多选了 

       

        

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

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

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

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

         

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

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

相关文章

设计灵活可扩展的文件系统适配器系统

介绍 文件系统适配器是一个用于抽象不同存储类型之间差异的接口&#xff0c;它提供了统一的方式来访问和操作文件系统中的数据。无论是本地文件系统、云存储还是其他类型的存储&#xff0c;文件系统适配器都能够提供一致的操作接口&#xff0c;使得应用程序可以更容易地与不同…

事件队列事件循环(EventLoop) 宏任务 微任务详解 面试题

事件队列 事件循环 EventLoop 宏任务 微任务详解 一、概念二、宏任务&#xff08;多个&#xff09;、微任务&#xff08;1个&#xff09;三、Promise 的构造函数四、process.nextTick在事件循环中的处理五、vue nextTick原理 一、概念 event: 事件 loop: 循环&#xff0c;循环…

使用Bitmaps位图实现Redis签到

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 Redis提供了Bitmaps这个“数据类型”可以实现对位的操作: (1) Bitmaps…

整顿编剧市场:程序员提交测试流程的最佳实践

讲动人的故事,写懂人的代码 最近,一部去年推出的国产电视剧在IT圈子里引起了轰动。 引起关注的原因,并非剧中程序员的外形出众,而是她提交代码测试的方式——将写有代码的纸张放入文件夹,然后递给了对面的测试人员。如图1所示。 图1 程序员将写有代码的纸张放入文件夹,并…

Python字符串操作方法一览表

字符串操作 你患得患失太在意从前又太担心将来&#xff0c;有句话说的好昨天是段历史&#xff0c;明天是个谜团而今天是天赐的礼物 像珍惜礼物那样珍惜今天。—— 龟大仙《功夫熊猫3》 1.字符串连接 例子&#xff1a; str1 "Hello" str2 "World" resul…

算法学习17:背包问题(动态规划)

算法学习17&#xff1a;背包问题&#xff08;动态规划&#xff09; 文章目录 算法学习17&#xff1a;背包问题&#xff08;动态规划&#xff09;前言一、01背包问题&#xff1a;1.朴素版&#xff1a;&#xff08;二维&#xff09;2.优化版&#xff1a;&#xff08;一维&#xf…

DeepBook通过NFT空投预告Token发布

是Sui的第一个原生流动性层&#xff0c;正在推出自己的原生token $DEEP&#xff0c;巩固其作为Sui网络关键金融基础设施的地位。DEEP旨在为在DeFi中提供整体流动性的机构和机构交易者使用DeepBook。DeepBook和DEEP的结合为DeFi应用提供了首要的Web3流动性来源。 DEEP token的关…

人事管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)请假加班招聘考勤

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读300套最新项目持续更新中..... 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含ja…

分区合并风险大,数据恢复有妙招

分区合并&#xff0c;是计算机磁盘管理中的一个常见操作&#xff0c;旨在通过整合相邻的分区来创建一个更大的逻辑分区&#xff0c;从而更有效地利用磁盘空间。这种操作看似简单&#xff0c;但实则蕴含着不小的风险。一旦操作不当或遇到意外情况&#xff0c;很可能导致数据丢失…

混沌加密:探索信息安全的前沿技术

在当今数字化时代&#xff0c;信息安全已成为全球关注的焦点。随着网络攻击手段的日益复杂&#xff0c;传统的加密技术面临着严峻的挑战。为了应对这些挑战&#xff0c;科学家们一直在探索更为先进的加密技术&#xff0c;混沌加密便是其中之一。本文将对混沌加密的原理、特点以…

开源项目advcpmv实现cp/mv显示进度条 —— 筑梦之路

项目地址&#xff1a;https://github.com/jarun/advcpmv 1. 查看当前系统上的包版本 rpm -qa | grep -w coreutils 2. 下载8.32版本的源码包 wget http://ftp.gnu.org/gnu/coreutils/coreutils-8.32.tar.xz 3. 下载对应版本的补丁包 wget https://github.com/jarun/advcpm…

Incus:新一代容器与虚拟机编排管理引擎

Incus是什么&#xff1f; Incus是一个用于编排管理应用型容器、系统型容器及虚拟机实例的管理工具。它是对 Canonical LXD 的继承与发展&#xff0c;引入了更多的存储驱动支持。 Incus项目的产品地址&#xff1a;Linux Containers - Incus - Introduction 在 LXC-Incus 项目…

Runes 生态一周要览 ▣ 2024.3.25-3.31|Runes 协议更新 BTC 减半在即

Runes 生态大事摘要 1、Casey 发布了 Runes 协议文档 RUNES HAVE DOCS&#xff0c;Github 代码库更新到 ord 0.17.0 版本&#xff0c;Casey 表示符文是一个“严肃”的代币协议。 2、Casey 公布了第一个硬编码的创世符文「UNCOMMONGOODS」 3、4月7日香港沙龙&#xff5c;聚焦「…

【Algorithms 4】算法(第4版)学习笔记 23 - 5.4 正则表达式

文章目录 前言参考目录学习笔记1&#xff1a;正则表达式1.1&#xff1a;表示1.2&#xff1a;快捷表示2&#xff1a;正则表达式与非确定有限状态自动机 REs and NFAs2.1&#xff1a;二元性2.2&#xff1a;模式匹配实现2.3&#xff1a;非确定有限状态自动机 Nondeterministic fin…

mysql锁表问题

问题描述 偶尔应用日志会打印锁表超时回滚 org.springframework.dao.CannotAcquireLockException: ### Error updating database. Cause: com.mysql.cj.jdbc.exceptions.MySQLTransactionRollbackException: Lock wait timeout exceeded; try restarting transactionmysql锁…

Python基础之pandas:文件读取与数据处理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、文件读取1.以pd.read_csv()为例&#xff1a;2.数据查看 二、数据离散化、排序1.pd.cut()离散化&#xff0c;以按范围加标签为例2. pd.qcut()实现离散化3.排序4.…

原型链污染攻击也称JavaScript Prototype 污染攻击

JavaScript数据类型 let和var关键字的区别 使用var或let关键字可以定义变量 let和var的区别如下&#xff1a; var是全局作用域&#xff0c;let 只在当前代码块内有效 当在代码块外访问let声明的变量时会报错 var有变量提升&#xff0c;let没有变量提升 let必须先声明…

一文秒解四大经典限流算法

阅读前提&#xff1a;没有最好的算法&#xff0c;只有最适合的算法&#xff01; 限流算法&#xff1a; 固定窗口限流算法 滑动窗口限流算法 漏桶限流算法 令牌桶限流算法 固定窗口限流算法 介绍 固定窗口限流算法&#xff08;Fixed Window Rate Limiting Algorithm&#…

算法知识点汇总

知识点 1. 求二进制中1的个数 int get_count(int x)//返回x的二进制有多少个1 int get_count(int x) {int res 0;while (x){res ;x - x & -x;}return res; }2. 建树&#xff0c;和树的DFS 记得初始化头节点 const int N 1e5 10, M N * 2; int h[N], e[M], ne[M], id…

【OpenCV】 基础入门(一)初识 Mat 类 | 通过 Mat 类显示图像

&#x1f680; 个人简介&#xff1a;CSDN「博客新星」TOP 10 &#xff0c; C/C 领域新星创作者&#x1f49f; 作 者&#xff1a;锡兰_CC ❣️&#x1f4dd; 专 栏&#xff1a;【OpenCV • c】计算机视觉&#x1f308; 若有帮助&#xff0c;还请关注➕点赞➕收藏&#xff…