一个表单元素俩个按钮跳转不同页面

最新推荐文章于 2021-07-27 15:32:08 发布

redmoon&

最新推荐文章于 2021-07-27 15:32:08 发布

阅读量3.1k

点赞数 2

分类专栏： web小项目的实现文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/qq_39655942/article/details/105248091

版权

web小项目的实现专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在一个HTML表单中使用两个按钮实现不同的页面跳转效果。一种方法是通过超链接a元素设置href属性，另一种方法是利用JavaScript动态修改form的action属性来达到目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个表单元素俩个按钮跳转不同页面

在这里插入图片描述
图片如上：
红色箭头是用超链接a元素实现的，设置href属性跳转页面
黄色箭头是用javascript实现修改form表单元素的action属性实现跳转，可以达到一个form跳转俩个页面的效果。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>华丽珠宝行首页</title>
 <style type="text/css">
 p{color: red;font-weight: bold;font-size: larger;}
 </style>
</head>
<body>
	<p>欢迎来到华丽珠宝行</p>
	<a href="login.jsp">登入</a>
	//用超链接a元素实现的，设置href属性跳转页面
	<a href="register.jsp">注册</a>
	<form  id="idform">
	//javascript实现修改form表单元素的action属性实现跳转，可以达到一个form跳转俩个页面的效果。
	//onclick事件触发调用js函数
		<input type="submit" onclick="changeActionToLogin()" value="登入"/>
		<input type="submit" onclick="changeActionToRegister()" value="注册">
	</form>
	<script type="text/javascript">
		function changeActionToRegister(){
			var s=document.getElementById("idform")
			s.setAttribute("action", "register.jsp");
		}
		function changeActionToLogin(){
			var s=document.getElementById("idform")
			s.setAttribute("action", "login.jsp");
		}
	</script>
</body>
</html>