buttonタグとinputタグの違い/使い分けを解説【HTML】

こんな疑問を解決します。

どちらを使ってもボタンを作る事が出来るけど、どちらを使うべきなのか問題。

「button」「input」の違い、使い分けについて

フロントエンドエンジニアとしてWEB制作からシステム開発の仕事をしている筆者が、現場で学んだノウハウを元に解説。

buttonタグとinputタグの違い/使い分けを解説

はい、結論「button」がおすすめ。

ボタン自体の役割としては別ページへリンクを付与したり、入力したデータの送信、決定処理などいろいろです。

ただリンクを飛ばすだけのボタンであれば<a>タグでリンク先を指定して、

CSSでキレイにすればボタンのように表現は出来るので、buttonタグとinputタグの使い分けに悩んだのは私だけじゃないはず！？

ではさっそく「button」がおすすめな理由、「buttonタグ」と「inputタグ」の違い、を見ていきましょう。

button

<button>~</button>

「button」は属性を付けることができます。

コード例

<form action="submit.php" method="post">
   <button type="submit" name="action" value="save">Save</button>
   <button type="submit" name="action" value="delete">Delete</button> 
</form>

「button」はボタンとしての汎用的なインライン要素です。

要素内に疑似要素や画像、タグを使用することができるので表現の自由度が高い。

つまり

CSSデザインの自由度が高くなるので、ホバーした時に色が変化、動きを付けたりとリッチなデザイン実装が出来る。

input

<input type="~">

「input」はホームページ制作で頻繁に登場する要素ですね。

typeの指定でさまざまな表現ができますが、今回は「input type=”submit”」の解説です。

「button」と同じく「name」や「value」で属性を付けることができますが、特徴として要素内の指定が出来ません。

つまり疑似要素が使えないので簡単なデザインしかできず、リッチなデザインをするためには工夫が必要です。

※<div>や<span>で上手く囲ってやれば出来なくもないですが、出来るだけ完結でスマートな構文が望ましいです。

コード例

<form action="#" method="post">
　　<input type="text" value="" />
　　<input type="submit" value="送信">
</form>

「button」「input」どちらも同じように使える

先述の通り「データを送信する」という役割であれば、どちらを用いても実現可能そうですね。

違いは「要素内に要素を指定できるか？」です。

疑似要素を使かわずhoverした時にちょっと変化を出す程度であればinputを使っても全然OK

紛らわしかったり、コーディング時に迷うようなら「button」を使うよう覚えてしまった方が良いでしょう。

「button」「input」の使い分け一覧

ボタンをリンクとして飛ばしたいだけ

<a>タグをボタンぽく整えて使えばよい。わざわざ<button>で囲まなくていい

<button><a href="">#</a></button>　//NG例
<a href="">#</a>　//OK例

デザインしない、こだわらない

<input type=”submit”>でデータ送信してもOK。

ただ、機能だけを重視した社内システムとかでない限り、最低限のUIデザインはすることが多い。

データ送信+デザインもこだわる

<button>を使う。要素内に疑似要素が指定可能

まとめ

まとめです。

という感じ。

HTML/CSSだけでボタン風リンクを作っていた時は特になにも考えていませんでしたが、

バックエンドとのAPI連携を行うなら意識したい部分かと思います。

少しでもコーディングの参考になれば幸いです。

最後までお読みいただきありがとうございました。