「submit(送信)ボタンには､inputとbuttonのどちらを使ったらいいの？」
「inputタグとbuttonタグの違いは何？」
こんな疑問にお答えします｡
じつは､submit(送信)ボタンはbuttonでつくったほうがいいです｡
私は､2015年からWeb制作の仕事をはじめて､160件ほどのWebサイトを制作してきました｡
その間､いろいろな失敗を繰り返し､クライアントからのフィードバックや本などで勉強することにより､多くのノウハウを得ることができました｡
この記事では以下のことがわかります｡
- 送信ボタンにbuttonを使ったほうがいい理由
- inputタグとbuttonタグの違い
この記事を読み終えると､inputとbuttonの違いがわかり､コーディング作業を効率化することができます｡
- 目次
送信ボタンにbuttonを使ったほうがいい理由
送信ボタンにbuttonを使ったほうがいい理由は､buttonだと疑似要素が使うことができ､CSSでのデザインに自由度が高くなるからです｡
反対に､inputでつくる送信ボタンだと､疑似要素が使えずデザインや動きに限界があります｡
divやspanなどでデザインのためのタグで囲んでいけばできることもありますが､HTML構造がわかりにくくなります｡
よっぽど手抜きのデザインではない限り､デフォルトスタイルのままのボタンを使うことはないです｡
むしろ､ホバーアクションを求められることも多くなってきたので､こうなるとinputタグだと表現するのが難しいことが増えてきます｡
- input … デザインや動きをつけるのに限界がある
- button … 疑似要素(:before,:after)が使えるのでデザインや動きをつけやすい
複雑なサイトや大規模なサイトになってくると､文字コードなどの問題もでてくるようです｡
以下の記事が参考になります｡
エントリーフォーム最適化については､こちらの記事で解説しています｡
【EFO】問い合わせフォームからのコンバージョンを増やす方法【エントリーフォーム最適化】
問い合わせフォームからのコンバージョンを増やす方法について悩んでいますか？この記事では、問い合わせフォームのどこに注意すればいいか、どんな改善をすればいいかがわかります。ぜひご覧ください。
inputタグとbuttonタグの違い
inputタグ
type="submit"
このようなデザインのボタンをコーディングで作る場合､デフォルトスタイルをリセットして､cssを書いていくことになります｡
ただ､矢印についてはcssだけではつけられないので､背景画像として使わないといけなくなります｡
See the Pen input submit by hashi84 (@hashi84) on CodePen.
type="image"
同じように送信ボタンになるinput type="image"という画像を使えるtypeもありますが､画像はできるかぎり使わずCSSで表現していくべきです｡
type="button"
もうひとつbuttonタグではなくinputタグにもtype="button"というものがあります｡
inputタグのtype="button"はsubmitの機能は持っていません｡
送信しないボタンもbuttonタグを使うことができるので使うことはほぼないです｡
buttonタグ
MW WP Formのカスタマイズについては､こちらの記事でまとめています｡
フォームカスタマイズに便利！MW WP Formの使い方まとめ【WordPress】
WordPressのメールフォームをカスタマイズする方法を知りたいですか？この記事では、カスタマイズに便利なプラグインMW WP Formの使い方、カスタマイズ方法などをまとめて紹介しています。ぜひご覧ください。
まとめ
inputタグとbuttonタグの違いについて解説しました｡
- 特別な理由がなければ､送信ボタンにはbutton type="submit"を使う
- その理由は､CSSでのデザインに自由度が高くなるから
- buttonタグなら､class属性を使ってaタグとのボタンデザインの共通化もしやすい
Web制作､コーディングでおしゃれなデザインを実現するのにおすすめの書籍です｡
CSSを使って動きのあるWebサイトをつくることもできるようになります｡
