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

HTML DOM Input Rangeのnameプロパティとは？設定方法と実例付きで解説

HTML DOMのInput Range（入力レンジ）オブジェクトのnameプロパティは、レンジ（範囲）入力フィールドのname属性を設定または取得するために使用されます。

name属性は、フォームデータがサーバーへ送信された後にデータを識別するための重要な役割を果たします。また、JavaScript側でもname属性を利用してフォーム要素を参照し、後から動的に操作することができます。

構文

nameプロパティを設定する場合

rangeObject.name = name

引数として渡すnameには、レンジスライダーコントロールの名前を指定します。

使用例

それでは、Input Rangeのnameプロパティの具体的な使用例を見てみましょう。以下のサンプルでは、ボタンをクリックするとレンジコントロールのname属性値が変更される仕組みになっています。

<!DOCTYPE html>
<html>
<body>
<h1>Input range name Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>下のボタンをクリックすると、上のレンジコントロールのnameが変更されます</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
    function changeName() {
        document.getElementById("RANGE1").name ="VOLUME" ;
        document.getElementById("Sample").innerHTML = "Range control name is now VOLUME";
    }
</script>
</body>
</html>

実行結果

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

HTML DOM Input Rangeのnameプロパティとは？設定方法と実例付きで解説

「CHANGE NAME」ボタンをクリックすると、以下のようにname属性が変更されたことが表示されます。

HTML DOM Input Rangeのnameプロパティとは？設定方法と実例付きで解説

コードの解説

この例では、まずフォーム内にtype="range"、id="RANGE1"、name="VOL"という属性を持つinputフィールドを作成しています。

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

続いて、ユーザーがクリックするとchangeName()関数が実行されるボタン「CHANGE NAME」を配置しています。

<button type="button" onclick="changeName()">CHANGE NAME</button>

changeName()関数では、getElementById()メソッドを使って対象のレンジ入力フィールドを取得し、そのname属性の値を「VOLUME」に変更しています。さらに、id「Sample」の段落に対してinnerHTMLプロパティを使用することで、変更結果のテキストを画面に表示しています。

function changeName() {
    document.getElementById("RANGE1").name ="VOLUME" ;
    document.getElementById("Sample").innerHTML = "Range control name is now VOLUME";
}

このように、nameプロパティを活用すれば、JavaScriptからフォーム要素のname属性を柔軟に操作でき、送信後のサーバーサイドでのデータ識別やクライアントサイドでの要素操作の両面で役立ちます。

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

    HTML DOM の Input Range（type=range の入力フィールド）におけるform プロパティは、対象となるレンジスライダーを含むフォームへの参照を取得するために使用されます。もしレンジスライダーがどのフォームにも属していない場合には NULL が返されます。なお、このプロパティは読み取り専用であり、値を代入して変更することはできません。構文Input Range の form プロパティの構文は以下の通りです。rangeObject.formサンプルコードそれでは、Input Range の form プロパティを使った具体的な例を見ていきましょう。<!DOCTYP

  2. HTML DOM入力レンジ（range）のdisabledプロパティの使い方を徹底解説

    HTML DOM Input Range disabledプロパティとはHTML DOMのInput Range（レンジスライダー）におけるdisabledプロパティは、スライダーを無効化するかどうかを設定または取得するために使用されるプロパティです。このプロパティにはブール値（真偽値）を指定します。trueを設定するとスライダーは無効化され、falseを設定すると有効になります。デフォルト値はfalseです。なお、無効化された要素はグレーアウトして表示され、ユーザーはクリックやドラッグなどの操作を行うことができなくなります。構文（Syntax）disabledプロパティを設定する場合の構文は