html 表单小结,form表单使用小结

前后端交互的时候对于数据传输是必须的,form表单传输数据是经常使用的一种方式

下面总结一些最近遇到的问题

form表单外的按钮怎么提交form表单

在前端布局的时候,我们有时候需要将提交按钮放置在form表单外,这个时候怎么去提交指定的表单呢? 话不多说,上代码

07ac61c6ae83ae61d96ff308d7e5b856.png

7a77f194e306454bed18d8b5b8f1b221.png

像这样给表单外的按钮绑定一个函数,使得它点击时就会执行函数就可以了。

按钮不在表单里没有指定submit却还会提交某个表单

这是因为按钮的默认的type就是submit,如果出现了上述问题,只需要将不是提交按钮的type属性改成button即可

798db22387338ba6f3a6d640bbd6ea55.png

form表单前端想验证完再提交

对于一个form表单,即使定义了按钮点击时触发验证表单内容的函数,但是在点击提交按钮的时候,还是会触发表单提交。这个时候要知道表单的onsubmit属性,这个属性在表单提交事件发生时触发,可以让这个属性的值为一个函数,这样就可以验证表单了。说的简单,怎么验证? 看代码:

6d88721eef88ad0fd2dd0547630dee71.png

7dc10dbe9062c6124cdacbbec9d3955e.png

首先要注意到onsubmit后面的return,这个很重要,如果没有的话,即使后面直接是一个false,也丝毫不会影响到表单的提交。想要它不提交就return一个false就可以啦,这样就完成了一个简单的表单验证。

让input不能输入的操作

这里的 input的不能输入是指只读属性,但是可以通过其他方式来改变input的值。比如这样:

9fb676f8c11bdc582f7b0d30198e2dde.png

虽然不能直接通过键盘来输入,但是可以通过按钮来进行操作

1bda73a3cb9faed1e4f345479a97ca87.png

本文地址:https://blog.csdn.net/qq_50646256/article/details/110235537

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值