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

HTML DOM Input Range の form プロパティとは？使い方をわかりやすく解説

HTML DOM の Input Range（type="range" の入力フィールド）におけるform プロパティは、対象となるレンジスライダーを含むフォームへの参照を取得するために使用されます。もしレンジスライダーがどのフォームにも属していない場合には NULL が返されます。なお、このプロパティは読み取り専用であり、値を代入して変更することはできません。

構文

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

rangeObject.form

サンプルコード

それでは、Input Range の form プロパティを使った具体的な例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input range form Property</h1>
<form id="FORM1">
<input type="range" id="RANGE1" name="VOL">
</form>
<p>Get the form id which contains the above range slider clicking on the below button</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
    function formId() {
        var P=document.getElementById("RANGE1").form.id;
        document.getElementById("Sample").innerHTML = "The id of the form containing the range slider is: "+P ;
}
</script>
</body>
</html>

出力結果

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

HTML DOM Input Range の form プロパティとは？使い方をわかりやすく解説

「GET FORM」ボタンをクリックすると、レンジスライダーを含むフォームの ID が表示されます。

HTML DOM Input Range の form プロパティとは？使い方をわかりやすく解説

コードの解説

上記の例では、以下のような処理を行っています。

まず、type="range"、id="RANGE1"、name="VOL" という属性を持つ入力フィールドを、id 属性が「FORM1」に設定されたフォーム要素の中に作成しています。

<form id="FORM1">
<input type="range" id="RANGE1" name="VOL">
</form>

次に、ユーザーがクリックすると formId() メソッドを実行する「GET FORM」ボタンを配置しています。

<button type="button" onclick="formId()">GET FORM</button>

formId() メソッドでは、getElementById() メソッドによって type="range" の入力フィールドを取得し、そのレンジスライダーを含むフォームオブジェクトの id プロパティの値を取り出します。取得した値は変数 P に格納され、innerHTML プロパティを通じて id が「Sample」の段落に出力されます。

function formId() {
    var P=document.getElementById("RANGE1").form.id;
    document.getElementById("Sample").innerHTML = "The id of the form containing the range slider is: "+P ;
}

ポイントまとめ

  • form プロパティは、レンジスライダーが属するフォームへの参照を返します。
  • スライダーがフォームの外に配置されている場合は NULL が返ります。
  • 読み取り専用のプロパティであるため、値の代入による変更はできません。
  1. HTML DOM 入力レンジ（range）の autofocus プロパティの使い方を徹底解説

    HTML DOM の input range autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際にレンジスライダー（type=range の入力欄）へ自動的にフォーカスを当てるかどうかを、設定（set）および取得（get）することができます。 構文（Syntax） autofocus プロパティの基本的な構文は以下のとおりです。 autofocus プロパティを設定する場合： rangeObject.autofocus = true|false tru

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

    HTML DOMのInput Range valueプロパティは、type=rangeが指定されたinput要素に関連するプロパティです。スライダー（レンジ）コントロールのvalue属性の値を取得したり、新しい値を設定したりするために使用されます。value属性には初期値（デフォルト値）や、ユーザーがスライダーをドラッグして設定した値が格納されます。構文valueプロパティの構文は以下の通りです。値を設定する場合rangeObject.value = text;ここで「text」には、レンジスライダーコントロールに設定したい値を指定します。サンプルコードそれでは、Input Rangeのval