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

HTMLフォームのすべての入力フィールドをリセットする方法

HTMLフォームを使えば、ユーザーからの入力を簡単に受け取ることができます。<form>タグの中にフォーム要素を追加することで、ユーザー入力を収集できます。フォーム要素には、テキスト入力欄、ラジオボタン、送信ボタンなど、さまざまな種類が用意されています。

ユーザー入力を受け取るには<input>タグを使用し、type属性で入力の種類を指定します。そして、フォーム内のすべての入力を一括でクリアしたい場合は、<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="クリア"）。
  • JavaScriptを使う場合は、form.reset()メソッドでも同じようにフォームを初期化できます。
  • リセットボタンはあくまで「初期値への復元」であり、送信処理は行わないため、送信ボタンとは役割が異なる点に注意しましょう。
  1. HTMLのinput要素の幅を文字数で指定する方法【size属性の使い方】

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

  2. HTML DOM Input Reset（リセットボタン）オブジェクトの使い方とプロパティ一覧

    HTML DOM の Input Reset オブジェクトは、type 属性に reset が指定された <input> 要素に関連付けられています。リセットボタンとなる入力要素は、新規に作成する場合は createElement() メソッドを、既存の要素にアクセスする場合は getElementById() メソッドを使用することで操作できます。 Input Reset オブジェクトの主なプロパティ Input Reset オブジェクトには、以下のプロパティが用意されています。 プロパティ説明 autofocusページ読み込み時に、リセットボタンへ自動的にフォーカスを当