| title | slug | l10n | ||
|---|---|---|---|---|
<input type="reset"> |
Web/HTML/Element/input/reset |
|
{{HTMLSidebar}}
{{HTMLElement("input")}} 要素の reset 型はボタンとして表示され、既定の {{domxref("Element/click_event", "click")}} イベントのハンドラーは、フォーム内の入力欄すべてを初期値にリセットします。
{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}
Note
通常、フォームにリセットボタンを配置するべきではありません。このようなボタンは便利なものではなく、間違ってボタンをクリックしてしまったユーザーをイライラさせる可能性が高くなります（送信ボタンをクリックしようとしているときにクリックしてしまうことが多いです）。
<input type="reset"> 要素の value 属性は、ボタンのラベルとして表示される文字列を示します。 reset などのボタンは他の値を持ちません。 value はボタンの{{glossary("accessible description", "アクセシブル説明")}}を指定します。
<input type="reset" value="フォームをリセット" />{{EmbedLiveSample("Setting_the_value_attribute", 650, 30)}}
value を指定しなかった場合は、既定のラベルが付いたボタンが表示されます（通常は「リセット」ですが、{{Glossary("user agent", "ユーザーエージェント")}}によって異なります）。
<input type="reset" />{{EmbedLiveSample("Omitting_the_value_attribute", 650, 30)}}
<input type="reset"> ボタンはフォームをリセットするために使用されます。独自のボタンを作成して JavaScript を使用してカスタマイズしたいのであれば、 <input type="button"> またはよりよい {{htmlelement("button")}} 要素を使用してください。
単純なリセットボタンを作成するところから始めましょう。
<form>
<div>
<label for="example">何かテキストの例を入力してください</label>
<input id="example" type="text" />
</div>
<div>
<input type="reset" value="フォームをリセット" />
</div>
</form>次のように表示されます。
{{EmbedLiveSample("A_simple_reset_button", 650, 100)}}
テキストフィールドにいくらかテキストを入力してから、リセットボタンを押してみてください。
リセットボタンにショートカットキーを追加するには — あらゆる {{HTMLElement("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>{{EmbedLiveSample("Adding_a_reset_keyboard_shortcut", 650, 100)}}
上記の例の問題点は、アクセスキーが何であるかをユーザーが知る方法がないことです。これは特に、一般的には競合を避けるために修飾キーが標準的ではないために特に問題になります。サイトを構築する際には、サイトデザインの邪魔にならないような方法でこの情報を提供するようにしてください（例えば、サイトのアクセスキーについての情報を指す簡単にアクセスできるリンクを提供するなど）。ボタンにツールチップを追加する（title 属性を使う）ことも役立ちますが、アクセシビリティのためには完全な解決策ではありません。
リセットボタンを無効化するには、以下のようにグローバル属性の disabled を指定するだけです。
<input type="reset" value="Disabled" disabled />実行時に disabled を true または false に設定することで、ボタンを有効化したり無効化したりすることができます。 JavaScript では、これは btn.disabled = true や btn.disabled = false のようになります。
Note
ボタンの有効化や無効化についてのより詳しい情報は、 <input type="button"> のページを参照してください。
ボタンは制約の検証には関係しません。制約を受ける実際の値を持っていません。
上記に簡単な例を挙げました。リセットボタンについては、これ以上言うことはありません。
| 値 | ボタンのラベルとして使用する文字列 |
| イベント | {{domxref("Element/click_event", "click")}} |
| 対応している共通属性 |
type および
value
|
| IDL 属性 | value |
| DOM インターフェイス | {{domxref("HTMLInputElement")}} |
| メソッド | なし |
| 暗黙の ARIA ロール | button |
{{Specifications}}
{{Compat}}
- {{HTMLElement("input")}} およびそれが実装している {{domxref("HTMLInputElement")}} インターフェイス
- フォームとボタン
- HTML フォーム
- {{HTMLElement("button")}} 要素
- CSS プロパティの互換性