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

最終更新日: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>要素を使ってセレクトメニューを作りましょう。
フォームでよく目にする、クリックすると選択肢が出てくるコレです。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 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 - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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