button要素

解説

button要素は、Webページにボタンを配置するためのHTMLの要素です。フォームの送信や、JavaScriptによる処理の実行に使います。ボタンの文言は、「送信する」「申し込む」のように、押したときに何が起きるかが分かる表現にします。

種類

button要素の動作は、type属性の値によって次の3種類に分かれます。

• type="submit"：フォームを送信する
• type="button"：送信せず、JavaScriptでの処理に使う
• type="reset"：フォーム内のすべての入力欄を初期値に戻す

type属性を省略すると、command属性やcommandfor属性を指定した場合などを除き、ボタンは submit として扱われます。そのため、フォームの中で送信以外の処理に使うボタンには、type="button" を明示します。

注意点

リセットボタンは、顧客の入力内容を消してしまうおそれがあります。type="reset" のボタンを送信ボタンの隣に置くと、押し間違えによって入力内容がすべて初期値に戻り、強い不満につながります。Nielsen Norman Groupも、利用者が送信のつもりで誤ってリセットボタンを押すことが多いとして、ほとんどのリセットボタンは取り除くべきだとしています。したがって、リセットボタンは置かないことを基本とします。

出典

• <button>: ボタン要素（MDN Web Docs）