首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

表单常用的控件有哪些_html表单控件样式修改

表单特性   value属性规定输入字段的初始值;   readonly属性规定输入字段只读(不能修改); readonly属性不需要值,它等同于readonly=“readonly”。   ...如果需要提醒用户必须编写javascript代码 提醒:输入限制并非万无一失。javascript提供了很多方法来增加非法输入。如必须同时对限制进行检查。...H5新增表单特性 placeholder   输入提示信息   autocomplete 是否保存用户输入值(默认为on,关闭提示选择off)   autofocus    指定表单获取输入焦点...  required    此项必填,不能为   pattern   正则验证 pattern=”\d{1,5}”   formaction  在submit里定义提交地址 (只在opera...重置按钮会清除表单中的所有数据 submit 定义提交按钮。提交按钮会把表单数据发送到服务器 text 定义单行的输入字段,用户可在其中输入文本,默认宽度20个字符。

3.9K20
您找到你想要的搜索结果了吗?
是的
没有找到

一件事让客户成为你的忠实用户

进入To B系统,满屏都是列表,基本上列表页和查询条件占据了系统的一半以上,并且大部分的功能都是从列表查询页开始的一系列增删改查,这其中涉及到前端相关的交互就有”表格/表单(数据录入和编辑)/弹.....多属性组合搜索 适用场景:对页面空间要求比较高,无多余空间放置其他筛选项,需要进行多属性组合搜索,得到精确的搜索结果。 优点:占用空间小,页面非常简洁,搜索条件集中好聚焦。...搜索和条件组合 搜索条件组合 搜索和条件组合 虽然这个方案使筛选区的空间占比缩小,整体页面也看似整洁不少。...数据:当数据时,用”-“填充展示;避免直接留白,容易给用户造成一定的误解和困惑,没加载出来or bug?...编辑页面:进入编辑页面时,若有搜索条件,返回主列表也应回到上次的位置【记住上一次的查询条件】;若无搜索条件,回到首页(第一页)。 保留查询条件:删除操作时。

1.5K10

bootstrap-suggest插件

data-id,设为 -1 且 idField 则不设置此值 indexKey: 0, //每组数据的第几个数据,作为input输入的内容... true 即输入关键字包含或包含于匹配字段均认为匹配成功, false 输入关键字包含于匹配字段认为匹配成功 multiWord: false, // 以分隔符号分割的多关键字支持...,单位毫秒 emptyTip: '', // 查询时显示的内容,可为 html searchingTip: '搜索中...', // ajax 搜索时显示的提示内容,当搜索时间较长时给出正在搜索的提示 hideOnSelect: false, // 鼠标从列表单击选择了值时,是否隐藏选择列表...设为 true,当下拉菜单高度超过窗体,且向上方向不会被窗体覆盖,选择菜单向上弹出 autoMinWidth: false, //是否自动最小宽度,设为 false 最小宽度不小于输入宽度

10.9K40

表单

:此属性指示服务器上处理表单输出的程序,一般来说,当用户单击表单上的"提交"按钮后信息发送到Web服务器上,由attion属性所指的程序处理如果action默认提交到本页     method:此属性告诉浏览器...例如如果表单上有几个文本,可以按名称来标识它     value        此属性是可选属性他指定元素初始值,如果typeradio类型必须指定一个值     size        此属性指定表单元素的初始宽度...       如果typetext或passWord类型表单元素大小以字符单位对于其他输入类型,宽度以像素单位     maxlenght        此属性指定可在text 或 password... 搜索   search用于提供输入搜索关键字的文本虽然外观看起来和input差不多实现起来却不容易因为...="要输入的关键字"/>   2 required     属性用于规定文本填写内容不能为,否则不允许用户提交表单   3 pattern

4.7K90

前端面试题-每日练习(3)

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,...label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。...b、表单域:包含了文本、密码、隐藏域、多行文本、复选框、单选框、下拉选择、和文件上传等。...理论上, IIS4 中最大量 80KB , IIS5 中 100KB 。 (5)、 get 安全性低, post 安全性较高。 10.CSS有什么特殊性?...;如果页面浮动布局多,就要增加很多div,让人感觉很不好 建议:不推荐使用,此方法是以前主要使用的一种清除浮动方法 (3)、父级div定义 伪类:after 和 zoom 原理:IE8以上和非

14020

表单的 9 种设计技巧【下】

如下图,当电子邮件输入时,触发全局提示: 图片 图片 技巧 8:成功提交后重置到默认值 一般情况下,在提交表单后自动清除输入是很重要的。...图片 但在一些特殊情况下,一些表单项的输入值需频繁复用,此时可以在表单中添加一个清除按钮,并配置好单击事件的动作,让用户自己决定是否清除和重置输入。...技巧 9:布局 最后一个技巧是设计用户友好的组件布局,这并没有千篇一律的公式,码匠您总结了以下几点建议: 使用对话 前面提到,许多情况下需要搭配使用表格组件和表单组件。...当涉及到更新表格中的一条记录时,最佳做法是将表单放入对话中,当用户点击链接或按钮时,再自动弹出填充了默认值的表单,而不是将表单一直静态展示在表格旁边,防止用户在浏览表单时不小心编辑数据。...具体可参阅使用对话 (Modal)。 图片 保持创建和更新的表单结构相同 创建和更新的表单应保持同样的输入逻辑,如果您重新排列输入的顺序,用户可能会因为之前的习惯导致出错。

2.3K00

【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )

