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


 
うまくいったでしょうか?
 
 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です