form表单使用小结
程序员文章站
2022-06-23 11:31:28
前后端交互的时候对于数据传输是必须的,form表单传输数据是经常使用的一种方式下面总结一些最近遇到的问题form表单外的按钮怎么提交form表单在前端布局的时候,我们有时候需要将提交按钮放置在form表单外,这个时候怎么去提交指定的表单呢? 话不多说,上代码像这样给表单外的按钮绑定一个函数,使得它点击时就会执行函数就可以了。按钮不在表单里没有指定submit却还会提交某个表单这是因为按钮的默认的type就是submit,如果出现了上述问题,只需要将不是提交按钮的type属性改成button即...
前后端交互的时候对于数据传输是必须的,form表单传输数据是经常使用的一种方式
下面总结一些最近遇到的问题
form表单外的按钮怎么提交form表单
在前端布局的时候,我们有时候需要将提交按钮放置在form表单外,这个时候怎么去提交指定的表单呢? 话不多说,上代码
像这样给表单外的按钮绑定一个函数,使得它点击时就会执行函数就可以了。
按钮不在表单里没有指定submit却还会提交某个表单
这是因为按钮的默认的type就是submit,如果出现了上述问题,只需要将不是提交按钮的type属性改成button即可
form表单前端想验证完再提交
对于一个form表单,即使定义了按钮点击时触发验证表单内容的函数,但是在点击提交按钮的时候,还是会触发表单提交。这个时候要知道表单的onsubmit属性,这个属性在表单提交事件发生时触发,可以让这个属性的值为一个函数,这样就可以验证表单了。说的简单,怎么验证? 看代码:
首先要注意到onsubmit后面的return,这个很重要,如果没有的话,即使后面直接是一个false,也丝毫不会影响到表单的提交。想要它不提交就return一个false就可以啦,这样就完成了一个简单的表单验证。
让input不能输入的操作
这里的 input的不能输入是指只读属性,但是可以通过其他方式来改变input的值。比如这样:
虽然不能直接通过键盘来输入,但是可以通过按钮来进行操作
本文地址:https://blog.csdn.net/qq_50646256/article/details/110235537
推荐阅读
-
css display:none使用注意事项小结
-
springboot 使用Spring Boot Actuator监控应用小结
-
Spring Cloud使用Feign实现Form表单提交的示例
-
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
-
HTML5的表单(绝对特别强大的功能)使用示例
-
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
-
详解Django中的form库的使用
-
form表单提交action不完整(form表单提交方式)
-
vue富文本框(插入文本、图片、视频)的使用及问题小结
-
vue中vee validate表单校验的几种基本使用