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

HTMLフォームの入力内容をすべてリセットする方法【初心者向け】

HTMLフォームを使えば、ユーザーからの入力を簡単に受け取ることができます。<form>タグの中に各種フォーム要素を配置することで、ユーザー入力を受け付ける仕組みを作れます。フォーム要素には、テキスト入力欄、ラジオボタン、送信ボタンなど、さまざまな種類があります。

ユーザー入力を受け取るには、<input>タグを使用し、type属性で入力形式を指定します。そして、フォーム内のすべての入力内容を一括でクリアしたい場合は、type="reset" を指定した<input>タグを追加するだけで実現できます。

resetボタンがクリックされると、そのフォーム内の全テキストフィールドや選択状態が、ページ読み込み時の初期値に戻ります。JavaScriptを書かずとも、HTMLだけで手軽にリセット機能を実装できるのが魅力です。

サンプルコード

以下のコードを実行すると、フォームの入力内容をすべてクリアする動作を確認できます。

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

補足ポイント

  • value属性を変更することで、ボタンに表示されるテキストを自由にカスタマイズできます。
  • resetボタンは同じ<form>要素内に配置する必要があります。
  • 初期値がvalue属性で設定されている場合、リセット後は空ではなくその初期値に戻る点に注意しましょう。
  1. HTMLのformmethod属性の使い方を解説！フォーム送信方法を個別に指定する方法

    formmethod属性とは？formmethod属性は、フォームデータを送信する際に使用するHTTPメソッド（GETまたはPOST）を指定するためのHTML属性です。この属性は、type=submitおよびtype=imageのinput要素と組み合わせて使用されます。formmethod属性の最大の特徴は、form要素自体に設定されているmethod属性を上書き（オーバーライド）できるという点です。これにより、1つのフォーム内で複数の送信ボタンを配置し、ボタンごとに異なるHTTPメソッドや送信先を指定することが可能になります。主な特徴フォーム全体ではなく、特定の送信ボタン単位でHTTPメソ

  2. HTMLのinput要素の幅を文字数で指定する方法【size属性の使い方】

    HTMLの<input>要素の幅を文字数を基準に指定したい場合は、size属性を使用します。size属性に数値を設定すると、その数値分の平均的な文字が表示できる幅が確保されます。 size属性の基本構文 <input type=text name=sub size=10> 上記のように記述すると、半角文字約10文字分の幅を持つテキストボックスが表示されます。size属性を省略した場合の既定値は「20」です。 使用例 次の例では、size属性とmaxlength属性を組み合わせて、表示幅と入力可能な最大文字数を同時に指定しています。 <!DOCTYPE html