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

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

HTML DOMにおけるinput（type="button"）要素のformプロパティは、その入力ボタンを囲んでいる<form>要素への参照を返します。このプロパティを利用することで、JavaScriptから「クリックされたボタンがどのフォームに属しているのか」を簡単に判別できます。

構文

formプロパティの基本構文は次のとおりです。

object.form

サンプルコード

それでは、inputボタンのformプロパティの具体的な使用例を見てみましょう。このサンプルでは、2つのフォームにそれぞれ2つのボタンを配置し、クリックされたボタンが属するフォームを判定してメッセージとして表示します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM formプロパティ</title>
<style>
   body{
      text-align:center;
   }
   .btn{
      display:block;
      margin:1rem auto;
      background-color:#db133a;
      color:#fff;
      border:1px solid #db133a;
      padding:0.5rem;
      border-radius:50px;
      width:20%;
   }
   .show-message{
      font-weight:bold;
      font-size:1.4rem;
      color:#ffc107;
   }
</style>
</head>
<body>
<h1>formプロパティの使用例</h1>
<form id="form1">
<fieldset>
<legend>フォーム1</legend>
<input type="button" class="btn" value="ボタン1">
<input type="button" class="btn" value="ボタン2">
</fieldset>
</form>
<form id="form2">
<fieldset>
<legend>フォーム2</legend>
<input type="button" class="btn" value="ボタン1">
<input type="button" class="btn" value="ボタン2">
</fieldset>
</form>
<div class="show-message"></div>
<script>
   var btnArr= document.querySelectorAll(".btn");
   var showMessage= document.querySelector(".show-message");
   btnArr.forEach((ele)=>{
      ele.addEventListener("click",(e)=>{
         showMessage.innerHTML="";
         if(e.target.form.id === 'form1'){
            showMessage.innerHTML="私はフォーム1のボタンです";
         } else {
            showMessage.innerHTML="私はフォーム2のボタンです";
         }
      })
   });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

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

まず、フォーム1内の「ボタン1／ボタン2」をクリックしてみます。

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

続いて、フォーム2内の「ボタン1／ボタン2」をクリックすると、表示されるメッセージが切り替わります。

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

ポイント解説

このサンプルのポイントは、クリックイベントのイベントオブジェクト（e）からe.target.form.idを参照している点です。e.targetはクリックされたボタン要素そのものを指し、その.formプロパティによって親となるフォームオブジェクトが取得できます。さらに.idでフォームのIDを比較することで、ボタンがどちらのフォームに属しているかを動的に判定しています。

このようにformプロパティを活用すれば、同じページ内に複数のフォームがある場合でも、共通のイベント処理の中で柔軟に分岐処理を実装できます。

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

    HTML DOMのInput Text formプロパティは、対象となるテキスト入力フィールド（input type=text）が属しているフォームへの参照を取得するために使用されます。もしテキストフィールドがどのフォームにも含まれていない場合は、nullが返されます。なお、このプロパティは読み取り専用です。つまり、値を参照することはできますが、JavaScriptから直接書き換えることはできません。構文Input Text formプロパティの基本的な構文は以下のとおりです。textObject.formサンプルコードここでは、実際にformプロパティを使って、テキストフィールドが所属するフ

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

    HTML DOMのInput Radioオブジェクトにおけるformプロパティは、指定されたラジオボタンが属するフォーム（form要素）への参照を返すために使用されます。もしラジオボタンがどのフォームにも含まれていない場合は、NULLを返します。このプロパティは読み取り専用です。 構文 Input Radioのformプロパティの構文は以下のとおりです。 radioObject.form 使用例 ここで、Input Radioのformプロパティを使った具体的な例を見てみましょう。 <!DOCTYPE html> <html> <body> <h1&g