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

HTML DOM リセットボタンの value プロパティとは？構文とサンプルコードで解説

HTML DOM リセットボタンの value プロパティとは

HTML DOM の input 要素（type="reset"）が持つvalue プロパティは、リセットボタンの value 属性の値を取得したり設定したりするためのプロパティです。

リセットボタンは、クリックするとフォーム内の入力内容を初期状態に戻す役割を持っています。通常、ボタンにはデフォルトで「Reset」というテキストが表示されますが、value プロパティを変更することで、ボタンに表示されるテキストを任意の文字列に書き換えることが可能です。

構文

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

resetObject.value = text;

text には、リセットボタンに表示させたいテキストを指定します。なお、値を取得したい場合は resetObject.value を参照するだけで、現在設定されている文字列が返されます。

サンプルコード

それでは、input リセットの value プロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input reset Value 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>Get the above element value by clicking the below button</p>
<button onclick="changeValue()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeValue() {
      document.getElementById("RESET1").value="Form_Reset";
      document.getElementById("Sample").innerHTML="The reset button value is changed and the value can be seen on the button itself";
   }
</script>
</body>
</html>

実行結果

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

HTML DOM リセットボタンの value プロパティとは？構文とサンプルコードで解説

続いて、CHANGE ボタンをクリックした後の表示は以下のとおりです。

HTML DOM リセットボタンの value プロパティとは？構文とサンプルコードで解説

コードの解説

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

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. CHANGE ボタンの設置

次に、ユーザーがクリックすると changeValue() 関数が呼び出される「CHANGE」ボタンを作成しています。

<button onclick="changeValue()">CHANGE</button>

3. changeValue() 関数による値の変更

changeValue() 関数では、getElementById() メソッドを使って type が reset の input 要素を取得し、その value 属性の値を「Form_Reset」に設定しています。この新しい値は、リセットボタン自体に表示されるテキストとして反映されます。さらに、innerHTML プロパティを使って、id が「Sample」の段落に変更完了を示すメッセージを表示しています。

function changeValue() {
   document.getElementById("RESET1").value="Form_Reset";
   document.getElementById("Sample").innerHTML="The reset button value is changed and the value can be seen on the button itself";
}

まとめ

リセットボタンの value プロパティを使えば、JavaScript からボタンの表示テキストを動的に変更できます。ユーザーの操作状況に応じてボタンのラベルを切り替えたい場合などに活用できる、便利なプロパティです。

  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 を指定した場合はフォーカスされません。デフ