一、HTML5 新增 input 表单属性 ---- HTML5 新增 input 表单属性 : required 属性 : 属性值 required , 一旦设置了该属性 , 表单的内容就是必填项..., 不能为 ; placeholder 属性 : 属性值提示文本 , 又称为占位符 , 用于设置表单的提示信息 , 如果有默认值则不显示 ; multiple 属性 : 属性值 multiple...表单的内容就是必填项 , 不能为 ; 如果设置普通的表单 , 不设置 required 属性 , 用户名 : 不管在表单内输入什么内容 , 的内容也能提交 ; 如果表单设置了 required="required..., 如果有默认值则不显示 ; 如 : 某商城 , 其搜索表单 , 就有占位符 , 还可以当广告卖 ; 代码示例 : <!

2.9K30

测试需求平台11-产品管理交互Acro必要组件掌握

,通常用于报告系统错误或告知结果; 确认用户决定 :使用对话来确认用户的决定,清楚描述当前行为可能导致的潜在后果,如果该行为具有破坏性或不可逆转性,使用报错警告色。...Form 具有数据收集、校验和提交功能的表单,内部组件包含复选框、单选框、输入、下拉选择等,根据需要进行自由基础组件组合扩展, 基础用法 一个比较简单由input、checkbox、button...组成的表单,在提交时候获取表单项值 例子代码参考如下: 表单主包包裹, :mode绑定组值对象 子项,filed(数据项必填)表单元素在数据对象中的path...输入 Input 光标位于输入时,允许用户输入或编辑文本内容的基本表单组件。...后缀图标:根据不同场景具有多样的功能,常用场景如下: 错误提示,可与辅助文字中的错误提示结合出现; 内容清除按钮,可点击一键清除输入中已输入的内容; 语音输入按钮,点击触发语音输入功能; 密码隐藏按钮

22320

Java学习笔记-全栈-web开发-01-HTML基础总览

1.4.3 的Html标签 没有内容的 HTML 元素被称为元素。元素是在开始标签中关闭的。 就是没有关闭标签的元素( 标签定义换行)。...在开始标签中添加斜杠,比如 ,是关闭元素的正确方法。 即使 在所有浏览器中都是有效的,使用 其实是更长远的保障。...---- 以下是关于标签type属性值说明 : text 定义单行的输入字段,用户可在其中输入文本。默认宽度 20 个字符。...重置按钮会清除表单中的所有数据。 其它常用属性: name:定义标签名称 value:按钮显示名称 image 定义图像形式的提交按钮。...2.9.5 表单的应用场景 “表单”的意思可以理解,“一张让用户填写信息的表,这张表会被提交到服务器,然后服务器会保存这张表的信息”; 因此,最常见的场景是登陆、注册、填写个人资料等。

