前端 - 基础 表单标签 - 表单元素 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 属性 为 不同的值就可以展示不同的形态 ~!! 

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

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

相关文章

# 达梦数据库知识点

达梦数据库知识点 测试数据 -- SYSDBA.TABLE_CLASS_TEST definitionCREATE TABLE SYSDBA.TABLE_CLASS_TEST (ID VARCHAR(100) NOT NULL,NAME VARCHAR(100) NULL,CODE VARCHAR(100) NULL,TITLE VARCHAR(100) NULL,CREATETIME TIMESTAMP NULL,COLUMN1 VARCHAR(100) NULL,COLUMN…

利用甘特图实现精细化项目管控

在项目管理中,通过精细化管控,项目经理能够有效规划、监督和协调各项任务,从而最大限度控制风险,优化资源配置,并确保按时、按质、按量完成项目目标。而在众多项目管理工具中,甘特图无疑是实现精细化项目管控的利器。zz-plan 是一个非常好用的在线甘特图制作工具&#xff0c;一…

Day78:服务攻防-数据库安全RedisCouchDBH2database未授权访问CVE漏洞

目录 前置知识 数据库应用-Redis-未授权访问&CVE漏洞 未授权访问&#xff1a;CNVD-2015-07557 未授权访问-CNVD-2019-21763 未授权访问-沙箱绕过RCE-CVE-2022-0543 数据库应用-Couchdb-未授权越权&CVE漏洞 Couchdb 垂直权限绕过&#xff08;CVE-2017-12635&…

【操作系统】想要更好的学习计算机,操作系统的知识必不可少!!!

操作系统的概念 导言一、日常生活中的操作系统二、计算机系统层次结构三、操作系统的定义3.1 控制和管理计算机资源3.2 组织、调度计算机的工作与资源的分配3.3 给用户和其他软件提供方便接口与环境3.4 总结 四、操作系统的目标和功能4.1 作为管理者4.1.1 处理机管理4.1.2 存储…

yolov5目标检测可视化界面pyside6源码(无登录版)

一、软件简介&#xff1a; 这是基于yolov5-7.0目标检测实现的的可视化目标检测源码 本套项目没有用户登录的功能&#xff0c;如需用户登录版&#xff0c;看另一篇文章&#xff1a;yolov5pyside6登录用户管理目标检测可视化源码_yolov5用户登入功能-CSDN博客 ①程序中图片和图标…

稳定性生产总结

本期我们来谈下稳定性生产这个话题&#xff0c;稳定性建设目标有两个&#xff1a;降发生、降影响&#xff0c; 在降发生中的措施是做到三点&#xff1a;系统高可用、 高性能、 高质量&#xff0c;三高问题确实是一个很热的话题&#xff0c;里面涉及很多点。 在降影响中要做到…

Windows系统搭建TortoiseSVN客户端并实现无公网IP访问内网服务端

文章目录 前言1. TortoiseSVN 客户端下载安装2. 创建检出文件夹3. 创建与提交文件4. 公网访问测试 前言 TortoiseSVN是一个开源的版本控制系统&#xff0c;它与Apache Subversion&#xff08;SVN&#xff09;集成在一起&#xff0c;提供了一个用户友好的界面&#xff0c;方便用…

Wheel Controller 3D

Wheel Controller 3D是Unity内置WheelCollider的完整替代品。它允许更真实的车辆行为、完全定制和3D地面检测。 Wheel Controller 3D是Unity内置WheelCollider的完整替代品。它允许更真实的车辆行为、完全定制和3D地面检测。 如果您正在寻找包含Wheel Controller 3D的完整车辆物…

路径规划——搜索算法详解(六):LPA*算法详解与Matlab代码

上文讲解了D*算法&#xff0c;D*算法为在动态环境下进行路径规划的场景提出了可行的解决方案&#xff0c;本文将继续介绍另外一种动态规划路径的方法——Lifelong Planning A*&#xff08;LPA*&#xff09;算法。 该算法可以看作是A*的增量版本&#xff0c;是一种在固定起始点…

idea开发 java web 酒店推荐系统bootstrap框架开发协同过滤算法web结构java编程计算机网页

一、源码特点 java 酒店推荐推荐系统是一套完善的完整信息系统&#xff0c;结合java web开发和bootstrap UI框架完成本系统 采用协同过滤算法进行推荐 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式…

萨科微slkor(www.slkoric.com)半导体

萨科微slkor&#xff08;www.slkoric.com&#xff09;半导体技术总监&#xff0c;清华大学李老师介绍说&#xff0c;IGBT器件与MOSFET在技术上的主要区别在于&#xff0c;在IGBT芯片背面引入了一个P掺杂的集电极。从MOSFET拓展至IGBT主要存在IGBT器件设计和IGBT器件加工工艺两方…

Layui三级联动插件使用方法

Layui高版本中没有在提供三级联动这个动画了&#xff0c;而是封装成了一个插件&#xff0c;使用方式也很简单 官网 省市县区三级联动下拉选择器 layarea - Layui 第三方扩展组件平台 (layuion.com)https://dev.layuion.com/extend/layarea/#doc html页面约束 整个选择器需要…

如何在 Oracle 中使用 CREATE SEQUENCE 语句

在本文中&#xff0c;我们将讨论 Oracle CREATE SEQUENCE 语句&#xff0c;其主要目的是提供一种可靠的方法来生成唯一且连续的数值&#xff0c;通常用于数据库表中的主键字段。此功能对于维护数据完整性和效率、确保不同记录之间的标识符有序分配尤其重要。从本质上讲&#xf…

日记本(源码+文档)

日记本&#xff08;小程序、ios、安卓都可部署&#xff09; 文件包含内容程序简要说明功能项目截图客户端首页日记列表 书写日记个人中心设置密码锁拨打客服热线修改信息退出登录登录页输入密码锁注册页 后端管理登录页首页管理员列表管理用户管理日记列表管理日记数据 文件包含…

【stm32】USART编码部分--详细步骤

USART编码部分(文章最后附上源码) 如果看不懂步骤可以根据源码参考此篇文章就能轻而易举学会USART通信啦&#xff01; 编码步骤 第一步 开启时钟 把需要用到的USART和GPIO的时钟打开 第二部 GPIO初始化 把TX配置成复用输出&#xff0c;RX配置成输入(上拉输入、浮空输入)。…

C++ 注册Nacos

下载源码&#xff1a; git clone GitHub - nacos-group/nacos-sdk-cpp: C client for Nacos 编译源码 cd nacos-sdk-cpp cmake . make 生成库文件 在nacos-sdk-cpp 下 注册nacos 将include 和libnacos-cli.so libnacos-cli-static.a 放入你的工程 如果Nacos服务地址:…

代码随想录笔记|C++数据结构与算法学习笔记-栈和队列(〇)|stack、queue、单调队列和优先级队列(priority_queue)、大顶堆和小顶堆

文章目录 stack容器stack 基本概念常用接口构造函数赋值操作数据存取大小操作 queue容器queue常用接口构造函数赋值操作数据存取大小操作 栈和队列的灵魂四问C中stack,queue是容器吗我们使用的stack,queue属于哪个版本的STL我们使用的STL中stack,queue是如何实现的&#xff1f;…

SAP CAP篇十六:写个ERP的会计系统吧,Part III

本文目录 本系列文章目标开发步骤数据库表设计Service 定义生成Fiori App更新CDS Annotation更新Entity: Companies更新Entity&#xff1a;Accounts App运行 本系列文章 SAP CAP篇一: 快速创建一个Service&#xff0c;基于Java的实现 SAP CAP篇二&#xff1a;为Service加上数据…

NLP学习路线总结:从入门到精通

自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是人工智能领域的重要分支&#xff0c;它致力于使计算机能够理解、解释和生成人类语言。NLP技术的应用范围广泛&#xff0c;涵盖了机器翻译、情感分析、语义理解、信息抽取等诸多领域。对于想要…

每日一题---存在重复元素(1)和(2)

文章目录 一、存在重复数组1,1.题目展示1.2.解题思路1.3.参考代码 二、存在重复元素||2.1.题目展示2.2.解题思路2.3.参考代码 大家学习完了数组&#xff0c;指针等内容可以进行刷题了&#xff0c;刷题不仅可以增加大家的代码量&#xff0c;也可以积累自己的经验&#xff0c;言归…