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

HTMLDOMフォームのターゲットプロパティ

HTML DOMフォームターゲットプロパティは、フォームデータが送信された後に応答を表示する場所を指定するために使用されます。新しいタブ、現在のタブ、または新しいウィンドウに表示できます。フォームのターゲットプロパティは、ターゲット属性値を設定または取得します。

構文

以下は、-

の構文です。

ターゲットプロパティの設定-

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

ここで、_blankは新しいウィンドウで応答を開き、_selfは同じウィンドウで応答を開きます。親は親フレームで開き、_topはウィンドウ本体全体で開き、framenameは指定された名前付きフレームで開きます。

例

HTMLDOMフォームのターゲットプロパティの例を見てみましょう-

<!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>

出力

これにより、次の出力が生成されます。 [送信]をクリックすると、応答が同じウィンドウで開きます-

HTMLDOMフォームのターゲットプロパティ

[変更]ボタンをクリックしてから[送信]をクリックすると、応答が新しいタブに表示されます-

HTMLDOMフォームのターゲットプロパティ

テキストタイプの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（）メソッドは、ドキュメントオブジェクトのgetElementById（）メソッドを使用して

要素を取得し、そのターゲットプロパティ値を「_blank」に変更します。これにより、フォームデータが送信された後の応答を新しいタブに表示できます。この変更は、IDが「Sample」の段落にテキストを割り当て、そのinnerHTMLプロパティを使用して、テキストを使用して表示されます。

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

  1. HTMLDOMTextareaフォームプロパティ

    HTML DOM Textareaフォームプロパティは、テキストエリアを囲むフォームの引用を返します。 構文 以下は構文です- object.form HTML DOM Textareaフォームプロパティの例を見てみましょう： 例 <!DOCTYPE html> <html> <style>    body {       text-align: center;       background-color: #363946;       col

  2. HTMLDOMオブジェクトフォームプロパティ

    HTML DOM Object formプロパティは、要素の囲みフォームの参照を返します。 以下は構文です- フォームへの参照を返す オブジェクト ObjectElement.form オブジェクトフォームプロパティの例を見てみましょう − 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Object form</title> <style>    form {       width:70%;   &nbs