2.5K20

微信小程序|设置表单界面

表单的内容有很多,提示性的输入,手机号码短信验证的输入以及错误提示输入等。那么应该如何来设置一个完整的表单界面呢? 解决方案 不同的输入类型构成了一个完整的表单,需要对不同的输入进行设置。...Value当前输入的值,required设置表单必填星号,clearable设置是否启用清除控件,label输入左侧的文本,placeholder输入时的占位符,error将输入内容标红,border...onClickIcon" /> <van-field value="{{ username }}" label="<em>用户</em>名..." placeholder="请输入<em>用户</em>名" error /> <van-field value="{{ phone }}" label="手机号" placeholder...一个简单的输入仅仅需要一个field标签就够了,常见的输入都是五花八门的,这些样式都是由表单的配置参数来设置的,这样就需要掌握熟悉这些参数的性质。 END

2.6K40

前端高薪必会的JavaScript重难点知识:防抖与节流详解

如果我们要监听浏览器滚动事件,或监听输入值变化查询搜索结果等等,这些场景有个共同特点,频繁执行,然而我们不需要太频繁执行,比如滚动事件,间隔几百毫秒或者一秒执行回调就能满足业务需求,所以才有了节流和防抖的概念...二、防抖案例:搜索查询 比如我们在一个表单中输入内容,JS通过监听输入值的变化来查询搜索结果,我们会通过keyup事件来处理,当键盘弹起时就会触发keyup事件,在事件处理函数中发送请求处理查询结果。...我们希望当我们抬起键盘间隔几百毫秒后再触发keyup事件处理函数发送请求查询(如果在间隔时间内再次触发keyup事件,就会把上一次的定时器清除,重新再计时)。...应用场景 搜索输入查询、手机号、邮箱验证输入检测。只需用户最后一次输入完,再发送请求 窗口大小resize。只需窗口调整完成后,计算窗口大小,防止重复渲染。...应用场景 防抖应用场景 搜索输入查询、手机号、邮箱验证输入检测。只需用户最后一次输入完,再发送请求 窗口大小resize。只需窗口调整完成后,计算窗口大小,防止重复渲染。

1.6K00

JeecgBoot 3.5.1 版本发布,开源的企业级低代码平台

类没有无参构造函数 #4594树开表单列的字段如果带着下划线会导致生成的 *mapper.xml 中 SQL语句出错 #4649生成的代码条件里时间选择器有问题 #417租户用户编辑会导致重复添加一模一样的数据...#4747用户租户表(sys_user_tenant)未做唯一性约束,会造成多次添加默认租户 #4698下拉搜索问题 #286springCache中的清除缓存的操作使用了“keys”。...原生以后,界面导出的功能不能使用查询条件了 #425文件上传问题 #4672oConvertUtils 里面判断字符串的方法有问题 #292分类字典数据量过多会造成数据查询时间过长,显示“接口请求超时...#4550在表单中使用v-model:value绑定JSelectDept组件时无法清除已选择的数据!...,支持用户自定义表单布局,支持单表,一对多表单、支持select、radio、checkbox、textarea、date、popup、列表、宏等控件专业接口对接机制,统一采用restful接口方式,集成

1K10

常用的键盘事件

