前端 - 基础 表单标签 - 表单元素 input - (name Value checked maxlength )属性详解

news2024/11/27 2:49:22

目录

name 属性  

Value  属性  

Checked 属性 

 Maxlength 属性 

场景问答  


#  <input>  标签 除了 type 属性外,还有其他常用属性 

    ===>>>

   

   

name 属性  

            在上一节 我们遇到的 单选按钮 ,为什么 本应该 多选一 结果成了 多选多的问题 

            就和  name 属性有关,因为 在当时 我们还没写 name 属性,再写name 属性后便解决了。

        

            name 属性是用来干什么的呢 ?? 

            ===>>>

            我们编辑 页面,可以看到之前学习的,有好多 表单元素,如  文本框,密码框,什么单选

            按钮,复选按钮的, 那怎么去区分它们呢 ??   去 区别 每一个表单元素的不同呢 ??

            ===>>>

            这样,我们就可以给 每一个 不同的表单元素去进行 命名,以区分开; 

            而命名规则即 由自定义即可,你想命名成什么就命名成什么;

            但是,要注意的是  在  同一个表单元素中 你的命名得相同, 即 name 要一样,一致 ~! 

            

             示例  : 

             

             如此,即所有的表单元素我们都进行了命名,有多个的要保持 name 值一致( 如上示 爱

             好,性别 ) ---   即 单选按钮,复选按钮   name值要一致 ~!! 

             ===>>>

            给表单元素进行了 name 值确定后,如此,将数据送到后台,后台就清楚,就会依据name

            值来确定 是哪一个 表单元素了~!!

     

Value  属性  

             

            这个 Value 就是  值的意思,举例示意 

            ===>>>

           

           上示就是 Value 属性的用法,它的结果显示就是 

           ===>>> 

        

          可以看到 用户名的 输入框里 有了 一串汉字,这个汉字就是 上示代码里的  Value 属性所赋

          予的值 

          密码框也可以使用 Value 值, 性别(单选按钮),爱好(复选按钮 )也可以使用 Value 属

          性,只不过 密码框的,不会直接像文本框那样 把 Value 属性所赋予的值直接摆出来,在页

          面中是看不出效果的~!!  

        

          关于 Value 属性的详细用法,可参考下示 博客 

          https://blog.csdn.net/WinstonLau/article/details/88537552

         

         关于 name 和 Value  属性  
          

      #   name 和  Value   两个属性 是每个表单元素都要有的属性值,主要给后台人员使用。 

      #   name  表单元素的名字, 要求  单选按钮和复选按钮 都要有相同的 name 值    

Checked 属性 

   形象举例  : 

   

      如上示, Checked  就是说 一打开页面,就可以看到 在复选框是被勾选的了,不是用户点

      击勾选的,而是被默认就勾选的了,这就是 Checked 属性的作用 ~!!! 

      checked  主要针对就是 单选按钮,复选按钮 ~!! 

      

  即  :  单选按钮复选按钮可以设置 checked 属性,当页面打开的时候就可以默认选中这个按钮

  示例  : 

  

  ===>>>

  

   如此,每次打开网页的时候就可以看到, 默认直接勾选,即默认选中某个表单元素~!!

   #  单选按钮,只能选一个 checked ,  因为它是 多选一嘛 

    复选按钮,可以多个 checked , 它是多选多,可以在多个选项后面 checked ~!!! 

      

 Maxlength 属性 

         该属性就是可以规定 输入字段的最大长度,就是最多只能输入几个字符~!! 

         示例  : 

         

         这就规定了 用户名最多只能输入 7个 字符 

        ===>>>

        

         这就是 最多只能输入 7 个字符,多余的就一个也输入不进去了~!!!! 

      #   Maxlength  是用户可以在表单元素输入的最大字符数,一般较少使用。

场景问答  

#   有些表单元素想刚打开页面就默认显示几个文字怎么做 ??

     ===>>>

     可以给这些表单元素设置 Value 属性 = “ 值 ” 

    用户名 : <input type="text"     value="请输入用户名"  /> 

 上示的  请输入用户名 就是 Value 所对应的 值  ;  这时候,页面中文本框里就会显示 Value 值了

#   页面中的表单元素很多,那怎么来区分 不同的表单元素呢 ? 

     ===>>>

     Name 属性登场, 当前 input 表单的名字,后台可以通过这个 name 属性找到这个表单。

     页面中的表单很多, name 的主要作用就是用于区别不同的表单。 

