HTML formターゲット属性の使い方を徹底解説！フォーム送信後の表示先を制御する方法
HTMLの<form>要素におけるtarget属性を使うと、フォームを送信した後に表示されるレスポンス（応答結果）の表示先を指定できます。フォーム送信結果を新しいタブで開きたい場合や、同じフレーム内に表示したい場合など、用途に応じて柔軟に制御できる便利な属性です。
target属性の基本構文
target属性の基本的な書き方は以下のとおりです。
<form target="_blank|_self|_parent|_top|frame">
指定できる値とその動作
target属性に指定できる主な値と、それぞれの動作は次のとおりです。
- _blank … レスポンスを新しいウィンドウまたは新しいタブに表示します。
- _self … レスポンスを同じフレーム（現在のフレーム）に表示します。これがデフォルトの動作です。
- _parent … レスポンスを親フレームに表示します。
- _top … レスポンスをウィンドウ全体（すべてのフレームを解除した状態）に表示します。
- frame名 … 指定した名前のフレーム（iframeなど）にレスポンスを表示します。
target属性の実装例
それでは、<form>要素のtarget属性を実際に使ったサンプルコードを見てみましょう。ここでは「_blank」を指定し、フォーム送信結果を新しいタブに表示する例を紹介します。
サンプルコード
<!DOCTYPE html> <html> <body> <h2>Points</h2> <form action="new.php" method="get" target="_blank"> Player: <input type="text" name="player"><br> Rank: <input type="number" name="rank"><br> Points: <input type="number" name="points"><br> <button type="submit" value="Submit">Submit</button> </form> </body> </html>
実行結果
このコードを実行すると、以下のようなフォームが表示されます。
フォームの入力欄にプレイヤー名、ランク、ポイントを入力して「Submit」ボタンをクリックすると、target="_blank"が指定されているため、送信後のレスポンスは新しいウィンドウ（タブ）に表示されます。
まとめ
<form>要素のtarget属性を活用すれば、フォーム送信後の結果を表示する場所を自由にコントロールできます。特に、ユーザーに元のページを残したまま結果を確認させたい場合は「_blank」が便利です。用途に応じて適切な値を選択し、より使いやすいフォームを作成しましょう。
-
HTMLフォームのmethod属性とは？getとpostの違いと使い方をわかりやすく解説
HTMLのmethod属性は、フォームから送信するデータを「どのような方法で」サーバーへ渡すかを指定するための重要な属性です。具体的には、データをURLの一部として送るか（GET）、HTTP POSTトランザクションとして送るか（POST）を選択できます。 method属性の基本構文 method属性の書き方は以下の通りです。 <form method="get | post"></form> get を指定すると、フォームのデータはURL変数（クエリ文字列）として送信されます。一方、post を指定すると、データはHTTPリクエストのボディに含まれ
-
HTMLフォームのaction属性とは?使い方とサンプルコードをわかりやすく解説
HTMLのaction属性は、フォームが送信されたときに、入力データをどのURLへ送るかを指定するための属性です。フォームを作成するうえで最も重要な属性の一つであり、データの送信先となるサーバーサイドのスクリプト(例：PHPファイルなど)を指定します。action属性の基本構文action属性の基本的な書き方は以下のとおりです。<form action=URL></form>action属性の値には、絶対URLまたは相対URLを指定できます。ここで指定したURLに対して、フォームに入力されたデータが送信されます。HTMLフォームaction属性の使用例それでは、実際にa