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

目录

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 属性 为 不同的值就可以展示不同的形态 ~!! 

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

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

相关文章

深度学习_NLP常用库报错问题解决

1、SpaCy can‘t find model ‘zh_core_web_sm‘. It doesn‘t seem to be a python package or a valid path to a data 或者 can‘t find model ‘en_core_web_sm‘. It doesn‘t seem to be a python package or a valid path to a data 安装最新的版本&#xff1a; en_…

卡通纸箱空空如也404源码

源码介绍 卡通纸箱空空如也404源码&#xff0c;喜欢的小伙伴可以下方预览看看&#xff0c;满意之后下载放到任何目录都可以使用&#xff01; 源码下载 卡通纸箱空空如也404源码

Vue2.x安装Tinymce依赖冲突解决

Vue2.x安装Tinymce依赖冲突原因 使用vue整合tinymce富文本编辑器&#xff0c;安装依赖时报错 报错的原因是下载版本与vue的版本对不上vue2.x版本应该使用如下指定版本依赖更合适 npm install --save "tinymce/tinymce-vue^3.1"额外依赖为 npm install --save &quo…

【漏洞复现】通天星CMSV6车载视频监控平台Druid弱口令漏洞

Nx01 产品简介 通天星车载视频监控平台软件拥有多种语言版本&#xff0c;应用于公交车车载视频监控、校车车载视频监控、大巴车车载视频监控、物流车载监控、油品运输车载监控等公共交通上。 Nx02 漏洞描述 通天星车载视频监控平台存在Druid弱口令漏洞&#xff0c;攻击者可以通…

【Kotlin】委托模式

1 委托模式简介 委托模式的类图结构如下。 对应的 Kotlin 代码如下。 fun main() {var baseImpl BaseImpl()var baseWrapper BaseWrapper(baseImpl)baseWrapper.myFun1() // 打印: BaseImpl, myFun1baseWrapper.myFun2() // 打印: BaseImpl, myFun2 }interface Base {fun my…

yolov5 v7.0打包exe文件,使用C++调用

cd到yolo5文件夹下 pyinstaller -p 当前路径 -i logo图标 detect.py问题汇总 运行detect.exe找不到default.yaml 这个是yolov8里的文件 1 复制权重文件到exe所在目录。 2 根据报错提示的配置文件路径&#xff0c;把default.yaml复制放到相应的路径下。&#xff08;缺少相应…

【C++入门】类和对象

目录 类的引入 类的定义 类的访问限定符及封装 访问限定符 封装 类的作用域 类的实例化 this指针 this指针的特性 两个经典问题 类的引入 在C语言的结构体中&#xff0c;只能定义变量。C在此基础上进行了升级&#xff0c;在C中&#xff0c;结构体内既可以定义变量&a…

【Leetcode】top 100 二分查找

35 搜索插入位置 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。 基础写法&#xff01;&#xff01;&#xff01;牢记…

SAP 批次号过期了不让过账配置 OMCQ - M7 667 671消息号设置为E

系统默认&#xff0c;批次到期过账时只是警告&#xff0c;仓库希望直接卡死 这种不需要增强&#xff0c;直接配置就好了 OMCQ 找到 M7 667 编号&#xff0c;把W改成E就可以了 改成E之后&#xff0c;这个过账就直接报错了 保险起见&#xff0c;把667和671都设置为E

C++ | Leetcode C++题解之第3题无重复字符的最长子串

题目&#xff1a; 题解&#xff1a; class Solution { public:int lengthOfLongestSubstring(string s) {// 哈希集合&#xff0c;记录每个字符是否出现过unordered_set<char> occ;int n s.size();// 右指针&#xff0c;初始值为 -1&#xff0c;相当于我们在字符串的左…

Linux 磁盘分区、挂载、使用情况

Linux无论有几个分区&#xff0c;分给哪一个目录使用&#xff0c;归根结底都只有一个根目录&#xff0c;独立且唯一的文件结构。 Linux中的每个分区都是用来组成整个文件系统的一部分。 Linux采用了一种“载入”的处理方法&#xff1a;整个文件系统包含了一整套的文件目录&…

神经网络发展历程:DNN、CNN、RNN

系列文章目录 李沐《动手学深度学习》多层感知机 模型概念和代码实现 李沐《动手学深度学习》卷积神经网络 相关基础概念 李沐《动手学深度学习》卷积神经网络 经典网络模型 李沐《动手学深度学习》循环神经网络 相关基础概念 李沐《动手学深度学习》循环神经网络 经典网络模型…

深入探究Shiro反序列化漏洞

Shiro反序列化漏洞 什么是shiro反序列化漏洞环境搭建漏洞判断rememberMe解密流程代码分析第一层解密第二层解密2.1层解密2.2层解密 exp 什么是shiro反序列化漏洞 Shiro是Apache的一个强大且易用的Java安全框架,用于执行身份验证、授权、密码和会话管理。使用 Shiro 易于理解的…

docker-compse安装es(包括IK分词器扩展)、kibana、libreoffice

Kibana是一个开源的分析与可视化平台&#xff0c;设计出来用于和Elasticsearch一起使用的。你可以用kibana搜索、查看存放在Elasticsearch中的数据。 Kibana与Elasticsearch的交互方式是各种不同的图表、表格、地图等&#xff0c;直观的展示数据&#xff0c;从而达到高级的数据…

Redis的配置与优化

一、关系型数据库和非关系型数据库 1.1 关系型数据库 一个结构化的数据库创建在关系模型基础上&#xff0c;一般面向于记录&#xff0c;包括&#xff1a;Oracle、MySQL、SQLServer、Microsoft Access、DB2等 1.2 非关系型数据库 除了主流的关系型数据库外的数据库&#xff0c;都…

JimuReport积木报表 v1.7.4 正式版本发布,免费的JAVA报表工具

项目介绍 一款免费的数据可视化报表&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完成报…

python高校学生兼职雇佣信息网站vue+django

而随着经济的发展&#xff0c;企业的人力成本也越来越高&#xff0c;而有些工作却存在工作时间不稳定&#xff0c;工作量不确定的特点&#xff0c;不少企业便经常雇佣兼职人员来完成其某些工作而对于另外一-些商家来&#xff0c;有不少产品需要推向校园&#xff0c;因此校园传 …

SSM框架学习——SqlSession以及Spring与MyBatis整合

SqlSession以及Spring与MyBatis整合 准备所需要的JAR包 要实现MyBatis与Spring的整合&#xff0c;很明显需要这两个框架的JAR包&#xff0c;但是只是使用这两个框架中所提供的JAR包是不够的&#xff0c;还需要配合其他包使用&#xff1a; Spring的JAR包MyBatis的JAR包Spring…

CV论文--2024.4.2

1、Unsolvable Problem Detection: Evaluating Trustworthiness of Vision Language Models 中文标题&#xff1a;无法解决的问题检测&#xff1a;评估视觉语言模型的可信度 简介&#xff1a;本文提出了一个新颖且重要的挑战&#xff0c;即视觉语言模型&#xff08;VLM&#x…