案例分析   核心思路: 检测用户是否按下了 s 键,就把光标定位找到搜索里面        使用键盘事件对象里面的keyCode 判断用户是否按下了S 键        搜索获得焦点:使用js里面的...案例分析   快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大)        表单检测用户输入: 给表单添加键盘事件        同时把快递单号里面的值(value)获取过来赋值给... con盒子(innerText)做为内容        如果快递单号里面内容隐藏大号字体盒子(con)盒子 <div class="...if (this.value == '') { // <em>为</em><em>空</em>,隐藏放大提示盒子 con.style.display = 'none...== '') { // 不为<em>空</em><em>则</em>显示提示盒子 con.style.display = 'block'; }

3.1K10

React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)

new : 引入lodash的isEqual进行对象深度比对,降低state的合并次数,减少re-render 2018-11-19 : new : 表单提交前,value数组不返回,字符串value...,其他选择性的控制项会直接触发) 2019-1-9: new : 若是组件没有添加getFieldDecorator的rules条件,把下margin去掉 效果图 响应式传入 折叠展开搜索条件,默认六个隐藏展开按钮...,大于显示(点击直接取数据源的长度) 传递子组件作为搜索按钮区域 统一变动控件的规格 重置表单 子组件引入自身响应式条件(会话状态,按钮太多,等分会造成各种换行,不舒服) 非Input的控件,自动触发表单提交...// 若是key数组跳过 removeNotNeedValue = obj => { // 判断必须obj if (!... ); default: return null; } }; // 折叠搜索条件

13310

html5语义化标签——回顾

跟普通的没什么区别当输入不是邮箱的时候,验证通不过移动端的键盘会有变化 tel   :   电话号码 url   :   网页的URL search  :  搜索引擎 chrome下输入文字后,...placeholder  :  输入提示信息     例子 :  微博的密码提示 autocomplete  :  是否保存用户输入值       默认为on,关闭提示选择off autofocus... :  指定表单获取输入焦点     list和datalist  :  输入构造一个选择列表list值datalist标签的id required  :  此项必填,不能为 Pattern...: 正则验证  pattern="\d{1,5}“ Formaction 在submit里定义提交地址 表单验证 validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回...false     oText.addEventListener("invalid",fn1,false);     ev.preventDefault() valueMissing  :  输入值

2.2K80

HTML-CSS基础学习

提交表单时,检测输入值不能为 autocomplete 自动完成功能 on/off formaction 重置表单默认行为的新属性 image...http-equiv="content-type" content="text/html; charset=uft-8"/> -refresh 指定页面的刷新或跳转的间隔时间和跳转的资源 url刷新当前页面...下载链接或js脚本使用 下载该文件 js脚本链接 表格 table 表格属性: border:表格边框长度,没有边框...type="color"> HTML5中新增的表单元素 datalist 可以为文本提供选择的列表,也可以由用户自己输入,需要绑定文本的listdatalist的id <input type="...-scoll 裁剪内容,提供滚动机制 -auto <em>如果</em>溢出,<em>则</em>赢提供滚动机制 -no-display <em>如果</em>内容不适合内容<em>框</em>,<em>则</em>删除整个内容 -no-content <em>如果</em>内容不适合内容<em>框</em>,<em>则</em>隐藏整个内容

4.8K30

JavaScript进阶之路系列(三):节流防抖

函数节流(throttle)预先设定一个执行周期,当调用动作的时刻大于等于执行周期执行该动作,然后进入下一个新周期。...区别 可以拿我们平时坐电梯例来形象地表述二者的区别: 函数防抖:如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10...应用场景 函数防抖的应用场景 连续的事件,只需触发一次回调的场景有:搜索搜索输入。只需用户最后一次输入完,再发送请求手机号、邮箱验证输入检测窗口大小Resize。只需窗口调整完成后,计算窗口大小。...函数节流的应用场景 间隔一段时间执行一次回调的场景有:滚动加载,加载更多或滚到底部监听谷歌搜索搜索联想功能高频点击提交,表单重复提交。...context) },500) } 代码意思很明显,这个方法接受你想防抖的函数以及他的上下文,然后在500ms延时之后执行这个函数,若下一次函数在500ms内调用清除上个定时器然后在延迟

74530
领券