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

HTML DOM リセットボタンのnameプロパティの使い方をわかりやすく解説

HTML DOM の Input Reset（リセットボタン）における name プロパティは、リセットボタンの name 属性を設定または取得するために使用されるプロパティです。name 属性を適切に設定しておくことで、フォームデータがサーバーへ送信された後に、そのデータがどの要素から送られたものなのかを識別しやすくなります。

構文

name プロパティの基本構文は以下のとおりです。

name 属性を設定する場合

resetObject.name = name

「name」には、リセットボタンに付けたい名前を文字列で指定します。

name 属性を取得する場合

resetObject.name

戻り値として、現在設定されている name 属性の値が文字列で返されます。

サンプルコード

実際に Reset の name プロパティを使用した例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input Reset name Property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"><br><br>
<input type="reset" id="RESET1">
</form>
<p>下のボタンをクリックすると、リセットボタンの名前が変更されます</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
    function changeName() {
        document.getElementById("RESET1").name = "RES_BTN";
        document.getElementById("Sample").innerHTML = "リセットボタンの名前は RES_BTN になりました";
    }
</script>
</body>
</html>

実行結果

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

HTML DOM リセットボタンのnameプロパティの使い方をわかりやすく解説

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

HTML DOM リセットボタンのnameプロパティの使い方をわかりやすく解説

コードの解説

このサンプルコードでは、以下のような処理を行っています。

1. リセットボタンの作成

まず、type="reset"、id="RESET1" を持つ <input> 要素を作成しています。このボタンをクリックすると、フォーム内に入力された内容がすべてリセットされます。このボタンは2つのテキストフィールドを含むフォームの中に配置されており、フォーム自体には緑色の枠線と余白を指定するインラインスタイルが適用されています。

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"><br><br>
<input type="reset" id="RESET1">
</form>

2. 名前変更用ボタンの作成

次に、ユーザーがクリックすると changeName() 関数を実行する「CHANGE NAME」ボタンを作成しています。

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

3. changeName() 関数の処理内容

changeName() 関数では、getElementById() メソッドを使って type="reset" の入力要素を取得し、その name 属性の値を「RES_BTN」に設定しています。続いて、id="Sample" の段落要素に対して innerHTML プロパティを使用することで、変更後のメッセージを画面に表示しています。

function changeName() {
    document.getElementById("RESET1").name = "RES_BTN";
    document.getElementById("Sample").innerHTML = "リセットボタンの名前は RES_BTN になりました";
}

まとめ

Input Reset の name プロパティを使えば、JavaScript から動的にリセットボタンの name 属性を読み書きできます。フォーム送信時のデータ識別や、スクリプトによるフォーム制御が必要な場面で役立つため、基本的な使い方を押さえておくと便利です。

  1. HTML DOM Input リセットボタンの disabled プロパティの使い方を解説

    HTML DOM の Input Reset オブジェクトが持つ disabled プロパティは、フォーム内のリセットボタンを無効化するかどうかを設定したり、現在の状態を取得したりするために使用されます。このプロパティはブール値（true / false）を受け取り、true を設定するとリセットボタンが無効になり、false であれば有効な状態を保ちます。デフォルト値は false です。disabled プロパティが true に設定された要素は、グレーアウトして表示され、クリックすることもできなくなります。つまり、ユーザーはそのボタンと一切やり取りできなくなります。構文disabled

  2. HTML DOM Input Reset autofocusプロパティの使い方を徹底解説

    HTML DOM の Input Reset autofocus プロパティは、HTML <input> 要素の autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれたときにリセットボタンへ自動的にフォーカスを当てるかどうかを、設定または取得できます。構文autofocus プロパティの構文は以下の通りです。autofocus プロパティを設定する場合：resetObject.autofocus = true|falsetrue を指定するとリセットボタンがフォーカスを受け取り、false を指定した場合はフォーカスされません。デフ