form标签中的button未指明type时默认的类型是什么

news/2024/12/4 16:55:31/文章来源:https://www.cnblogs.com/caroline2016/p/18586673

form中button未指明type时,默认type为submit

遇到了一个奇怪的现象:一个按钮打开一个Bootstrap模态框,模态框有几个表单字段和两个按钮,两个按钮可以关闭模态框,点击其中一个按钮关闭模态框后页面居然刷新了。

仔细检查后发现点击的按钮未指明type,浏览器把按钮type默认为submit了。

写个demo验证下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><form><span>用户名</span><input type="text" name="username" /><span>密码</span><input type="text" name="password" /><button>提交</button><button>取消</button></form></body>
</html>

点击两个按钮效果以下,表单提交了,要阻止这种行为,在两个button上指明type="button"

表单提交后清除表单域

function clearForm(formId) {const form = document.getElementById(formId);const elements = form.elements;for (let i = 0, len = elements.length; i < len; ++i) {const element = elements[i];if (element.hasAttribute('data-clear') && element.getAttribute('data-clear') == '0') continue;switch (element.type) {case 'password':case 'text':case 'textarea':case 'file':element.value = '';break;case 'radio':case 'checkbox':element.checked = false;break;case 'select-one':case 'select-multiple':element.selectedIndex = -1;break;default:continue;}}}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/846729.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kubernetes菜鸟学习笔记

目录环境准备dockerminikube启动minikube其他命令kubectlkubernetes dashboardKubernetesPodDeployment自动扩缩容升级版本版本回退探针探针配置项启动探针(startupProbe)就绪探针 (readinessProbe)存活探针(livenessProbe)配置示例Service示例Service和Ingress的区别Ingress示…

20222404 2024-2025-1 《网络与系统攻防技术》实验七实验报告

1.实验内容 总结一下本周学习内容,不要复制粘贴 2.实验过程 2.1 简单应用SET工具建立冒名网站 攻击机:kaii 192.168.47.141 靶机:windows xp 192.168.47.145 2.1.1 查看apache工具的默认端口,发现是80端口,于是就不用修改了查看本机的80端口是否被其他进程占用。 netstat …

python +excel 根据品类求涨出和亏损的商品的前三和后三

import pandas as pd# 读取原始数据 df = pd.read_excel(D:\\work\\2\\配料原始表.xlsx, sheet_name=Sheet1)# 按品类分组并处理数据 grouped = df.groupby(品类名称) result_dfs = [] for category, group in grouped:# 筛选亏损数据并整理格式loss_df = group[group[差异金额…

简单编写Makefile与使用make工具

简单编写Makefile与使用make工具 在不使用make工具下对c文件的编译 gcc main.c -o outgcc 《目标文件》 -o 《生成执行文件》编译main.c文件-->out.exe生成out.exe可执行文件 执行out.exe ./out.exe成功执行main编译结果PS: 在window下生成的可执行文件为后缀.exe文件windo…

sy

aHR0cHM6Ly9hcHAuc3V5aW53ZWFsdGguY29tL3N5bGMvcGFnZS9pbmRleC5odG1sI3BhZ2UvMTAvMTkvUDEwMTkuaHRtbD9wcmRDb2RlPUowMjM0Nw== 加密 开始两个debugger都可以使用“一律不在此处暂停过掉”跟栈,或者搜encrypt都可以找到加密位置 b就是请求数据 k是b生成H_TIME和H_NONCE(随机生成…

lua学习day2(懒狗随便记录)

其余的东西都大差不差,主要是我太懒了,写写pcall和xpcall吧pcall能获得调用方法、调用结果,xpcall同样也是可以的,但是里面包含了一个异常处理方法。pcall示例xpcall调用那就大致这。懒狗。。。。。。。

centos7+docker dock-compose使用

简介 Docker-Compose是Docker官方的开源项目,用于实现Docker容器集群的快速编排。 Compose简介 Compose是用于定义和运行多容器 Docker 应用程序的工具,通过Compose,可以使用YML文件来配置应用程序所需要的所有服务。然后,使用一个命令,就可以从YML文件配置中创建并启动所…

jjyh

aHR0cHM6Ly9tYmFuay5qamViYW5rLmNuL2pqY2NiV2ViL2luZGV4Lmh0bWwjL2ZpbmFuY2lhbE1hbmFnZS9saXN0P2ZpcnN0RmxhZz0zJnNlY29uZEZsYWc9JnNvcnRGbGFnPSZwcmRUeXBlRmxhZz0mY2xhc3NpZnlMaXN0VmFsdWU9JlBkQXJyYXlWYWx1ZT0mY2xhc3N0b3A9dHJ1ZQ== 包分析抓包看到的四个api的请求url皆为htt…

Net中RabbitMq.Client7.0通过依赖注入DI来管理RabbitMQ客户端的生命周期

在 RabbitMQ.Client 7.0.0 版本中, IModel 在 RabbitMQ.Client 7.0.0-alpha2 版本中已经被重命名,现在应该使用 IChannel 替代 IModel, IChannel 不再提供 CreateBasicProperties 方法。需要直接使用 BasicProperties 类来创建消息属性。 前言 关于RabbitMq的更多知识点在:…

论文泛读《PICCOLO : Exposing Complex Backdoors in NLP Transformer Models》

发表时间:2022 期刊会议:IEEE Symposium on Security and Privacy (SP) 论文单位:Purdue University 论文作者:Yingqi Liu, Guangyu Shen, Guanhong Tao, Shengwei An, Shiqing Ma, Xiangyu Zhang 方向分类:Backdoor Attack 论文链接 开源代码摘要 后门可以被注入到NLP模型…

数据库管理与开发基础教程复习(二)

Oraclec 常用工具 简单介绍: SQL*PLUS 由开始菜单启动和命令行启动 企业管理器 OEM Oracle 数据库集成管理平台 SOL PLUS常用命令 连接与断开数据库连接命令: -connect -disconnect 查看表结构命令: describe (desc) SOL*PLUS 环境参数设置命令 -set -arraysize -linesize -…

【Git基础】Gitee/GitHub使用

gitee介绍 gitee译为码云,是国内创建的一个类似与github的网站,可以上传自己的代码放在云端保存,下面介绍gitee如何使用,github类似使用操作。 git工具安装及基础 【git工具安装及基本使用】 gitee仓库创建.gitignore文件作用 git提交时需要忽略部分文件或目录本地仓库设置…