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

JavaScript表单基础

表单基础 表单在html中以标签元素展示,在js中它用HTMLFormElemnt类型表示。 介绍一下HTMLFormElement类型的属性和方法。...reset():把表单字段重置为各自的默认值。 submit():提交表单。 target:用于发送请求和接收响应的窗口的名字,等价于 HTML 的 target 属性。...,用户点击提交后其实是给服务器发送了表单,但是我们防止用户二次提交,会在提交后执行这个方法,阻止之后的提交。...还有一种方法就是直接禁用提交按钮,给它设置一个disabled属性。 表单字段的公共属性 前面提到disabled属性,这个就是禁用。我们看一下表单里面都有什么公共属性。...disabled:布尔值,表示表单字段是否禁用。 form:指针,指向表单字段所属的表单。这个属性是只读的。 name:字符串,这个字段的名字。

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

    HTML表单和组件

    表单在网页中主要负责数据采集功能,一个表单有三个基本组成部分: 1.表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。...当我们注册某个网站的用户时,就能看到一堆的组件,让我在这些组件里输入、选择相关的信息,然后点击提交按钮后,这些信息就会提交到服务器上,这就是组件的一个主要作用,收集组件里的数据并提交到服务器上这是表单的作用...value属性,这个属性可以给组件加上一个值,这个值会提交给服务器的,value属性还可以作为默认值使用,示例: ? 运行结果: ?...disabled,此属性用于禁用某个组件,组件声明了这个属性后就不能使用了,并且禁用组件里的数据也不会提交给服务器,示例; ? 运行结果: ?...date组件使用value属性设置默认值格式示例: ? 运行结果: ? 重置按钮示例: ? 运行结果: ?

    2.7K60

    Form 表单在数栈的应用(下):深入篇

    ​ 这篇文章的主题为我们对 Form 表单在数栈产品中使用之后理解消化的一个过程,通过介绍一些 Form 表单中常用到的方法,来理解部分设计思想,加深我们对技术的追求。...综合来看,Form.create(options) 实际上是对我们的业务组件进行了一次封装,进行了 Form 相关属性的初始化,挂载了一些需要使用的方法,并将这些方法添加到 props.form 下。...1.3 validateFields 通常使用 validateFields 方法对我们的表单数据进行校验,查看 createBaseForm.js 文件中 validateFields 方法的实现后,...this.setFields(nowAllFields); ... } 总得来说,Form 表单从初始化到表单收集校验经过了以下几个步骤: 1、通过 Form.create 方法初始了一些属性到...props.form 中,供开发者调用; 2、通过 getFieldDecorator 初始化表单的属性和值,达到双向绑定的效果; 3、校验通过,把数据存到 fieldsStore 中;校验不通过,把

    88420

    Form 表单在数栈的应用(下):深入篇

    这篇文章的主题为我们对 Form 表单在数栈产品中使用之后理解消化的一个过程,通过介绍一些 Form 表单中常用到的方法,来理解部分设计思想,加深我们对技术的追求。...综合来看,Form.create(options) 实际上是对我们的业务组件进行了一次封装,进行了 Form 相关属性的初始化,挂载了一些需要使用的方法,并将这些方法添加到 props.form 下。...1.3 validateFields 通常使用 validateFields 方法对我们的表单数据进行校验,查看 createBaseForm.js 文件中 validateFields 方法的实现后,...this.setFields(nowAllFields); ... } 总得来说,Form 表单从初始化到表单收集校验经过了以下几个步骤: 1、通过 Form.create 方法初始了一些属性到...props.form 中,供开发者调用; 2、通过 getFieldDecorator 初始化表单的属性和值,达到双向绑定的效果; 3、校验通过,把数据存到 fieldsStore 中;校验不通过,

    87210

    VFP表单返回对像、数组、值,这个细节要注意,防止崩溃

    我们会选择模式表单进行返回值操作,为了保证表单的临时表是独立环境,各个表单的数据不会影响,我们选择私有工作期。...Endif 调用模式表单获取表单的返回值 Do Form 模式表单 TO uReturn * 处理uReturn,下面的业务流程 uReturn 为返回值 上面我是设置返回.null....但有以下原因的时候,返回值并非为意想中的值. 1 当模式表单在LOAD,INIT事件加载出错 2 在init事件中 return 0 此时表单不会调用Unload方法返回值,而且没有返回值。...isnull(uReturn) *--执行工作代码 endif 从表单返回数组 在一个表单(例:frmTest)中新建一个表单属性 oCustom 在表单的 Init 事件中 This.oCustom...") Return oFly 如果从表单中的一个表中返回数组 oFly=Createobject("Empty") select * from 表名 into array xxy larow=ALEN

    62220

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

    主要用途:表单在网页中主要负责数据采集的功能,和向服务器传送数据。 9.表单提交中Get和Post方式的区别? (1)、 get 是从服务器上获取数据, post 是向服务器传送数据。...(2)、 get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中,值和表单内各个字段一一对应,在 URL 中可以看到。...在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。...14.为什么要初始化CSS样式? 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。...当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。 15.CSS样式表根据所在网页的位置,可分为哪几种样式表?

    15420

    Form 表单在数栈的应用(上): 校验篇

    一、引言 本文为主题即为 Form 表单在数栈的应用,旨在希望能通过一些在数栈已经应用的实例和笔者整理的小tips来帮助大家更深入的理解Form表单校验、以及联动校验的认知和做法。...关于 Form 表单的其他内容,在 Form 表单在数栈的应用(下) 会和大家见面。...校验表单值所有字段 这是在数栈用的比较高频的,一般在提交表单的数据时,先对当前所有表单域进行校验,只有全部通过校验才能进行下一步操作。(调接口、联动等操作) 2....问题分析:从 antd 的使用角度来讲,有域值错误时不应当再继续进行后续操作,但存在这种极限情况,问题是由于自定义校验结果产生,而此自定义校验是存在时效性的,所以此时我们应该让自定义校验具有准确性,使用...options 参数,设置 force 为 true,让每一次“提交”(校验值)操作的之前都必须重走一遍所有校验逻辑。

    2.2K20

    HTML5-表单

    如果action属性指定相对URL,那么该值会被嫁接在当前页的URL(如果使用了base元素,则是该元素的href属性值)的后面。 2....各个input元素对autocomplete属性的设置可以覆盖form元素上的行为方式。 4. 指定表单反馈信息的目标显示位置 默认情况下浏览器会用提交表单后服务器反馈的信息替换表单所在的原页面。...设置表单名称 name属性可以用来为表单设置一个独一无二uerde标识符。...禁用单个input元素 设置disabled属性,可以禁用input元素。 注意,被禁用的元素不能被提交【上述示例中,“地址”字段被禁用未被提交到服务器】。...三、使用button元素 表:button元素的type属性的值 值 说明 submit 提交表单(默认行为) reset 重置表单 button 无具体语义 表:type属性设置为submit时button

    1.9K61

    Form 表单在数栈的应用(上): 校验篇

    一、引言 本文为主题即为 Form 表单在数栈的应用,旨在希望能通过一些在数栈已经应用的实例和笔者整理的小tips来帮助大家更深入的理解Form表单校验、以及联动校验的认知和做法。...关于 Form 表单的其他内容,在 Form 表单在数栈的应用(下) 会和大家见面。...校验表单值所有字段 这是在数栈用的比较高频的,一般在提交表单的数据时,先对当前所有表单域进行校验,只有全部通过校验才能进行下一步操作。(调接口、联动等操作) 2....问题分析:从 antd 的使用角度来讲,有域值错误时不应当再继续进行后续操作,但存在这种极限情况,问题是由于自定义校验结果产生,而此自定义校验是存在时效性的,所以此时我们应该让自定义校验具有准确性,使用...options 参数,设置 force 为 true,让每一次“提交”(校验值)操作的之前都必须重走一遍所有校验逻辑。

    1.3K20

    form表单中的enctype属性

    一、form表单的作用 1、表单标签使用在一个网页中数据提交标签,这就不用多说了 2、form表单在提交时: 1)、先把form表单里的表单元素的name属性和value属性进行收集。...2)、按照enctype属性的设置,选择合适的编码方式,对数据进行编码,放在请求头里 3)、浏览器进行发送。...二、enctype属性 enctype:规定了form表单在发送到服务器时候,数据的编码方式,取值有三种情况: 1、application/x-www-form-urlencoded。默认的编码方式。...基于uri的percent-encoding编码的,表单里的数据被编码为名称/值对,但是在用文本的传输和MP3等大型文件的时候,使用这种编码就显得 效率低下。...它告诉我们传输的数据要用到多媒体传输协议,由于多媒体传输的都是大量的数据,所以规定上传文件必须是post方法,type=”file”,浏览器会把整个表单以控件为单位分割。

    1.2K30

    WEB入门之十三 jQuery选择器

    示例4.1演示了表4-1-1中前两种层次选择器的用法,下面我们通过示例4.2演示后两种层次选择器的用法。...4.1.3 表单选择器 表单在Web前端开发中使用非常频繁,jQuery专门加入了表单选择器,这给开发人员操纵表单带来了极大的便利,详见表4-1-3所示。...表4-1-4 表单属性选择器 ​名称​ ​说明​ ​​:e​​nabled 匹配并获得所有正常使用的元素 ​​:d​​isabled 匹配并获得所有禁用的元素 ​​:c​​hecked 匹配并获得所有被选中的复选框...3:实现全选/全不选 ​训练技能点​ Ø jQuery表单属性选择器 ​需求说明​ 按图使用jQuery表单选择器实现全选/全不选效果。 ​...实现步骤​ (1) 实现图4.2.4所示的界面 (2) 使用jQuery过滤选择器获取把表格中的奇数行(标题行除外) (3) 把获取到得奇数行设置为灰色背景色,参考代码如下所示。

    8310

    WEB入门之十三 jQuery选择器

    示例4.1演示了表4-1-1中前两种层次选择器的用法,下面我们通过示例4.2演示后两种层次选择器的用法。...4.1.3 表单选择器 表单在Web前端开发中使用非常频繁,jQuery专门加入了表单选择器,这给开发人员操纵表单带来了极大的便利,详见表4-1-3所示。...表4-1-4 表单属性选择器 名称 说明 :enabled 匹配并获得所有正常使用的元素 :disabled 匹配并获得所有禁用的元素 :checked 匹配并获得所有被选中的复选框 :selected...").html($("#content2").html()+$(this).val());});$("#content3").html("被禁用的元素的值是:"+$("input:disabled")....实现步骤 (1) 实现图4.2.4所示的界面 (2) 使用jQuery过滤选择器获取把表格中的奇数行(标题行除外) (3) 把获取到得奇数行设置为灰色背景色,参考代码如下所示。

    8210

    Fabric.js 右键菜单

    本文主要关注 Fabric.js 的主要 api 有: fireRightClick:允许右键点击 stopContextMenu:禁用默认右键菜单 mouse:down:鼠标点击事件 如果不知道 Fabric.js...,菜单在鼠标左侧,菜单在鼠标上方,菜单在鼠标下方); 左键单击画布其他地方,隐藏菜单; 实现思路: 创建画布; 创建 “菜单” 的DOM元素; 去官网查找 “右键相关事件”; 右键单击在元素上,根据鼠标离画布边缘的距离...:down 事件里有个 button 属性: 左键:button 的值为 1 右键:button 的值为 3 中键(也就是点击滚轮),button 的值为 2,前提需要设置 fireMiddleClick...初始化画布,并生成图形 // 文档加载后执行 window.onload = function() { // 输出当前 fabric 版本 console.log(`Facrib.js...代码仓库 原生方式实现Fabric右键菜单 在Vue3中使用Fabric实现右键菜单功能

    7.1K10

    基于 HTML5 WebGL 的 3D 棉花加工监控系统

    前言 现在的棉花加工行业还停留在传统的反应式维护模式当中,当棉花加下厂的设备突然出现故障时,控制程序需要更换。...to: -256,// 动画结束时的属性值 interval: equipInterval,// 动画间隔,单位ms next: ["moveUp"],...form 表单上的 xValue 元素,同时改变此值 formPane.iv();// 表单内容变化后要通知表单进行刷新变化 } }, moveUp...(200);// 设置表单组件的宽度 fp.setHeight(250);// 设置表单组件的高度 fp.getView().style.top = '8%';// 设置表单组件的样式...1代表固定绝对值,小于等于1代表相对值,也可为80+0.3的组合 fp.addRow([// 向表单中添加一行 此方法的参数为一个数组,可在一行中添加多个元素 {// 元素一

    1.1K20

    Spring认证中国教育管理中心-Spring Data Neo4j教程一

    请通过您的依赖管理包含启动模块并配置要使用的螺栓 URL,例如org.neo4j.driver.uri=bolt://localhost:7687. 启动器假定服务器已禁用身份验证。...有关可用属性的参考,请使用org.neo4j.driver命名空间中的 IDE 自动完成功能或查看专用手册。...作为一般评论:使用内部生成的 id 的不可变实体有点矛盾,因为 SDN 需要一种方法来使用数据库生成的值设置字段。...它将 id 设置为 null,因为不应操纵包含内部 id 的字段。 这就是所谓的-属性凋零id。它创建一个新实体并相应地设置字段,而不修改原始实体,从而使其不可变。...此外,使用商店细节会将您的商店泄漏到您的域中。从性能的角度来看,没有惩罚。 适合上述任何电影实体的反应式存储库如下所示: 清单 9.

    1.2K10

    Ajax笔记(3)-axios

    设置请求头 我们写一个请求头的配置: 现在我们学习ajax提交表单 什么是表单 表单在网页中主要负责数据采集功能,HTML中的标签,就是用来采集用户输入的信息,并通过...>标签的属性则是用来规定如何把采集到的数据发送到服务器 action action属性的值应是后端提供的一个URL地址,这个URL地址专门负责接收表单提交过来的数据,当form表单在未指定action...属性值的情况下,action的默认值是当前页面的URL地址....注意:当提交表单后,页面会立即跳转到action属性指定的URL地址 target target属性用来规定在何处打开action URL 它的可选值有5个,默认情况下,target的值是_...method method属性用来规定以何种方式把表单数据提交到actionURL 它的可选值有两个,分别是get和post 默认情况下,method的值是get,表示以URL地址的形式,

    81020

    原 基于 HTML5 WebGL 的 3D

    )方法来做的,动画插件更进一步对动画进行封装,用户只需用描述性的说明 HT 即可自动实现动画过程,动画插件可以将图元的一个或多个属性值 (如 width、height、opacity 等)从一个值平滑的缓动至另一个值...to: -256,// 动画结束时的属性值 interval: equipInterval,// 动画间隔,单位ms next: ["moveUp"],...form 表单上的 xValue 元素,同时改变此值 formPane.iv();// 表单内容变化后要通知表单进行刷新变化 } }, moveUp...= new ht.widget.FormPane();// 创建表单组件实例 fp.setWidth(200);// 设置表单组件的宽度 fp.setHeight(250);// 设置表单组件的高度...1代表固定绝对值,小于等于1代表相对值,也可为80+0.3的组合 fp.addRow([// 向表单中添加一行 此方法的参数为一个数组,可在一行中添加多个元素 {// 元素一

    1.6K60

    ASP.NET MVC 5 - 给数据模型添加校验器

    请在数据库中,检查电影表的schema: ? 该字符串字段显示新的长度限制和流派字段(Genre)不能再为空。 验证属性指明您想要应用到模型属性的行为。...在上面的代码中,流派(Genre)和等级(Rating)只能使用字母(空格,数字和特殊字符是不允许的)。该范围(Range )属性约束的值在一个指定范围内。...值类型(decimal, int, float, DateTime)有固有必需设置的,不需要的Required属性。...请注意,表单在每一个相应的验证错误消息旁边,已经自动使用红色边框的颜色突出显示文本框指明无效数据。...您在前面教程所创建的控制器和视图会自动启用,使用验证指明的Movie model类的属性。使用Edit行为方法,同样的验证方法也完全适用。直到没有任何客户端验证错误的表单数据,才会被发送回服务器。

    9.1K70

    【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之前端字典项和el-form重置及页面杂项知识点记录

    至少在我以前工作的场景中,后端只会口头或者以文档的方式告知字段中哪个值代表的什么含义,比如在性别中,1代表男,2代表女。不会有专门的接口去获取这些字典项。...但是这时候我发现,在表单初始化的时候,这种radio类的标签,往往需要给一个默认值,如果我们写死的话,就和字典的初衷有点违背了,虽然这种东西的值很大概率是不会修改的,但我有强迫症,总是感觉不舒服。...但这样写又会有一个问题,那就是在表单渲染的时候会把这个default也渲染上。 这个问题我们可以给default字段设置不可枚举来解决。...虽然我们上面执行了await nextTick()操作,使得表单在被赋值前就已经渲染了一遍,但渲染的时候menuType是1(也就是一级菜单),那么那些v-if条件为menuType等于2或3时候才显示的表单显然无法初始化...而我们修改二级菜单时(menuType等于2),这时候这部分字段对应的表单才被初次初始化,而他们接收的值是编辑时候传入的值,这个值也就变成了这个表单项的初始值。

    1.3K10
    领券