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

「buttonタグ」と「input type=”submit”」はどんな違いがあるの?使い分けについて教えてほしい。

 

そんな疑問にお答えします。

本記事ではボタンや送信として使える「button」「input」について詳しく解説しています。

 

HTMLとCSSだけであれば問題なかったけど、JavaScriptやPHPが絡むと上手く動かない経験があったのでその点にも触れていきたいと思います。

 

スポンサーリンク

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

 

ボタンの機能といってもリンクで別ページへ飛ばす、入力したデータの送信するなどさまざまですね。

ただリンクを飛ばすだけのボタンであれば<a>タグでリンク先を指定してCSSでキレイにすればボタンっぽくなります。

なので「button」「input type=”submit”」はデータの送信時に使っている認識です。

 

基本的な仕様から見ていきましょう。

 

button

<button>~</button>

 

「button」も他の要素と同じく属性を付けることができます。

属性 解説
name 要素の名前を指定
value 表示するテキストを指定
type ボタン要素のタイプの指定(button、submit、reset)デフォルトはsubmit
disabled 入力要素の無効化

 

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

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

 

input要素、button要素、form要素、select要素、textarea要素、iframe要素、label要素、fieldset要素、isindex要素

 

例文

<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」どちらも同じように使える

 

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

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

 

button →  要素内に要素が指定できる
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>を使う。要素内に疑似要素が指定可能

 

まとめ

 

はい、まとめでーす。

「button」と「input type」で本来やりたい「データ送信」はどちらでも可能。
ただ「button」は要素内指定が可能でデザイン性自由度が高い
特別な理由がなければ「button」を選べばOK

 

という感じ。

HTML/CSSだけでボタン風リンクを作っていた時は特になにも考えていませんでしたが、PHPを使うようになってから今回の内容を理解してコーディングするようになりました。参考になれば幸いです。

 

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

スポンサーリンク
サボり気味です、でもたまにつぶやきます。
NO IMAGE

晴耕雨読

『晴れた日には畑を耕し雨の日には本を読む』そんな生活を目指すブログです