【HTML】Buttonタグとinputタグのbuttonの違い

目次

• 問題提議
• 結論 : どれを使えばいいのか
• <a>タグについて
  • <a>タグをなぜ汎用ボタンにするのか
• <button>タグについて
  • <button>タグをなぜ送信ボタンにするのか
• <input type=”button”>タグについて
  • <input type=”button”>タグをなぜ使用しないのか
• 参考

問題提議

HTML5を記述していて、ボタンクリックのような処理を書きたくなるときがあるが、HTML5には3つのボタンの挙動を再現できる記述方法がある。

どの方法でボタンを作成するのがいいのか気になった。

結論 : どれを使えばいいのか

タグ	用途
<a>	汎用ボタンに使用
<button>	フォームの送信ボタン等に使用
<input type=”button”>	使用しない

<a>タグについて

リンクを設定したいときに使用する。ボタンを作る際に最も使用されている。

例:クリックされるとtest.htmlへ飛ぶ

<a href="test.html"></a>

<a>タグをなぜ汎用ボタンにするのか

• 一般的に浸透して言える
• 他の２つの記述方式と違い、簡潔に記述できる

<button>タグについて

HTML5から導入されたタグで、inputタグと違い閉じタグがあるので、疑似要素が使用できるようになっています。

例:testという表示のボタンを表示する

<button type="button">test</button>

<button>タグをなぜ送信ボタンにするのか

aタグはフォームの送信ボタンには使用できないため、使用できるのは、inputタグかbuttonタグのどちらかになります。この２択の場合、疑似要素が使用できるbuttonタグの方に軍配が上がります。

<input type=”button”>タグについて

inputタグは閉じタグがないので、CSSでbeforeやafterの疑似要素が使用できないため、デザインの幅が狭まります。

例:testという表示のボタンを表示する

<input type="button" value="test">

<input type=”button”>タグをなぜ使用しないのか

HTML5で、buttonタグが登場したことにより、buttonの生成は専用のタグを使用したほうが使い勝手が良くなったため。

しかし、HTML4ではbuttonタグは使えないので、HTML4で構築する際はinputタグのbutton属性を使用する必要があります。

参考

• https://www.sejuku.net/blog/82466#:~:text=button%E3%82%BF%E3%82%B0%E3%81%A8input%20type%3D%22button%22%E3%81%AE%E9%81%95%E3%81%84,-%E3%81%BE%E3%81%9A%E3%81%AF%E3%80%81%E5%90%8C%E3%81%98%E3%83%9C%E3%82%BF%E3%83%B3&text=input%E3%82%BF%E3%82%B0%E3%81%AB%E3%81%AF%E9%96%89%E3%81%98,%E3%82%82%E3%81%A6%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82&text=%E3%81%BE%E3%81%9F%E3%80%81%E5%AD%90%E8%A6%81%E7%B4%A0%E3%81%8C%E6%8C%81%E3%81%A6%E3%82%8B,%E4%BD%BF%E7%94%A8%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82
• https://hsmt-web.com/blog/submit-input-button/#p2
• https://www.ameamelog.com/html-a-button/