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

HTML DOM 送信ボタンの formTarget プロパティとは?使い方を徹底解説

HTML DOM の Input Submit formTarget プロパティは、フォームの送信ボタン(input type="submit")における formtarget 属性の値を取得・設定するためのプロパティです。このプロパティで指定した場所に、フォーム送信後のサーバーからのレスポンスが表示されます。

なお、formTarget プロパティを設定すると、<form> 要素自体に指定された target 属性の値が上書きされる点に注意してください。この属性は HTML5 において、type="submit" を持つ input 要素向けに新たに導入されました。

構文(シンタックス)

formTarget プロパティを設定する場合の構文は以下のとおりです。

submitObject.formTarget = "_blank|_self|_parent|_top|framename"

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

  • _blank:レスポンスを新しいウィンドウ(タブ)で開く
  • _self:レスポンスを同じウィンドウ(フレーム)内で開く
  • _parent:親フレームで開く
  • _top:ウィンドウ全体(フレームを解除した状態)で開く
  • framename:指定した名前のフレームで開く

サンプルコード

それでは、Submit formTarget プロパティの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Submit formTarget property</h1>
<form id="FORM_1" action="/Sample.php" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Loc"> <br><br>
<input type="submit" id="SUBMIT1" formtarget=_self>
</form>
<p>下のボタンをクリックすると、レスポンスの表示先が同じウィンドウから新しいウィンドウに変更されます</p>
<button onclick="changeTarget()">CHANGE</button>
<p id="Sample"></p>
<script>
    function changeTarget() {
        document.getElementById("SUBMIT1").formTarget="_blank";
        document.getElementById("Sample").innerHTML = "レスポンスが新しいウィンドウで開かれるようになりました";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような画面が表示されます。

HTML DOM 送信ボタンの formTarget プロパティとは?使い方を徹底解説

続いて、CHANGE ボタンをクリックしてみましょう。送信ボタンの formTarget が「_blank」に変更され、ページにメッセージが表示されます。

HTML DOM 送信ボタンの formTarget プロパティとは?使い方を徹底解説

まとめ

formTarget プロパティを活用すれば、JavaScript から動的にフォーム送信結果の表示先を制御できます。フォーム側の target 属性よりも優先されるため、「通常は同じウィンドウで表示しつつ、特定の操作時だけ別ウィンドウで開きたい」といった柔軟な実装が可能になります。

  1. HTML DOM 送信ボタンの formTarget プロパティとは?使い方を徹底解説

    HTML DOM の Input Submit formTarget プロパティは、フォームの送信ボタン(input type=submit)における formtarget 属性の値を取得・設定するためのプロパティです。このプロパティで指定した場所に、フォーム送信後のサーバーからのレスポンスが表示されます。なお、formTarget プロパティを設定すると、<form> 要素自体に指定された target 属性の値が上書きされる点に注意してください。この属性は HTML5 において、type=submit を持つ input 要素向けに新たに導入されました。構文(シンタックス)fo

  2. HTML DOMのInput Submit formNoValidateプロパティとは?使い方とサンプルコードを解説

    HTML DOM の Input Submit(送信ボタン)における formNoValidate プロパティは、送信ボタンの formNoValidate 属性値を取得・設定するために使用されます。このプロパティを使うことで、フォームデータがサーバーへ送信される際にバリデーション(妥当性検証)を行うかどうかを制御できます。<form> 要素に設定された novalidate 属性よりも優先される点が大きな特徴で、HTML5 において type=submit の input 要素向けに新たに導入されました。 構文 formNoValidate プロパティを設定する場合の構文は以下の