HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのフォームtargetプロパティとは？構文とサンプルコードで解説

HTML DOMのFormオブジェクトが持つtargetプロパティは、フォームデータ送信後のレスポンス（結果ページ）をどこに表示するかを指定するために使用されます。新しいタブ、現在のタブ、あるいは新しいウィンドウなど、表示先を柔軟に制御できます。このプロパティは、form要素のtarget属性の値を取得・設定します。

構文（Syntax）

targetプロパティを設定する場合の基本的な構文は以下のとおりです。

formObject.target = "_blank|_self|_parent|_top|framename"

各値の意味は次のとおりです。

  • _blank：レスポンスを新しいタブまたは新しいウィンドウで開く
  • _self：レスポンスを同じウィンドウ（フレーム）内に表示する
  • _parent：親フレームに表示する
  • _top：ウィンドウ全体（全フレームを解除した状態）に表示する
  • framename：指定した名前のフレーム内に表示する

サンプルコード

ここでは、HTML DOMのForm targetプロパティを使った具体的な例を見てみましょう。以下のコードでは、ユーザー名と年齢の2つのテキスト入力フィールドと、SUBMITボタンを持つフォームを作成しています。

<!DOCTYPE html>
<html>
<head>
<style>
    form {
        border:2px solid blue;
        margin:2px;
        padding:4px;
    }
</style>
<script>
    function SubmitForm() {
        document.getElementById("FORM1").submit();
    }
</script>
</head>
<body>
<h1>Form submit() method example</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label><br><br>
<label>Age<input type="text" name="Age"></label> <br><br>
<input type="button" onclick="SubmitForm()" value="SUBMIT">
</form>
</body>
</html>

実行結果

上記のコードを実行すると、青い枠線で囲まれたフォームが表示されます。SUBMITボタンをクリックすると、デフォルト設定ではレスポンスは同じウィンドウ内に表示されます。

さらに、CHANGEボタンを追加してクリックしてからSUBMITすると、レスポンスが新しいタブで表示されるようになります。

コードのポイント解説

フォーム部分は、type属性がtextの入力フィールド2つと、SUBMITという名前のボタンで構成されています。

<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label><br><br>
<label>Age<input type="text" name="Age"></label> <br><br>
<input type="button" onclick="SubmitForm()" value="SUBMIT">
</form>

次に、ユーザーがクリックするとChangeTarg()メソッドを実行するCHANGEボタンを作成します。

<button onclick="ChangeTarg()">CHANGE</button>

ChangeTarg()メソッドは、documentオブジェクトのgetElementById()メソッドを使ってform要素を取得し、そのtargetプロパティの値を「_blank」に変更します。これにより、フォームデータ送信後のレスポンスが新しいタブに表示されるようになります。また、idが「Sample」の段落要素に対してinnerHTMLプロパティ経由でテキストを代入することで、変更内容を画面上にも表示しています。

function ChangeTarg() {
    document.getElementById("FORM1").target = "_blank";
    document.getElementById("Sample").innerHTML = "The target attribute value is now _blank.";
}

このように、JavaScriptからtargetプロパティを動的に書き換えることで、フォーム送信後の表示先を実行時に切り替えることが可能です。用途に応じて_sameタブ表示と新規タブ表示を使い分けると、より使いやすいWebフォームを構築できます。

  1. HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

    Textarea の form プロパティとは？HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。構文form プロパティの基本的な構文は次のとおりです。object.form戻り値テキストエリアを含む <f

  2. HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要