尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

form表单

form表单
📅 发布时间:2026/6/20 23:59:29

一、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')" >

    4、

 

2.2、单选框和复选框

 

 

 

2.2、select控件

 

 

2.3、

相关新闻

  • 【Zotero7】使用Attanger和百度同步空间如何进行同步?
  • 【重点!!!】必知必会必须掌握的serializers序列化器类之Serializer和ModelSerializer核心区别
  • 助教工作总结

最新新闻

  • UE Viewer:解锁虚幻引擎资源查看的10个实用技巧 [特殊字符]
  • 基于LPC4357双核MCU的互联网收音机:AMP架构与任务隔离实战
  • 如何用QuickCut高效处理日常视频:从下载到剪辑的全流程实战
  • SteamAutoCrack:3分钟解决Steam游戏离线运行难题的完整方案
  • MoE模型性能关键:专家网络与训练稳定性远胜路由算法
  • 2026 年泸州市厨卫屋顶地下室防水修缮三家横向测评:吉修匠 99.8 分五星榜首 - 吉修匠

日新闻

  • Visual C++运行库修复终极指南:5分钟快速解决Windows软件启动错误
  • 手把手教你构建统计局地区经济数据爬虫:从环境搭建到数据持久化全指南
  • 2026多Agent深度解析:用AI团队替代单一模型,四种架构实战落地

周新闻

  • Visual C++运行库修复终极指南:5分钟快速解决Windows软件启动错误
  • 手把手教你构建统计局地区经济数据爬虫:从环境搭建到数据持久化全指南
  • 2026多Agent深度解析:用AI团队替代单一模型,四种架构实战落地

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号