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

HTMLフォームのリセットボタンとは？役割と使い方をわかりやすく解説

HTMLフォームにおけるリセットボタンは、フォーム内のすべての入力フィールド（テキストボックス、チェックボックスなど）に入力された内容を、ページ読み込み時の初期状態に一括して戻すためのボタンです。ユーザーが入力内容を間違えた場合や、最初から入力し直したい場合に便利な機能です。

リセットボタンは、<input>タグのtype属性に"reset"を指定するだけで簡単に追加できます。

HTMLフォームのリセットボタンとは？役割と使い方をわかりやすく解説

リセットボタンの実装例

次のコードは、学生の名前と科目を入力するシンプルなフォームにリセットボタンを配置した例です。実際にブラウザで実行してみてください。

<!DOCTYPE html>
<html>
  <body>
    <form>
      学生名：<br>
      <input type="text" name="sname">
      <br>
      科目名：<br>
      <input type="text" name="ssubject">
      <br>
      <input type="reset" value="reset">
    </form>
  </body>
</html>

value属性で表示テキストを変更する

value属性の値を変更すれば、ボタンに表示されるテキストを自由にカスタマイズできます。日本語のサイトでは「リセット」や「クリア」などと表示するのが一般的です。

<input type="reset" value="リセット">

リセットボタンを使用する際の注意点

リセットボタンはクリックすると入力内容が即座に消去され、元に戻せません。ユーザーが誤って押してしまうと、せっかく入力したデータが失われる恐れがあります。そのため、最近のWebサイトではリセットボタンを設置しないか、設置する場合でも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 を指定した場合はフォーカスされません。デフ