ほんっとにはじめてのHTML5とCSS3：（ちょっとメモ）整理しよう。フォームのボタン比較

（ちょっとメモ）整理しよう。フォームのボタン比較

最終更新日：2018年02月02日　（初回投稿日：2013年09月11日）

フォームで使用するボタンは、<input>要素、<button>要素によるものと、いろいろありますが、それぞれどう違うかを比較して整理してみます。

フォームのボタンに関する記事はこちら

どれがどのボタンになるか整理

フォームのボタンには「送信ボタン」「リセットボタン」「汎用ボタン（戻る・進む・トップへなど）」の種類があります。
また、見た目の種類で「画像を使用できるか」もありますね。

どの要素で作ったボタンが、どの種類のボタンになるかを整理してみました。

	送信ボタン	リセットボタン	汎用ボタン	画像を使用
<input type= "submit">	OK!	─	─	△ （CSSで可能）
<input type= "reset">	─	OK!	─
<input type= "button">	─	─	OK!
<input type= "image">	OK!	─	─	OK!
<button>	OK!	─	─	OK!
<button type= "submit">	OK!	─	─
<button type= "reset">	─	OK!	─
<button type= "button">	─	─	OK!

それぞれのメリット・デメリット

<input type="reset">
	メリット	デメリット
<input type="submit">	○ボタンのスタンダード ○ CSSを併用すれば画像使用もOK	─
<input type="button">
<input type="image">	○手軽に画像の送信ボタンを作れる	●「送信ボタン」だけ
<button>	○自由にボタンを作れる	● IE7以下でバグ（IE8からOK）

送信ボタンが複数だったり、リセットや汎用ボタンも使うような複雑なフォームなら、面倒を避けるためにも <input> で作ったほうが無難かな。

ボタン関連の記事

汎用ボタン（type="button"）は、javaScript で動作を指定する必要がある。
・[49-10] input要素で送信ボタンなどを作ろう (submit, reset, button)

ボタン部品は、アラートやコンファームを javaScript で指定できる。
・[49-10] input要素で送信ボタンなどを作ろう (submit, reset, button)
・[50] button要素で送信・リセット・汎用ボタンを自由に作ろう

ボタンの見た目はCSSで自由に変えられる。
・ [49-10-2] input要素で作るボタンの見た目を CSSで変えよう
・[50] button要素で送信・リセット・汎用ボタンを自由に作ろう

次回予告

フォームの「ボタン」に関する記事が続きましたが、今回で終わりです。

さて次回は、<select>要素を使ってセレクトメニューを作りましょう。
フォームでよく目にする、クリックすると選択肢が出てくるコレです。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。