<input type="reset">

<input> 要素の reset 型はボタンとして表示され、既定の click イベントのハンドラーは、フォーム内の入力欄すべてを初期値にリセットします。

通常、フォームにリセットボタンを配置するべきではありません。このようなボタンは便利なものではなく、間違ってボタンをクリックしてしまったユーザーをイライラさせる可能性が高くなります (送信ボタンをクリックしようとしているときにクリックしてしまうことが多いです)。

ボタンのラベルとして使用する DOMString
イベント click
対応している共通属性 type および value
IDL 属性 value
メソッド なし

<input type="reset"> 要素の value 属性は、ボタンのラベルとして表示される DOMString を示します。 reset などのボタンは他の値を持ちません。

<input type="reset" value="フォームをリセット">

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

<input type="reset">

リセットボタンの使用

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

単純なリセットボタン

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

<form> 
  <div>
    <label for="example">Type in some sample text</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">Type in some sample text</label>
    <input id="example" type="text">
  </div>
  <div>
    <input type="reset" value="Reset the form"
     accesskey="r">
  </div>
</form>

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

リセットボタンの無効化と有効化

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

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

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

: ボタンの有効化や無効化についてのより詳しい情報は、 <input type="button"> のページを参照してください。

検証

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

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

仕様書

仕様書 状態
HTML Living Standard
<input type="reset"> の定義
現行の標準
HTML5
<input type="reset"> の定義
勧告

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
type="reset"Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報