<input type="reset">

<input type="reset"> 要素の value 属性は、ボタンのラベルとして表示される文字列を示します。 reset などのボタンは他の値を持ちません。 value はボタンのアクセシブル説明を指定します。

value を指定しなかった場合は、既定のラベルが付いたボタンが表示されます（通常は「リセット」ですが、ユーザーエージェントによって異なります）。

<input type="reset" />

<input type="reset"> ボタンはフォームをリセットするために使用されます。独自のボタンを作成して JavaScript を使用してカスタマイズしたいのであれば、 <input type="button"> またはよりよい <button> 要素を使用してください。

単純なリセットボタンを作成するところから始めましょう。

<form>
  <div>
    <label for="example">何かテキストの例を入力してください</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="フォームをリセット" />
  </div>
</form>

次のように表示されます。

テキストフィールドにいくらかテキストを入力してから、リセットボタンを押してみてください。

リセットボタンにショートカットキーを追加するには — あらゆる <input> で通用する方法としてと — グローバル属性の accesskey を使用します。

この例では、 r がアクセスキーとして指定されます (r はブラウザーや OS の組み合わせによる特定の修飾キーを押しながら押す必要があります accesskey に有益なリストがあります)。

<form>
  <div>
    <label for="example">何かテキストの例を入力してください</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="フォームをリセット" accesskey="r" />
  </div>
</form>

上記の例の問題点は、アクセスキーが何であるかをユーザーが知る方法がないことです。これは特に、一般的には競合を避けるために修飾キーが標準的ではないために特に問題になります。サイトを構築する際には、サイトデザインの邪魔にならないような方法でこの情報を提供するようにしてください（例えば、サイトのアクセスキーについての情報を指す簡単にアクセスできるリンクを提供するなど）。ボタンにツールチップを追加する（title 属性を使う）ことも役立ちますが、アクセシビリティのためには完全な解決策ではありません。

リセットボタンを無効化するには、以下のようにグローバル属性の disabled を指定するだけです。

<input type="reset" value="Disabled" disabled />

実行時に disabled を true または false に設定することで、ボタンを有効化したり無効化したりすることができます。 JavaScript では、これは btn.disabled = true や btn.disabled = false のようになります。

ボタンは制約の検証には関係しません。制約を受ける実際の値を持っていません。

上記に簡単な例を挙げました。リセットボタンについては、これ以上言うことはありません。

• <input> およびそれが実装している HTMLInputElement インターフェイス
• フォームとボタン
• HTML フォーム
• <button> 要素
• CSS プロパティの互換性