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

我怎么能有两个表单而不用java script链接到另一个页面呢?

要实现在不使用JavaScript的情况下,在一个页面中拥有两个表单并且能够链接到另一个页面,可以考虑以下方法:

  1. 使用HTML的form标签和submit按钮:在HTML中,可以使用form标签创建表单,并在每个表单中添加不同的input元素和submit按钮。每个表单都可以有自己的action属性,指定提交表单后跳转的页面。用户填写完一个表单后,点击对应的submit按钮即可提交该表单并跳转到指定页面。

示例代码:

代码语言:txt
复制
<form action="page1.html" method="POST">
  <!-- 表单1的输入字段 -->
  <input type="text" name="field1">
  <input type="submit" value="提交表单1">
</form>

<form action="page2.html" method="POST">
  <!-- 表单2的输入字段 -->
  <input type="text" name="field2">
  <input type="submit" value="提交表单2">
</form>
  1. 使用HTML的iframe元素:可以在一个页面中使用iframe元素嵌入另一个页面,实现两个表单的展示和提交。每个表单可以分别位于iframe中的不同区域,用户填写完一个表单后,点击对应的提交按钮即可提交该表单并在iframe中加载指定页面。

示例代码:

代码语言:txt
复制
<!-- 页面1中的表单 -->
<form action="page1.html" method="POST" target="iframe1">
  <!-- 表单1的输入字段 -->
  <input type="text" name="field1">
  <input type="submit" value="提交表单1">
</form>

<!-- 页面2中的表单 -->
<form action="page2.html" method="POST" target="iframe2">
  <!-- 表单2的输入字段 -->
  <input type="text" name="field2">
  <input type="submit" value="提交表单2">
</form>

<!-- iframe用于展示表单提交后的页面 -->
<iframe name="iframe1"></iframe>
<iframe name="iframe2"></iframe>

