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

HTML DOM入力送信（Submit）formプロパティの使い方を解説

HTML DOM の Input Submit form プロパティは、指定された送信ボタン（submit ボタン）が所属するフォームへの参照を取得するために使用されます。もし送信ボタンがフォームの外に配置されている場合は、単純に NULL を返します。なお、このプロパティは読み取り専用です。

構文

Input Submit form プロパティの構文は以下の通りです。

submitObject.form

サンプルコード

それでは、Input Submit form プロパティの具体的な使用例を見ていきましょう。以下の例では、submit ボタンからそのボタンを含むフォームの ID を取得して表示します。

<!DOCTYPE html>
<html>
<body>
<h1>Input submit form Property</h1>
<form action="Sample_page.php" id="FORM_1" 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">
</form>
<p>下のボタンをクリックすると、フォームのIDを取得できます</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
   function formId() {
      var P = document.getElementById("SUBMIT1").form.id;
      document.getElementById("Sample").innerHTML =
        "送信ボタンを含むフォームのIDは: " + P;
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、まず次のようにユーザー名と所在地の入力欄を持つフォームと「GET FORM」ボタンが表示されます。

HTML DOM入力送信（Submit）formプロパティの使い方を解説

そして、「GET FORM」ボタンをクリックすると、submit ボタンが所属するフォームの ID（この例では FORM_1）が画面に表示されます。

HTML DOM入力送信（Submit）formプロパティの使い方を解説

ポイントまとめ

  • form プロパティは、submit ボタンを含むフォームオブジェクトへの参照を返す
  • ボタンがフォーム外にある場合は null を返す
  • プロパティ自体は読み取り専用であり、値の設定はできない
  • .form.id のようにチェーンして、フォームの各種プロパティに直接アクセスできる
  1. HTML DOM Input Submit の name プロパティとは？使い方とサンプルコードを解説

    HTML DOM の Input Submit name プロパティは、送信ボタン（submit ボタン）の name 属性を設定または取得するために使用されます。name 属性は、フォームデータがサーバーへ送信された後に、そのデータを識別するための重要な役割を果たします。構文（Syntax）name プロパティを設定する場合の構文は以下のとおりです。submitObject.name = nameここで指定する name は、送信ボタンに付ける名前です。既存の name 属性値を取得したい場合は、submitObject.name をそのまま参照することで現在の値を文字列として返します。サン

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

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