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

HTML DOM Inputラジオボタンのnameプロパティの使い方を解説

HTML DOM Inputラジオのnameプロパティとは

HTML DOMのInputラジオボタンにおけるnameプロパティは、ラジオボタン（input type="radio"）のname属性の値を取得・設定するために使用されます。

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

構文（Syntax）

nameプロパティを設定する場合の構文は以下の通りです。

radioObject.name = name

ここで指定する「name」は、ラジオボタンに付与したい名前を表します。

サンプルコード

実際にラジオボタンのnameプロパティを変更する例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input radio name Property</h1>
<form id="FORM1">
FRUIT:
<input type="radio" name="fruits" id="Orange">Orange
</form>
<p>下のボタンをクリックすると、上のラジオボタンの名前が変わります</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
    function changeName() {
        document.getElementById("Orange").name = "colors";
        document.getElementById("Sample").innerHTML = "Radio button name is now colors";
    }
</script>
</body>
</html>

実行結果

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

HTML DOM Inputラジオボタンのnameプロパティの使い方を解説

「CHANGE NAME」ボタンをクリックすると、以下のように表示が変化します。

HTML DOM Inputラジオボタンのnameプロパティの使い方を解説

コードの解説

このサンプルコードの処理内容を順番に見ていきましょう。

1. ラジオボタンの作成

まず、フォーム内にtype="radio"、name="fruits"、id="Orange"を指定したinput要素を作成しています。

<form>
FRUIT:
<input type="radio" name="fruits" id="Orange">Orange
</form>

2. ボタンの作成

次に、クリックされるとchangeName()メソッドを実行する「CHANGE NAME」ボタンを配置しています。

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

3. changeName()メソッドの処理

changeName()メソッドでは、getElementById()メソッドを使ってラジオボタンのinput要素を取得し、そのname属性の値を「colors」に変更しています。変更後の結果は、idが「Sample」の段落要素のinnerHTMLプロパティを使って画面に表示されます。

function changeName() {
    document.getElementById("Orange").name = "colors";
    document.getElementById("Sample").innerHTML = "Radio button name is now colors";
}

まとめ

nameプロパティを使えば、JavaScriptからラジオボタンのname属性を動的に書き換えることができます。フォーム送信時のデータ識別や、要素への後からの参照・操作に役立つため、フォーム操作を行うWeb開発において覚えておくと便利なプロパティです。

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

    disabledプロパティとはHTML DOMのInput Radio disabledプロパティは、ラジオボタンを無効化するかどうかを設定、または現在の状態を取得するために使用されるプロパティです。ブール値（true / false）で状態を表し、trueなら要素を無効化、falseなら有効のままとなります。デフォルト値はfalseです。disabledが設定された要素はグレーアウトして表示され、ユーザーがクリックして選択することはできません。構文disabledプロパティを設定する場合の構文は以下の通りです。radioObject.disabled = true|false;trueを指定

  2. HTML DOM ラジオボタンのvalueプロパティとは？取得・設定方法を解説

    HTML DOMのInput Radio valueプロパティは、type=radioが指定されたinput要素のvalue属性に関連するプロパティです。ラジオボタンのvalue属性の値を取得（get）または設定（set）するために使用されます。ラジオボタンのvalueプロパティは、その値が画面上に表示されないため、Webサイトのユーザーインターフェースには直接影響しません。しかし、フォームを送信する際に、同じグループ内の複数のラジオボタンを区別するために非常に役立ちます。構文valueプロパティを設定する場合の構文は以下の通りです。radioObject.value = text;ここで、t