以上两种方法都不需要使用JavaScript来实现表单的链接和跳转,但需要注意的是,第一种方法在提交表单时会刷新整个页面,而第二种方法则可以在iframe中局部刷新,提升用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 【JavaWeb】89:request请求

    数据传输的格式是怎么样的? 对于服务器来说: 如何获取用户提交的数据? 如何将结果响应给浏览器? 画一张图,对其做一个分析: ?...①登录页面 这是在网上找的一个bootstrap登录页面,其本质也就是一个form表单,只不过加入了美化。...form表单标签有两个属性: action:也就是表单提交后会跳转的路径,这边设置的为“/getServlet” method:也就是请求方式,这边设置的是get请求。...详情见下图,模拟post请求时也就可以修改这两个属性。 ? ②浏览器地址 当点击登录提交按钮后,浏览器就会跳转action中对应的那个路径。其中get请求:会将参数拼接到url后面。 如何拼接的?...内容自然是需要装在容器里面的,这里的容器也就是request域对象。 和Java里的Map集合有一定的类似之处,就连API也很类似。 ?

    93030

    揭秘前端文件上传原理(二)

    “ 上一篇文章讲到了以Form表单,将文件数据编码为特定的类型,来作为前端文件上传的载体,这一篇再来看看,如果不使用Form表单,不以FormData去提交数据,我们又将如何上传文件到云端?”...上面解释了规范的必要性,其实也说明了另一个方面,From表单是一种规范,就不遵守规范可以吗?...接下来执行,前端上传点击,这里就不演示了,然后打开服务端的file文件夹看看上传的内容你会发现,这TM不就是上传的文件吗,简直一毛一样,没错,就是你上传的文件,而且不用解析。 ?...---- 这一篇内容写到这儿,简单总结一下,本文里面从解释Form表单规范的意义到脱离FormData规范上传文件,其中还认识浏览器提供的File和Blob两个API,并且做了简单介绍,最终完成了无Form...接下来再提出一个问题引出下一节,当你的后端需要的数据不是ArrayBuffer这种二进制数据,而是Base64的编码数据?那又该怎么传输?或者你上传的文件要做上传进度条又要怎么去做

    3.3K105

    使用 Flask 做一个评论系统

    因为博客使用的Disqus代理服务下线,博客的评论系统可能有一阵子没有工作了。惭愧的是竟然最近才发现,的工作环境一直是没有GFW存在的,发现是因为有个朋友为了留言给我不惜通过赞赏1元钱的方式。...赞赏功能也是最近才上的功能,但我怎么是这么一个无良的博主认为一个好的评论交流环境还是非常有必要的。...另一个极端,是把所有评论都展平,按回复时间排序显示,这样又会失去回复的上下文信息。还是那句话,够用就好,选择了一条折中的方式:两层树形展示。...评论管理 对应的,在管理员页面也加上一个评论管理页面,以及开启内置评论的开关。因为最初设计的是评论一经发出,只能删除,不能修改,所以这种页面这样的CRUD程序员来说不在话下。...只复制请求上下文,而会创建新的应用上下文,写了两个函数,一个是添加应用和请求上下文到一个函数,另一个是将函数转换成后台任务: Python def with_app_context(f): ctx

    1.2K20

    JSP 防止网页刷新重复提交数据

    缺点:简单地运用Response.Redirect将不再有效,因为用户从一个页面转到另一个页面,我们都必须用客户端代码清除location.history。...JSP页面的,不太明白你说的重复刷新是什么概念   6 ajax 无刷新提交 7 Web开发中防止浏览器的刷新键引起系统操作重复提交 怎么解决?...但是struts的action里面mapping.findword();跳转的话,默认的是在工程文件夹里面找要跳转的页面。这种情况,怎么解决?...因为在默认情况下,用户提交表单之后可以通过后退按钮返回表单页面不是使用“编辑”按钮!),然后再次编辑并提交表单向数据库插入新的记录。这是我们不愿看到的。        ...后来又看到有人建议用location.replace从一个页面转到另一个页面。这种方法的原理是,用新页面的URL替换当前的历史纪录,这样浏览历史记录中就只有一个页面,后退按钮永远不会变为可用。

    11.5K20

    springmvc笔记_SpringMVC优点

    annotation-driven配置帮助我们自动完成上述两个实例的注入。 --> <!...,但是页面结果的结果是不一样的,从这里可以看出视图是被复用的,控制器与视图之间是弱偶合关系。...return "test"; //跳转到test页面显示输入的值 } } 3、输入中文测试,发现乱码 [外图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpjITslk-...传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。 使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。...java.net包下 [外图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMPdXivu-1609824493767)(C:\Users\王东梁\AppData\Roaming

    4.6K10

    为被动扫描器量身打造一款爬虫 —LSpider

    除了为被动扫描器服务以外,还有什么是在项目发起时的初衷的答案是,这个爬虫+被动扫描器的目的是,能让不投入过多精力的基础上,挖洞搞钱!!!...self.driver.set_page_load_timeout(15) self.driver.set_script_timeout(5) 这两个配置可以设置好页面加载的超时时间,在大量的扫描任务中...这里把智能表单填充分为两部分,首先我们需要判断当前页面是否存在一个登录框,这意味着当前页面并没有登录(如果登录状态,一般登录框会消失)。...结果去重 到目前为止,我们至少触发了属于页面中大量的请求,接下来我们就遇到了另一个问题,如何对流量去重?...,可能cookie已经失效了,怎么解决

    1K20

    java从入门到精通二十五(vue和element 对项目的改进)

    java从入门到精通二十五(vue和element 对项目的改进) vue 常见的vue指令 生命周期 vue对项目前端的优化 Element 页面设计 Servlet 代码功能优化 vue 我们之前获取前端表单数据的时候...双向数据绑定的优点是无需进行和单向数据绑定的那CRUD(Create,Retrieve,Update,Delete)操作双向数据绑定最经常的应用场景就是表单了,这样当用户在前端页面完成输入后,不用任何操作... 我们就看这个表单展示页面。...但是其实还有一个问题就是这个页面太丑了。这个表单太丑了,是绝对不会访问这样的页面的。 那么我们还有什么办法?css?不,不用这个美化。我们用element。...我们该如何优化? 之前我们写每个功能都需要写这个。 现在我们不这样写了,我们写一个类。 我们知道我们服务器启动调用service。我们可以从这里入手。

    89040

    Cors跨域(一):深入理解跨域请求概念及其根因

    既然跨域是个如此常见(特别是当下前后端分离的开发模式),因此深入理解CORS变得就异常的重要了(反倒前端工程师不用太了解),因此早在2019年刚开始写博客那会就有过较为详细的系列文章: ?...模拟跨域请求 要模拟跨域请求的根本是需要两个源:让请求的来源和目标源不一样。这里就使用IDEA作为静态Web服务器(63342),Tomcat作为后端动态Servlet服务器(8080)。...Origin的值只包括协议、域名和端口,Rerferer不但包括协议、域名、端口还包括路径,参数,注意不包括hash值 浏览器的同源策略 浏览器的职责是展示/渲染document、css、script...浏览器费尽心思的搞个同源策略来保护我们的安全,但为何又需要跨域来打破这种安全策略?其实啊,这一切都和互联网的快速发展有关~ 随着Web开放的程度越来越高,页面的内容也是越来越丰富。...另外,对于Access-Control-Allow-Origin若需要允许多个源怎么

    2.7K61

    【自然框架】 页面里的父类—— (补充)

    自然框架里的页面分为几类:登录页面不用验证权限的页面(但是要登录)、数据列表页面表单页面、删除页面、其他页面(比如统计报表等)。       ...2、不用验证权限的页面,比如树状功能菜单,上面的放软件名称的那个页面。恩,是采用frame的方式的,所有有这两个页面。这两个页面是即不需要判断登录用户是否有权限访问,也没有URL参数。...有些功能是多个页面共有的、相同的,有些是一类页面有的,那么大家会怎么设计?...的设计方案就是上一篇说的, BasePage 对应 登录页面, PagePermission 对应 不用验证权限的页面,这里验证是否登录,除了登录页面都是需要的。...看了回复后的思考: 1、看了大家的回复,也觉得把权限验证的函数放在PagePermission不太适合,所以我想把它放在另一个地方——UserInfo,就是记录登录人信息的一个类。

    83650

    Web前端安全策略之XSS的攻击与防御

    ,并把这个参数的值放到另一个页面上。...我们可以看到,这时参数的值是一个脚本代码,那当我们点击 点击跳转 时,服务器将传过来的参数的值直接放到另一个页面上, 也就是把alert('攻击成功') 直接放到另一个...先来讲解一下,我们刚回复的这条评论是怎么展示在页面上的。...那么再回到发表回复的那个步骤,如果用户点击提交的时候,表单数据被改为这个样子怎么办?如图 ?...(3)DOM跨站 定义:通过修改页面DOM节点形成的XSS攻击称作DOM跨站,这也可以算作一种非持久型跨站,它跟前两种XSS攻击方式唯一不一样的就是,它只发生在客户端,不需要经过服务器。

    75620

    黑马瑞吉外卖之后台登录与退出功能开发

    这里后来新增了一个。...在哪?看这个登录的前端界面,这里有一个数据模型。 然后在上面表单也就是下面这段进行了一个数据模型绑定,所以当我们打开界面的时候就可以显示出来。...这里是调用了是调用到了另一个方法,这个方法写在另一个js里面。在这里我们就可以清清楚楚的看到它的请求路径,然后你就知道Controller怎么写了。至少路径知道了怎么设置。...这个有什么用?因为将来会出现公共字段属性,在具体的业务逻辑中对实体类赋值的时候就可以不用对这些公共字段进行赋值,这些字段会自动赋值,这样就可以避免重复繁琐的赋值操作。 这个在后面慢慢就会了解到。...这里展示的其实到这里员工信息还没有正常展示的,因为这些都做过了,所以会展示出来,现在我们只是进去了页面。 登录就到在这里。 退出功能开发 这是我们的后台登录功能,我们首次登录会进入这样的界面。

    58120

    层层剖析一次 HTTP POST 请求事故

    内网域名的响应如下: 那么理论上,如果是HTTP请求body的限制,则可能发生在 LVS 层或者Nginx层或者Tomcat。我们一步步排查: 首先排查LVS层。...第三步:集思广益 我们把相关的运维方拉到了一个群里面进行讨论,讨论分两个阶段 【第一阶段】 运维方同学发现 Tomcat 是使用容器进行部署的,容器和nginx层中间,存在一个容器自带的nameserver...c=" + document.cookie 另一个用户浏览了含有这个内容的页面将会跳转到 domain.com 并携带了当前作用域的 Cookie。...以下例子中,form 和 script 等标签都被转义, h 和 p 等标签将会保留。...而定位模块的最大难点在于:对于网络全路的不了解(之前并不知晓WAF层的存在)。 那么,针对类似的问题,我们后面应该如何去加速问题的解决

    1.2K10

    简单分析网站流量劫持防范措施(图文)

    script还是language=JScript风格,这得追溯到多少个世纪前了~ 最劣质的是框架居然还是<frameset 元素。。。   不用说,这显然不是网易的页面。...不用计算,用手指估算下就知道了。朝有好几亿电脑和手机用户,每天有无数个网页被打开。哪怕在1%的网页里插一个广告,都有数百上千万次的展示数量,其中的商机不言喻。。。   ...最致命的是,脚本未必都是放在<script </script ,也有可能是<element onxxx="" 的内联形式。。。这下麻烦大了,得想想怎么解决。。。...不过可别忘了,外js的路径可以是任意的,ajax只能读取同源站点。而且,外的<script 也无法读取其text内容。于是当我们使用站点外的js文件时,劫持程序可以肆无忌惮的从中混入代码!...嵌入的脚本甚至可以通过WebSocket连接到黑客控制台,发送你的鼠标和键盘的一举一动,以及页面上显示的内容;对方还可以远程控制,让js在页面里悄悄执行各种意想不到的操作。。。

    87841

    实现一个靠谱的Web认证两种认证JWT怎么存储认证信息防止CSRF总是使用https认证信息不应该永久有效总结一下

    对此表示很无语…… 怎么存储认证信息 谈完了session和token,我们来说所说这个信息在客户端怎么存储。客户算也分两大类——浏览器和Native App。先说说浏览器。...但是使用Local Storage,反而会增加中招XSS(Crossing Site Script)的机会。一旦中招XSS,攻击者可以轻易的拿到认证信息,并且传回自己的接受网址不被用户察觉。...那么怎么在使用Cookie的同时,还能防范CSRF? 传统页面Web网站 在传统页面Web网站中,一般会使用CSRF Token。这是个非常流行的做法。...客户端要首先向服务器请求一个带有提交表单页面,服务器返回的页面中会嵌入一个CSRF Token。当用户提交表单时,CSRF Token会被一起携带发给服务器做验证。...另一个歪招,双认证。将你的认证信息同时放在HttpOnly Cookie和Authorization Header。服务器要先比对这两个值是一样的,然后再去执行认证过程。

    2.2K111

    能用HTMLCSS解决的问题就不要使用JS

    为什么说能使用html/css解决的问题就不要使用JS两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。 1....如果你用js控制,那么在脚本加载好之前,当前页面是不会高亮的,脚本加载好之后突然就高亮了。所以用js吃力不讨好。...一个纯展示的静态页面,为啥要写js,是吧。 注意这个hover选择器特别好用,几乎适用于所有需要用鼠标悬浮时显示的场景。 2. 鼠标悬浮时显示 鼠标悬浮的场景十分常见,例如导航的菜单: ?...如果在pad 1024px的设备上,希望一行显示2个,那应该怎么?由于上面用的td,必定会排在同一行。...但是一般应该不用考虑这种拉伸范围很大的情况,正常刷新页面是可以的,如果真要解决那得借助下js 5.需要根据个数显示不同样式 例如说可能有1~3个item显示在同一行,item的个数不一定,如果1个,那这个

    3.8K40

    能用HTMLCSS解决的问题就不要使用JS!

    前端爱好者的聚集地 为什么说能使用html/css解决的问题就不要使用JS两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。 1....如果你用js控制,那么在脚本加载好之前,当前页面是不会高亮的,脚本加载好之后突然就高亮了。所以用js吃力不讨好。...一个纯展示的静态页面,为啥要写js,是吧。 注意这个hover选择器特别好用,几乎适用于所有需要用鼠标悬浮时显示的场景。 2.....wrapper > div{display: block;        width: 100%;    } } 效果如下所示: 如果在pad 1024px的设备上,希望一行显示2个,那应该怎么...但是一般应该不用考虑这种拉伸范围很大的情况,正常刷新页面是可以的,如果真要解决那得借助下js 5.需要根据个数显示不同样式 例如说可能有1~3个item显示在同一行,item的个数不一定,如果1个,那这个

    3K20
    领券