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

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

HTML DOM の form プロパティは、HTML ドキュメント内にある月入力フィールド（<input type="month">）が属するフォームへの参照を返します。このプロパティを利用することで、JavaScript からその月入力フィールドがどのフォームに含まれているのかを簡単に特定できます。

構文

form プロパティの基本的な構文は以下のとおりです。

object.form

サンプルコード

それでは、HTML DOM input month の form プロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>

   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }

   form{
      margin:2.5rem auto;
   }

   button{
      background-color:#db133a;
      border:none;
      cursor:pointer;
      padding:8px 16px;
      color:#fff;
      border-radius:5px;
      font-size:1.05rem;
      outline:none;
   }

   .show{
      font-weight:bold;
      font-size:1.4rem;
   }
</style>
</head>
<body>
<h1>form Property Demo</h1>
<form id="Form 1">
<fieldset>
<legend>Form 1</legend>
<input type="month" class="monthInput">
</fieldset>
</form>
<button onclick="identify()">Identify Month Input Field</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector(".monthInput").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

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

「Identify Month Input Field」ボタンをクリックすると、月入力フィールドが属しているフォームの ID が取得され、画面に表示されます。

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

押さえておきたいポイント

  • form プロパティは読み取り専用であり、値を設定することはできません。
  • 月入力フィールドがどのフォームにも属していない場合、このプロパティは null を返します。
  • type="month" は Chrome・Edge・Opera などでサポートされていますが、Firefox や Safari ではテキスト入力として表示される場合があるため、実装時にはブラウザ対応状況の確認をおすすめします。
  1. HTML DOM Input URL formプロパティの使い方を解説

    HTML DOM の Input URL form プロパティは、URL入力フィールド（<input type=url>）を囲んでいるフォームへの参照を返します。このプロパティを利用すると、JavaScriptから特定の入力要素がどのフォームに属しているかを簡単に取得できます。 構文 構文は以下の通りです − フォームオブジェクトへの参照を返す場合： inputURLObject.form 使用例 Input URL form プロパティの具体的な使用例を見てみましょう。以下のサンプルでは、URL入力フィールドが含まれるフォームのIDを取得して画面に表示します − <!DOC

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

    HTML DOM Input Week form プロパティとはHTML DOM の Input Week form プロパティは、<input type=week> 要素が含まれている親フォーム（enclosing form）への参照を返します。このプロパティを使うことで、JavaScript から入力フィールドがどのフォームに属しているかを取得し、フォームの ID やその他のプロパティにアクセスすることができます。構文（シンタックス）form オブジェクトへの参照を返す場合の構文は以下の通りです。inputWeekObject.form使用例それでは、Input Week fo