同じように表現出来るけど、どちらを使った方がいいのか疑問が出てきますよね。
本記事ではボタンや送信として使える「button」「input」について詳しく解説しています。
HTMLとCSSだけであれば問題なかったけど、JavaScriptやPHPが絡むと上手く動かない経験があったのでその点にも触れていきたいと思います。
buttonタグとinputタグの違い/使い分けを解説
結論「button」が良いです。
ボタンの機能といってもリンクで別ページへ飛ばす、入力したデータの送信するなどさまざまですね。
ただリンクを飛ばすだけのボタンであれば<a>タグでリンク先を指定してCSSでキレイにすればボタンっぽくなります。
「button」「input」の違いを見ていきましょう。
button
<button>~</button>
「button」も他の要素と同じく属性を付けることができます。
| 属性 | 解説 |
| name | 要素の名前を指定 |
| value | 表示するテキストを指定 |
| type | ボタン要素のタイプの指定（button、submit、reset）デフォルトはsubmit |
| disabled | 入力要素の無効化 |
「button」はボタンとしての汎用的なインライン要素です。
要素内に疑似要素や画像、タグを使用することができるので表現の自由度が高いといえます。
例文
<form action="#" method="post">
<input type="text" value="" />
<button type="button">button</button>
<button type="submit">submit</button>
<button type="reset">reset</button>
</form>
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」どちらも同じように使える
先述の通り「データを送信する」という役割であれば、どちらを用いても実現可能そうですね。
違いは「要素内に要素を指定できるか？」です。
input type=”submit” → 要素内に要素が指定できない
疑似要素を使かわずhoverした時にちょっと変化を出す程度であればinputを使っても全然OK
紛らわしかったり、コーディング時に迷うようなら「button」を使うよう覚えてしまった方が良いでしょう。
「button」「input」の使い分け一覧
ボタンをリンクとして飛ばしたいだけ
<a>タグをボタンぽく整えて使えばよい。わざわざ<button>で囲まなくていい
NG → <button><a href="">#</a></button>
OK → <a href="">#</a>
デザインしない、こだわらない
<input type=”submit”>でデータ送信してもOK、ただ、わざわざこれを選ぶ必要は無い
データ送信+デザインもこだわる
<button>を使う。要素内に疑似要素が指定可能
まとめ
はい、まとめでーす。
という感じ。
HTML/CSSだけでボタン風リンクを作っていた時は特になにも考えていませんでしたが、PHPを使うようになってから今回の内容を理解してコーディングするようになりました。参考になれば幸いです。
最後までお読みいただきありがとうございました。
