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

最終更新日: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="submit">
○ボタンのスタンダード
○ CSSを併用すれば画像使用もOK
<input
type="reset">
<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>要素を使ってセレクトメニューを作りましょう。
フォームでよく目にする、クリックすると選択肢が出てくるコレです。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.