formの内容を別タブや別（新しい）ウィンドウで開くには？

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()を付け加えます。
　
　
では試してみましょう〜。↓↓↓

　
うまくいったでしょうか？
　
　
スポンサードリンク