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

HTML DOM Input Number の form プロパティとは？使い方を解説

HTML DOM の input number（数値入力フィールド）の form プロパティは、HTML ドキュメント内でその数値入力フィールドを含んでいるフォーム（<form> 要素）への参照を返します。このプロパティを使うことで、JavaScript から入力フィールドがどのフォームに属しているのかを簡単に特定できます。

構文

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

object.form

サンプルコード

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

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#1b203a;
      color:#fff;
   }
   form{
      margin:2.5rem auto;
      border:1px solid #fff;
      padding:2rem;
   }
   button{
      background-color:#db133a;
      border:none;
      cursor:pointer;
      padding:8px 16px;
      color:#fff;
      border-radius:5px;
      font-size:1.05rem;
      outline:none;
   }
   input{
      border:none;
      background-color:#ffffff4a;
      height:1.2rem;
      padding:8px;
      color:#fff;
      font-weight:bold;
      font-size:1rem;
   }
   .show{
      font-weight:bold;
      font-size:1.4rem;
   }
</style>
</head>
<body>
<h1>form Property Demo</h1>
<form id="Form 1">
<legend>Form 1</legend>
<input type="number" class="numberInput" value="12345300">
</form>
<button onclick="identify()">Identify Number Input Field</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector(".numberInput").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>

このサンプルでは、document.querySelector(".numberInput").form.id を使って、数値入力フィールドが属するフォームの id 属性の値を取得し、画面に表示しています。

出力結果

上記のコードを実行すると、ブラウザには次のように表示されます。

HTML DOM Input Number の form プロパティとは？使い方を解説

ここで「Identify Number Input Field」ボタンをクリックすると、数値入力フィールドがどのフォームに含まれているかが特定され、結果が画面に表示されます。

HTML DOM Input Number の form プロパティとは？使い方を解説

まとめ

input number 要素の form プロパティを利用すれば、入力フィールドから所属するフォームへの参照を取得でき、フォームの id やその他の属性に動的にアクセスすることが可能になります。フォームと入力要素を連携させた処理を実装したい場合に非常に便利なプロパティです。

  1. 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

  2. HTML DOM Input Number value プロパティとは？取得・設定方法を解説

    HTML DOM の Input Number value プロパティは、type=number を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、input 要素の value 属性の値を取得したり、設定したりすることができます。要素の初期値（デフォルト値）を指定する目的でも活用され、ユーザーが入力を行うとその値に更新されます。 構文 value プロパティの構文は以下の通りです。 値を設定する場合 numberObject.value = number; ここで number には、数値フィールドに設定したい値を指定します。 サンプルコ