button跟submit的区别及使用js实现页面跳转的方式

最新推荐文章于 2022-07-18 22:55:14 发布

原创最新推荐文章于 2022-07-18 22:55:14 发布 · 7.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #表单 #function

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了HTML表单中button和submit元素的区别，并介绍了如何利用JavaScript实现页面跳转的不同方式，包括使用事件监听器、历史记录回退和导航到特定URL等。

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

button和submit的区别及使用js实现页面跳转的方式

type=button      //就单纯是按钮功能   
type=submit      //是发送表单

但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性：
使用submit后，页面支持键盘enter键操作，而很多WEB软件设计师，可能没有注意到submit统
一。

用button后往往页面不支持enter键了。所以需要支持enter键，必须要设置个submit，默认enter键对页面第一个submit进行操作。

<input type="submit" name="b1" value="提交" onClick="bt_submit_onclick()">

执行完onClick，转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。

<input type="button" name="b1" value="提交" onClick="bt_submit_onclick()">

执行完onClick，跳转文件在js文件里控制。提交需要onClick。

比如：
1、

onclick="form1.action='a.jsp';form1.submit();"

这样就实现了submit的功能了。

2、

<form name="form1" method="post" action="http://www.sina.com.cn">   
    <input  type="button"  name="Button"  value="Button"  onClick="submit()">   
 </form>

3、

<input type="button" name="Button" value="Button"    onClick="javascript:windows.location.href="你的url"">

js实现页面跳转的几种方式：

第一种：

<script language="javascript" type="text/javascript">
  function   test(){ 
     window.location.href="login.jsp?backurl="+window.location.href; 
   }
</script>

第二种：

<script language="javascript">
  function   test(){ 
     alert("返回");
     window.history.back(-1);
  }
</script>

第三种：

<script language="javascript">
window.navigate("top.jsp");
</script>

第四种：

<script language="JavaScript">
   function   test(){ 
     self.location='top.htm';
    }
</script>

第五种：

<script language="javascript">
  function   test(){ 
     alert("非法访问！");
     top.location='xx.jsp';
   }
</script>