当前位置: 首页 > news >正文

form表单和表单控件

一、form表单

 

 

 

 

 

 

二、表单控件

  • 表单控件元素不要设置高度,或者以em作为高度的单位。文字和边框的距离可以使用padding来实现。

2.1、input控件

  • 使用  input type='number' 表单 有缺陷:这个表单只能输入数字,但是 字母 e、字符+、-   确是可以输入。而 表单中有e、+、-符号输入,js获取的值确是一个空字符串。如图
            
               

       如果要实现只能输入数字,需要通过事件辅助处理。这种情况 使用 text表单,也可以模拟出数字表单控件。

    <input type="text" oninput="this.value=this.value.replace(/\D/g,'')">

      如果是是在 移动端 要调用出 数字键盘的话,只能使用 number 控件,再通过事件辅助处理。

    <input type="number" oninput="this.value=this.value.replace(/\D/g,'')">
  • 数字输入框常用的控制【只能输入数字和小数点】:https://blog.csdn.net/weixin_42171955/article/details/98734640

    • 只允许输入数字(整数:小数点不能输入)
      <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >
    • 允许输入小数(两位小数)
      <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >
    • 允许输入小数(一位小数)
      <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" >
    • 开头不能为0,且不能输入小数
      <input type="text" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >
    • 只能输入数字或小数且第一位不能是0和点且只能有一个点
      <input type="text" onkeyup="value=value.replace(/[^1-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')" >

     

 

2.2、单选框和复选框

  • 单选框和复选框  是否选中判断

    1、复选框   (value值是提交给后台的值,不管有没有选中都是不变的)

      只要复选框标签上有 checked 这个属性,不管这个属性有没有值或是false还是true,都是表示选中,在js中获取的 checked 属性值就是true;

      当复选框标签上没有 checked 这个属性,则在js中获取的 checked 属性值就是false;

      当选中这个复选框的时候,在js中获取的 checked 属性值就是true

    总结:不管有没有设置checkbox 这个属性,反正只要选中这个复选框,在js中获取到他的 checkbox属性都是true;反之没有选中, js获取的值就是false。

    注意:jQuery中Atrr获取checkbox 的值永远都是  undefined 。修补方法是用prop方法来解决。参考:   http://www.jb51.net/article/51136.htm

    2、单选框(同复选框)

     

    3、disabled 属性  (凡是按钮功能首选button标签,不要使用div)

    disabled 属性规定,应该禁用 input 元素(包括button标签,但是div等其他标签没有想过)。被禁用的 input 元素既不可用,也不可点击。

    4、 自定义复选框checkbox样式

         参考:https://blog.csdn.net/u014291497/article/details/52081774   或  http://www.xiumu.org/technology/style-checkboxes-with-css.shtml

       根据实际label有他的作用,所以改造了下结构:

 

 

2.2、select控件

 

 

2.3、

http://www.wxhsa.cn/company.asp?id=2971

相关文章:

  • 阿里云OSS图片生成缩略图和获取视频的封面方法
  • VSCode 运行 Python
  • [mysql] 卸载
  • 树上问题
  • 突发!美国将复旦微等23家中国实体列入“实体清单”
  • [GenAI] Function Calling
  • form表单
  • 【Zotero7】使用Attanger和百度同步空间如何进行同步?
  • XSS 漏洞挖掘学习
  • str
  • 到底该用 KPI 还是 OKR ?
  • 【重点!!!】必知必会必须掌握的serializers序列化器类之Serializer和ModelSerializer核心区别
  • StringUtils.isNotBlank和StringUtils.isNotEmpty的区别
  • ECT-OS-JiuHuaShan框架元推理,已在DeepSeek上实现agi
  • 9.13CSP-S Day6 模拟赛
  • 助教工作总结
  • 了解一下Redis Stack扩展功能
  • 游戏运行库合集 集成VC++、.NET、DirectX、XNA等千款组件,一键安装游戏必备依赖库 - 指南
  • 【CE】图形化CE游戏教程通关手册 - 详解
  • GZHOIOJ律(三)
  • visual studio 切换重载
  • [AGC022F] Checkers 题解
  • 程序员的副业变现之路:我的双平台矩阵打法
  • Python 潮流周刊#119:Google 停止开发 Pytype!
  • 利用k8s client-go库创建CRD的informer的操作流程
  • Golang并发编程及其高级特性
  • 单个光子的行为、传播特性、物质相互作用及其应用就是[光学原理与应用-449]:量子光学 - 量子光学研究的
  • 和为 K 的子数组-leetcode
  • 元推理agi不是象人思维,而是教人思维,人类脸上挂不住啊
  • 《10人以下小团队管理手册》读后感