用户名 : <input  type="text"   value="请输入用户名"   name="username"  /> 

     name  属性后面的值,是自定义的。 

     radio 或者  checkbox 如果是一组,则必须给他们命名相同的名字。  

 如果一打开某个页面,就让某个单选按钮或者复选框是选中状态 ? 

      ===>>>

      checked 属性,  它就是默认表示选中状态,用于单选按钮或复选按钮 

#    如何让 input 表单元素展示不同的形态,比如单选按钮或者文本框 

     ===>>>

     type 属性;   type 属性 为 不同的值就可以展示不同的形态 ~!! 

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

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

相关文章

HashMap考点相关源码解析

参考资料&#xff1a; HashMap超详细源码解析 - 掘金 HashMap常见面试题_hashmap面试题-CSDN博客 详解&#xff1a;HashMap红黑树的阈值为什么是8&#xff1f;_hashmap 红黑树阈值为什么是8-CSDN博客 史上最全HashMap源码整理-CSDN博客 HashMap源码和实现原理_hashmap源码…

10个最佳3D角色下载站

每个人都喜欢免费的东西。 无论是免费的 3D 角色还是游戏资产&#xff0c;我们都喜欢它们。 以下是可以为你的游戏获取免费 3D 角色的前 10 个网站的列表。 你可以将它们用于多种用途&#xff0c;例如 3D 打印或动画剪辑。 如果需要将下载的3D角色转化为其他格式&#xff0c;可…

基于springboot的房屋租赁系统平台

功能描述 流程&#xff1a;房主登陆系统录入房屋信息》发布租赁信息&#xff08;选择房屋&#xff09;》租客登陆系统浏览租赁信息》和房主联系、看房&#xff08;根据租赁信息单的电话线下沟通&#xff09;》房主发起签约&#xff08;生成邀请码&#xff09;》租客登陆系统根…

大模型实时打《街霸》捉对PK,GPT-4居然不敌3.5,新型Benchmark火了

源自&#xff1a;量子位 作者&#xff1a;陈哲涵 黎学臻 考验AI的动态决策力 第一个挑战是定位人物在场景中的位置&#xff0c;通过检测像素颜色来判断。 正如开发者所说&#xff0c;想要赢&#xff0c;要在速度和精度之间做好权衡。 “人工智能技术与咨询” 发布

朵米3.5客服系统源码,附带系统搭建教程

朵米客服系统是一款全功能的客户服务解决方案&#xff0c;提供多渠道支持&#xff08;如在线聊天、邮件、电话等&#xff09;&#xff0c;帮助企业建立与客户的实时互动。该系统具有智能分流功能&#xff0c;可以快速将客户请求分配给适当的客服人员&#xff0c;提高工作效率。…

RabbitMQ高级笔记

视频链接&#xff1a;【黑马程序员RabbitMQ入门到实战教程】 文章目录 1.发送者的可靠性1.1.生产者重试机制1.2.生产者确认机制1.3.实现生产者确认1.3.1.开启生产者确认1.3.2.定义ReturnCallback1.3.3.定义ConfirmCallback 2.MQ的可靠性2.1.数据持久化2.1.1.交换机持久化2.1.2.…

Python疑难杂症(14)---Numpy知识集合(二)学习Python的NUMpy模块的定向取值、聚合分析函数、矩阵运算等

4、索引取值 像对 python 列表那样进行切片&#xff0c;对 NumPy 数组进行任意的索引和切片&#xff0c;取得数组或者单个的元素值。 arr1np.array([1,2,3,4,5,6,7]) print(arr1) print(arr1[5]) print(arr1[2:4]) 输出&#xff1a;[1 2 3 4 5 6 7] 6 [3 4] B np.arra…

如何分析现货白银的行情?2个工具的介绍

现在给投资者拿出一段现货白银行情&#xff0c;投资者会如何分析&#xff1f;怎么找到其中的机会呢&#xff1f;相信有不少人对此还是不甚了解。有的投资者平常看书学得头头是道&#xff0c;但是一碰到实际行情就懵了&#xff0c;这都是没有好好掌握如何分析现货白银行情的方法…

VScode debug python(服务器)

方法一&#xff1a; 创建launch.json文件&#xff1a; launch.json文件地址&#xff1a; launch.json文件内容&#xff1a; {"version": "0.2.0", //指定了配置文件的版本"configurations": [{"name": "Python: Current File&…

WordPress外贸建站Astra免费版教程指南(2024)

