HTML DOM入力チェックボックスのnameプロパティの使い方
はじめに
HTML DOMのInput Checkbox nameプロパティは、チェックボックス（input要素）のname属性の値を文字列として返します。また、このプロパティに対して新しい文字列を設定することで、name属性の値を動的に変更することも可能です。
構文
nameプロパティの基本的な構文は以下の通りです。
値を取得する場合
inputCheckboxObject.name
値を設定する場合
name属性に新しい文字列値を設定します。
inputCheckboxObject.name = 'String'
使用例
ここでは、Input Checkboxのnameプロパティを使った具体的なサンプルコードを見てみましょう。チェックボックスの状態に応じて、name属性の値を変更する例です。
<!DOCTYPE html>
<html>
<head>
<title>Name Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
<div>
Enable new name: <input id="formID" type="checkbox" name="formID">
</div>
</form>
<button onclick="getFormID()">Change Name Attribute</button>
<div id="nameAttr"></div>
<script>
function getFormID(){
var oldNameAttr = document.getElementById("formID");
var newNameAttr = document.getElementById("nameAttr");
if(oldNameAttr.checked == true){
oldNameAttr.name = 'newFormID';
newNameAttr.textContent = 'Updated value of name attribute: '+oldNameAttr.name;
} else {
newNameAttr.textContent = 'Check the checkbox'+ ', current value of name attribute: '+oldNameAttr.name ;
}
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、以下のような出力が得られます。
「Enable new name」チェックボックスをオンにする前
チェックボックスが未選択の場合は、ボタンをクリックしてもname属性の値は変更されず、現在の値が表示されます。
「Enable new name」チェックボックスをオンにした後
チェックボックスをオンにしてボタンをクリックすると、name属性の値が「newFormID」に更新され、その新しい値が画面に表示されます。
まとめ
Input Checkboxのnameプロパティを使えば、JavaScriptからチェックボックスのname属性の取得・設定を簡単に行うことができます。フォーム送信時のデータ識別や、動的なフォーム操作を実装したい場合に非常に便利なプロパティですので、ぜひ活用してみてください。
-
HTML DOM Input Week の name プロパティの使い方と取得・設定方法
Input Week の name プロパティとはHTML DOM の Input Week name プロパティは、type=week の入力要素（<input type=week>）に name 属性が定義されている場合に、その値を文字列として返します。さらに、このプロパティを使って新しい文字列を設定することも可能です。name 属性はフォーム送信時にデータを識別するために使われる重要な属性であり、JavaScript から動的に参照したり変更したりできることで、柔軟なフォーム操作が実現できます。構文name プロパティの基本的な構文は以下の通りです。値を取得する場合input
-
HTML DOM パスワード入力フィールドのnameプロパティとは？使い方を徹底解説
HTML DOM の Input Password name プロパティは、パスワード入力フィールド（<input type=password>）の name 属性を設定または取得するために使用されるプロパティです。name 属性は、フォームデータがサーバーへ送信された後に、そのデータを識別するための重要な役割を果たします。また、JavaScript 側でも name 属性を利用してフォーム要素を参照し、後から動的に操作することが可能です。構文（Syntax）name プロパティの基本的な構文は以下のとおりです。name プロパティを設定する場合passwordObject.nam