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

HTML DOM フォームの length プロパティとは？使い方とサンプルコードを解説

HTML DOM の Form オブジェクトが持つ length プロパティは、フォーム内に存在する要素の数を返すために使用されるプロパティです。読み取り専用のため、値を代入して変更することはできません。

構文

Form length プロパティの構文は以下のとおりです。

formObject.length

サンプルコード

それでは、Form length プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    form{
        border:2px solid blue;
        margin:2px;
        padding:4px;
    }
</style>
<script>
    function getLength() {
        var len=document.getElementById("FORM1").length ;
        document.getElementById("Sample").innerHTML = "Number of elements present inside the form are :"+len;
}
</script>
</head>
<body>
<h1>Form length property example</h1>
<form id="FORM1">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label> <br><br>
<select name="Fruit">
<option value="Mango">Mango</option>
<option value="Litchi">Litchi</option>
<option value="Guava">Guava</option>
</select>
</form>
<br>
<p>下のボタンをクリックすると、上のフォーム内の要素数を取得できます</p>
<button onclick="getLength()">get Length</button>
<p id="Sample"></p>
</body>
</html>

実行結果

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

HTML DOM フォームの length プロパティとは？使い方とサンプルコードを解説

「get Length」ボタンをクリックすると、以下のように要素数が表示されます。

HTML DOM フォームの length プロパティとは？使い方とサンプルコードを解説

コードの解説

この例では、まず id="FORM1" を持つフォームを作成しています。フォーム内には、type 属性が "text" のテキスト入力欄と、type 属性が "password" のパスワード入力欄がそれぞれ1つずつ配置されています。さらに、ドロップダウンリストを生成するための <select> 要素も含まれています。つまり、form 要素の中には合計3つの要素が存在することになります。

<form id="FORM1">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label> <br><br>
<select name="Fruit">
<option value="Mango">Mango</option>
<option value="Litchi">Litchi</option>
<option value="Guava">Guava</option>
</select>
</form>

続いて、「get Length」ボタンを作成しました。このボタンは、ユーザーがクリックすると getLength() 関数を実行します。

function getLength() {
    var len=document.getElementById("FORM1").length ;
    document.getElementById("Sample").innerHTML = "Number of elements present inside the form are :"+len;
}

getLength() 関数では、document オブジェクトの getElementById() メソッドを使って <form> 要素を取得し、その length プロパティの値を変数 len に代入しています。フォーム要素内には3つの要素が存在するため、戻り値は 3 になります。この値は、id が "Sample" の p 要素の innerHTML プロパティに文字列を代入することで、画面上に表示されます。

ポイントまとめ

  • length プロパティは読み取り専用で、フォーム内のコントロール（input、select、textarea など）の総数を返します。
  • form.elements.length と同等の値を返します。
  • 送信前に入力項目の数を確認したい場合など、フォームの内容を動的にチェックしたい場面で役立ちます。
  1. HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

    Textarea の form プロパティとは？HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。構文form プロパティの基本的な構文は次のとおりです。object.form戻り値テキストエリアを含む <f

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

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要