在WordPress的外贸建站主题中&#xff0c;有许多备受欢迎的主题&#xff0c;如Avada、Astra、Hello、Kadence等最佳WordPress外贸主题&#xff0c;它们都能满足建站需求并在市场上广受认可。然而&#xff0c;今天我要介绍的是一个不断颠覆建站人员思维的黑马——Astra主题。 原…

【Javascript 漫游】【050】数据类型 Symbol

文章简介 本篇文章为【JavaScript 漫游】专栏的第 050 篇文章&#xff0c;对 ES6 规范新增的 Symbol 数据类型的知识点进行了记录。 概述 ES5 的对象属性名都是字符串&#xff0c;这容易造成属性名的冲突。比如&#xff0c;我们使用了一个他人提供的对象&#xff0c;但又想为…

ts 中数据约束类型

在 swagger 等接口文档中&#xff0c;查看 json代码&#xff0c;复制 将其导入到 json.cn&#xff0c;便于查看 在api文件夹下&#xff0c;新建一个定义ts类型的文件 type.ts。 定义数据类型 ---> export interface Bbb {} 调用数据类型----> export type Xxx Bbb[]…

多导购分摊业绩比例

业务场景&#xff1a; 开单是多个销售参与开单的&#xff0c;但是每个人贡献不一致&#xff0c;所以分摊的业绩比例不一致&#xff0c;总业绩比为100%。 //点击按钮&#xff0c;弹窗 <image bindtap"handleAddsales" src"/images/add.png" style"…

mongodb sharding分片模式的集群数据库,日志治理缺失导致写入数据库报错MongoWriteConcernException的问题总结(下)

一、接着上文 上文介绍了mongodb sharding的分片集群搭建&#xff0c;本文侧重于讲述日志治理。 这里使用linux自带的日志治理工具logrotate&#xff0c;无论是哪个端口的进程&#xff0c;其日志治理方式类似。 查看/data目录下的文件大小&#xff0c; du -hs *二、Logrota…

应用方案 | 内置ALC的音频前置放大器D2538A和D3308芯片

一、应用领域 D2538A和D3308是芯谷科技推出的两款内置ALC&#xff08;音频限幅器&#xff09;的前置音频放大器芯片&#xff0c;其中D2538A为单通道&#xff0c;D3308为双通道&#xff0c;它特别适用于胎心仪、个人医疗防护、立体声收录机、盒式录音机等涉及音频放大与限幅的产…

算法——矩阵,被围绕的区域

. - 力扣&#xff08;LeetCode&#xff09; 最开始也是考虑使用dfs&#xff0c;对于矩阵中的每个点&#xff0c;如果能到达边界的O&#xff0c;则跳过继续dfs。否则如果上下左右四个方向都无法到达边界的O&#xff0c;则说明当前的无法到达&#xff0c;在一个set中记录他的行数…

聚焦后成本时代赢销之道 纷享销客2024西北客户大会西安成功举办

纷享销客2024年西北客户大会西安站成功举办&#xff01;此次大会以《后成本时代的赢销之道》为主题&#xff0c;吸引了百余位客户及合作伙伴参会。 纷享销客创始人兼CEO罗旭发表演讲&#xff0c;呼吁一起凝心聚力&#xff0c;共创未来。纷享销客产品副总裁&制造行业中心总…

扫地机器人(蓝桥杯)

文章目录 扫地机器人题目描述解题思路二分贪心 扫地机器人 题目描述 小明公司的办公区有一条长长的走廊&#xff0c;由 N 个方格区域组成&#xff0c;如下图所 示。 走廊内部署了 K 台扫地机器人&#xff0c;其中第 i 台在第 Ai 个方格区域中。已知扫地机器人每分钟可以移动…

Python 自学(九) 之异常处理,文件及目录操作

目录 1. try ... except ... else ... finally 排列 P231 2. write, read, seek, readline, readlines 基本文件操作 P245 3. os模块 基本目录操作 P249 4. os.path 模块 复杂目录操作 P250 5. os 模块 高…

YoloV8改进策略:BackBone改进|GCNet(独家原创)|附结构图

摘要 本文使用GCNet注意力改进YoloV8,在YoloV8的主干中加入GCNet实现涨点。改进方法简单易用&#xff0c;欢迎大家使用&#xff01; 论文:《GCNet: Non-local Networks Meet Squeeze-Excitation Networks and Beyond》 非局部网络&#xff08;NLNet&#xff09;通过为每个查…