<input type="reset">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" id="id" name="id" />

    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
  </div>
</form>

.controls {
  padding-top: 1rem;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 1fr 2fr;
  gap: 0.7rem;
}

label {
  font-size: 0.8rem;
  justify-self: end;
}

input[type="reset"],
input[type="submit"] {
  width: 5rem;
  justify-self: end;
}

input[type="reset"] {
  grid-column: 2;
  grid-row: 2;
}

input[type="submit"] {
  grid-column: 2;
  grid-row: 3;
}

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

値

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

value 属性の設定

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

value 属性の省略

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

html
<input type="reset" />

リセットボタンの使用

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

基本的なリセットボタン

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

html
<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 に有益なリストがあります)。

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

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

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

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

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

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

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

検証

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

例

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

技術的概要

値 ボタンのラベルとして使用する文字列
イベント click
対応している共通属性 type および value
IDL 属性 value
DOM インターフェイス HTMLInputElement
メソッド なし
暗黙の ARIA ロール button

仕様書

Specification
HTML
# reset-button-state-(type=reset)

ブラウザーの互換性

BCD tables only load in the browser

関連情報