Web制作メモ -トップへ-

[HTML] iframeを使ってページを遷移せずにフォームを送信する方法

HTML&CSS2015.03.08 16:34

フォームのtarget属性iframeの名前を指定すると、ページを遷移せずにフォームを送信できます。

formのtarget属性も、a要素のtarget属性と同じで、URLを開く時のウィンドウの開き方を指定するものです。

「_blank」を指定すれば新しいページで開かれますし、iframeの名前を指定すれば、指定したiframeが更新されます。

これを使えば、ページを遷移することなくフォームを送信して値を受け取ることができます。

targetにiframeを指定したフォームの例

<form method="post" enctype="multipart/form-data" action="iframe.php" target="iframe">
    <input type="text" name="name">
    <input type="submit">
</form>
<iframe name="iframe"></iframe>

上記のフォームでは、iframe.phpに向けてフォームを送信しています。

target属性でiframeを指定しているので、ページの遷移は発生せず、iframeのみが更新されます。

フォームの内容は、iframe.phpで受け取れます。

iframe.phpのサンプル

if($_POST['name']){
	echo '送信された値は「' . $_POST['name'] . '」です。';
}else{
	echo '送信された値は空です。';
}

サンプル