ホームページ  >  記事  >  ウェブフロントエンド  >  HTML静的ページのボタンに送信リンクを追加する方法の紹介

HTML静的ページのボタンに送信リンクを追加する方法の紹介

黄舟
黄舟オリジナル
2017-07-27 14:15:222201ブラウズ

1. ボタンはリンクのような作りになっています(写真)
送信ボタン

<input type="submit" value="提交">

リンクを送信

<a href="#" onclick="表单名字.submit()">提交</a>

リセットボタン

<input type="reset" value="重置">

リンクをリセット

<a href="#" onclick="表单名字.reset()">重置</a>

通常ボタン

<input type="button" value="按钮" onclick="函数()">

通常リンク

<a href="#" onclick="函数()">链接</a>

写真も同様a タグを img に
2. リンクをボタンのように見せます

<a href="reg.asp">注册</a>
=><input type="button" value="注册" onclick="location.href=&#39;reg.asp&#39;">

----------------------------- - ---
場合によっては、取得フォームを手動で作成したり、ボタンやリンクを自由に使用したりできます。

<form action="xx.asp" method="get" name="form1">
  <input name="aa" type="text" id="aa">
  <input name="bb" type="text" id="bb">
  <input type="submit" name="Submit" value="提交">
</form>
=>
<input name="aa" type="text" id="aa">
<input name="bb" type="text" id="bb">
<input type="button" value="按钮" onclick="location.href=&#39;xx.asp?aa=&#39;+document.all[&#39;aa&#39;].value+&#39;&bb=&#39;+document.all[&#39;bb&#39;].value">

-------------------------------------------------
さらにボタンも作れます(リンク) JS 変数、フォーム入力値、ASP 変数、および Recordset 値を同時に渡します

<script language="javascript">
var id1=1;
</script>
<%
id3=3
....
rs.open exec,conn,1,1
假设有rs("id4")=4
...
%>
<input name="id2" type="text" id="id2" value="2">
<input type="button" value="按钮"
onclick="location.href=&#39;xx.asp?id1=&#39;+id1+&#39;&id2=&#39;+document.all[&#39;id2&#39;].value+&#39;&id3=<%=id3%>&id4=<%=rs("id4")%>&#39;">

ボタンを押すと、ブラウザの URL が xx.asp?id1=1&id2=2&id3=3&id4=4
in xx であることがわかります。 ASP では、request.querystring を使用してすべての変数を取得できます。これは、クライアント JS セグメントとサーバー セグメント間の変数の偽装転送ですか?
------------------------------------------------- -------------------------------------------------- ------------------------
ボタンにリンク機能を追加する方法

解決策:
ボタンはコントロールレベルのオブジェクトに属しており、優先度は比較的高いため、画像やテキストなどのリンクを直接追加することはできません。スクリプトはボタンのクリック イベントを通じてのみ呼び出すことができます。
具体的な手順:
1. 元のウィンドウでリンクを開きます

    <input type="button" 
value="闪吧" onClick="location=’http://www.xxx.net’">
    <button onClick="location.href=’http://www.xxxx.net’">闪吧</button>
    <form action="http://www.xxxx.net%22%3e%3cinput/ type="submit" value="打开链接"></form>

2. 新しいウィンドウでリンクを開きます

<input type="button" 
value="闪吧" onClick="window.open(’http://www.xxxx.net’)">
    <button onClick="window.open(’http://www.xxxx.net’)">ggg</button>
    <form action="http://www.xxxx.net/" 
target="_blank"><input type="submit" value="打开链接"></form>


注: onClick と呼ばれるコード内の引用符は、単一または二重にネストできます。は 1 つだけで、2 つ以上は "" でエスケープする必要があり、エスケープされた引用符は、

<button onClick="this.innerHTML=’<font color=\’red\’>http://www.xxxx.net</font>’">闪吧</button>

または

<button onClick=’this.innerHTML="<font color=\"red\">http://www.xxxx.net</font>"’>闪吧</button>

のように、内側の引用符と一致している必要があります。 以下は、誤った記述です。

<button onClick="this.innerHTML=’<font color=’red’>http://www.xxxx.net</font>’">闪吧</button>
<button onClick="this.innerHTML=’<font color="red">http://www.xxxx.net</font>’">闪吧</button>
<button onClick="this.innerHTML=’<font color=\"red\">http://www.xxxx.net</font>’">闪吧</button>

ヒント: それらのほとんどは window に属します。または、document オブジェクトのメソッドとプロパティは、接頭辞 window または document を省略できます。たとえば、この例では location.href (location.href は location と省略することもできます。 location のデフォルトのオブジェクトは href です) は window.location.href または document .location.href の省略形の書き方です。


ヒント: この例では、次のメソッドを使用して location.href を置き換えることもできます

location.replace(url)
location.assign(url)
navigate(url)

特別なヒント


最初のステップのコードが実行された後、ボタンをクリックするとリンク ターゲットにジャンプします。 2 番目のステップでは、ボタンをクリックした後、新しいウィンドウでリンクが開きます。

特記事項

この例では、主に onClick を使用してユーザーのボタンをクリックイベントをキャプチャし、location オブジェクトの href メソッドまたは window オブジェクトの open メソッドを呼び出してリンクを開きます。もう 1 つの方法は、フォームを送信してリンク関数を実装することです。ボタンは type=submit ボタンである必要があります。フォームのアクション値はリンク ターゲットであり、ターゲット値はリンクを開くターゲット メソッドです。

以上がHTML静的ページのボタンに送信リンクを追加する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。