2025年3月30日 星期日 甲辰(龙)年 月廿九 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

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

时间:07-30来源:作者:点击数:37

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>
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门