HTML静的ページのボタンに送信リンクを追加する方法の紹介-htmlチュートリアル-php.cn

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

黄舟

リリース： 2017-07-27 14:15:22

オリジナル

2296 人が閲覧しました

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 サイトの他の関連記事を参照してください。