input链接新页面

来源：互联网发布：mbd.baidu.com短域名编辑：程序博客网时间：2024/06/04 23:18

好记性不如烂笔头。。

关于 input ，首先再提及一下它的 type 属性，<input type="value">，value 具体的取值如下：

每个取值的具体含义可以参见这里，这里就不再赘述，本文主要来整理一下 input 标签链接新页面的方法。

提到链接，本人愚钝，一直都用<a>标签实现，渐渐的，随着<input>的使用越来越频繁，查阅后才知道<input>标签也可以实现（应该早点儿查的，我面壁思过去了。。。），所幸知道的不是太晚。。学习后发现<input>链接主要有一下几种：

1.链接到某页

<input type="button" name="sm" value="确定" class="btn" onclick="location.href='filename.html'" />

2.返回（等同后退）

<input type="button" name="sm2" value="返回" class="btn" onclick="window.open('filename.html')" />

3.打开新网页

<input type="button" name="sm3" value="确定" class="btn" onclick="window.open('filename.html')" />

4.打开无边框的新窗口

<input type="button" name="sm4" value="确定" class="btn" onclick="javascript:window.open('filename.html','','width=720,height=500,resizable=yes,scrollbars=yes,status=no')" />

5.打开新网页同时指向另一页

<input type="button" name="sm5" value="确定" class="btn" onclick="window.open('filename.html');location.href='http://www.cxybl.com'" />

6.打开无边框的新窗口同时指向另一页

<input type="button" name="sm6" value="确定" class="btn" onclick="javascript:window.open('http://www.cxybl.com','','width=720,height=500,resizable=yes,scrollbars=yes,status=no'); window.location='filename.html';" />

7.点击按钮弹出确认alert窗口

方式一：

<input type="button" name="sm7" value="确定" class="btn" onclick="alert('是否确认提交？');location.href= 'filename.html';return false;" />

方式二：

<input type="button" name="sm8" value="确定" class="btn" onclick="if (confirm('是否确认提交？'))location.href= 'filename.html';return false;" />

以上介绍的都是 type 为 button 时的办法，那么，当 type 为其他类型时，比如， type = submit ，应该怎么做呢？这时候，我们可以使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。onsubmit指定的方法返回true，则提交数据；返回false不提交数据。

demo：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>submit 提交测试</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><body>    <form action="http://www.baidu.com" onsubmit="return toVaild();">        <input type="text" id="ff">        <input type="submit" id="submit" value ="提交"/>    </form>    <script type="text/javascript">    function toVaild(){            var val = document.getElementById("ff").value;            alert(val);            if(val == "可以提交"){                alert("校验成功，之后进行提交");                return true;            }            else{                alert("校验失败，不进行提交");                return false;            }        }    </script></body></html>

运行这段代码时，只有在 input 里输入“可以提交”，表单才会提交成功，然后跳转到百度（即 action 的值），否则，表单不提交。。

除此之外，我们也可以用下面的方式链接新页面：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>submit 提交测试</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><body>    <form id="confirmBuy" method="post" action="">    <p class="lab">请输入您需要购买的广告金币（10,000.00金币以上）</p>        <p class="lab"><input type="text" placeholder="10000" value="" id="bigInput">广告金币（与人民币比例为1：1）</p>        <p class="lab">1、赠送1年商家VIP特权</p>        <p class="lab">2、每月赠送1000.00金币，从9月到12月共计4000金币</p>        <p class="lab">应付金额：<span class="red">￥</span><span class="red" value="10000" id="bigShow">10000</span></p>        <p class="oper"><input type="submit" value="确认购买" class="ope" id="conBuy" onclick="window.open('s_purchaseGold.html');"><input type="button" value="清空信息" class="ope" id="clearInfo"></p>     </form></body></html>

这里在 input 里使用了 onclick 时间，页面会直接进行跳转（非特殊要求不推荐使用）。。。

0 0