Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

HTML5 type="reset"はあくまでリセットするボタンだった

More than 1 year has passed since last update.

HTML5でtype="reset"が利用できるようになり、JavaScript書く必要なくなると思っていたのですが、
リセットボタンはあくまで初期状態にリセットするボタンなんですね。
どうゆうことかというと、僕は勝手にフォームを、まっさらな何も選択(入力)されていない状態に戻してくれると思っていました。

<input type="reset" value="リセット">

例えば、初期状態では何も選択(入力)されていない場合、
項目選択後に、リセットボタンを押すと、何も選択されていない状態に戻ります。
これは思っていた通り。

◻︎選択肢A ◻︎選択肢B

↓ポチポチ

☑︎選択肢A ◻︎選択肢B

↓リセット

◻︎選択肢A ◻︎選択肢B

しかし、初期状態で何かしら選択されている状態で、
状態を変更し、リセットすると、まっさらな状態になるのではなく、
最初の選択状態に戻ります。ワオ

☑︎選択肢A ◻︎選択肢B

↓ポチポチ

◻︎選択肢A ☑︎選択肢B

↓リセット

🙆‍♂️☑︎選択肢A ◻︎選択肢B
🙅‍♂️◻︎選択肢A ◻︎選択肢B

気をつけます。

pappikko
おじいちゃんの孫
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away