input[type="button"] と button 要素、どう使い分けるべきか

と、

は、それぞれ通常ボタン、リセットボタン、送信ボタンを実現できる。

ぐらいの感覚はあるんだけど、じゃあ何で両方残ってんのかなーと思って調べてみた。

目次

機能差はなし・button はデザイン上の利便性のため

結論からいくと、input によるボタンと button 要素とでは、type 属性が同じなら機能差はない。

button 要素は内部に子要素を持てる他、空要素である input 要素と違って ::before・::after 擬似要素が使えるので、CSS によるデザイン上の幅が広い。

色々調べたが、どうやら button 要素が存在するのは、「リッチなボタンが作りたいニーズが高いから用意しました」以上の理由がなさそうであった。input 要素の方も、歴史的に使われてきたことだし、なくすこともないか、ということで残っているっぽかった。

input だと擬似要素が使えないのは盲点だった。だから Bootstrap とかも button 要素をより推奨してるのねー。

昔はバグが多かった

IE6・IE7 の時代は、出来たての button 要素に対するバグが多かったので「input 要素を使い続けましょう」みたいな記事も散見されたが、イマドキはそうしたバグもないので、気にせず使って良いだろう。

ただ、ブラウザのデフォルトスタイルは若干違うので、併用した時に見栄えが悪くなる可能性がある。見栄えを気にしないなら、どちらをどのように使っても、どうでも良い。

↑ デフォルトスタイルを確認できるサンプルページを作ってみた。

そういえば type="image" ってどうなったの…？

そういえば「ホームページビルダー2001」ぐらいの頃って、画像ファイルを直接指定できる、input[type="image"] っていう要素があった気がするな…。

と思って調べてみたら、現存していた。

画像が使える type="submit" なんですな。button 要素の方には type="image" は存在しないので、似たようなことをやるには内側に img 要素を配置したりして自分でデザインする必要がある。

このボタンをクリックしてフォーム送信すると、画像のどの位置をクリックしたか、という X 座標値・Y 座標値が送信されるという仕様らしい。知らなかった。

コチラも今後使うことはないかもしれないが、標準の button 要素には出来ない芸当を持ち合わせているので、何らかの使い方が考えられそう。ｗ

以上

ということで、デザイン上の柔軟性の違いしかないから、好きな方使え (input の方が使い勝手悪いから今は button で良いんじゃないか)、でしかなかった。両者が残っているのも歴史的経緯というか、大した理由はなさそうだ。気にせず行こう。

参考文献