formの内容を送信(submit)する場合、別タブや別(新しい)ウィンドウで表示させるには、aタグのとある属性を使います。そして、別タブで開のではなく、新しく別ウインドウで開くアクションはhtmlではできません。
実際にボタンで送信してウィンドウの開き方を見ていきましょう。
formの型
formの基本としては、まずはこんな感じです。(基本なんてどうでもいい!という場合はサラッと読み飛ばしてくだい。)
<form action="https://○○○/abc/" method="post"><br> 好きな色は? <select name="color"><br> <option value="青">青</option><br> <option value="赤">赤</option><br> <option value="黄">黄</option><br> </select><br> <input type="submit" value="送信"><br> </form>
画面にはこう表示されます。
好きな色は?
(※ここでは送信されません。)
データを受け渡す為、selectにはcolorという名前をつけます。optionで色の選択肢を作り、inputにtypeをsubmitに割り当てます。そして表示させるページでphpを組むことで、ページabcに選択結果を送信することができます。
シンプル好きな色は〇〇です。と表示させたいので、ページabcに
<span>好きな色は<?php echo $_POST["color"]; ?>です。</span>
といったコードを入力しておきます。
(投稿・固定ページには直接phpを書くことはできないのでショートコードで。)
formタグの○○○にはお持ちのドメイン名をいれるわけですが、
<form action="https//○○○/abc/" method="post">
もちろん、このままでは画面が切り替わって表示されます。試してみましょう。↓↓↓
ここに、aタグの属性である、別ウィンドウで開く target=”_blank” を入れることで、別タブに送信することができます。
<form action=”https://○○○/abc.php” method=”post” target=”_blank”>
色を選択してボタンを押しましょう。
スポンサードリンク
新しく別ウィンドウで開く
もう一つは別タブにウィンドウを開くのではなく、ポップアップのように新しく別ウィンドウを開く方法。これはhtmlだけではできません。Javascriptとの合わせ技になるので一手間加えなくてはいけません。
簡単な方法として、このJavascriptコードをhtmlページのheadタグ内に記述します。
<script type="text/javascript"> <!-- function openwin() { window.open("./abc.html", "", "width=500,height=400,toolbar=no,location=yes,status=yes,menubar=no,scrollbars=yes,resizable=yes"); } // --> </script>
window.openの “./abc.html” は新しく開くウィンドウのページを指定します。開くウィンドウの幅、高さもそれぞれ指定します。そして、その後ろの toolbar=no,location=yes,status=yes,menubar=no,scrollbars=yes,resizable=yes というオプション指定で、
toolbar=no
menubar=no
というように、それぞれ “no” と指定する事でポップアップされて新しいウィンドウが開きます。
formの内容はこうなります。
<form action="#"> <input type="submit" value="新しいウィンドウを開く" onclick="openwin()"> </form>
inputタグにonclickでopenwin()を付け加えます。
では試してみましょう〜。↓↓↓
うまくいったでしょうか?
スポンサードリンク