【Bootstrap超入門】フォームの種類・使い方について徹底解説!

サンプル付き!Bootstrapで フォームを作ろう

こんにちは、フリーランスエンジニア兼ライターのワキザカ サンシロウです。

皆さんは、Bootstrapのフォームを使ったことがありますか? テキストボックス・ドロップダウンリストなど使ってフォームを作りたいときに覚えておくと便利です。

今回は「Bootstrapとは」という基本のことや最新版の「Boobstrap4」の使い方といったことから、

  • Boobstrapでフォームを使うための基礎知識
  • Boobstrapのフォームの種類・使い方
  • すぐに使える全部入りサンプルコード
  • 合わせて覚えておくと便利な他部品の使い方

といった応用的な方法まで、徹底的に解説します!

Bootstrapとは

Bootstrapは「WEBサイトやWEBページを効率よく開発するためのWEBフレームワーク」です。(WEBフレームワークって何? という方は、先に下の記事をご覧ください。)

HTML・CSS・JavaScriptから構成される、最も有名なWEBフレームワークであり、WEBページでよく使われるフォーム・ボタン・メニューなどの部品がテンプレートとして用意されています。

また、レスポンシブデザインに対応しているため、Bootstrapを使うだけでパソコン、iPad、スマホなど画面サイズに自動対応したレイアウトを作ることができます。WEB開発をするときは必須のフレームワークなので、使い方を覚えておくと便利です!

【最新版】Boobstrap4を使う方法

次に、Bootstrap4を使う方法について解説します。Bootstrap4は、2018年2月にリリースされた最新バージョンのBootstrapです。最新のデザインを取り入れたバージョンになっているので、今から使う方はBootstrap4がおすすめです。

最新版Bootstrap4の概要・使い方については以下で詳しく解説しているので、まだ使ったことがない方は先にこちらを見てみてくださいね!

Bootstrapとは?最新版のBootstrap4の使い方についても徹底解説!
更新日 : 2019年5月6日

Boobstrapでフォームを使うための基礎知識

次に、Bootstrapでフォームを使うための基礎知識について解説します。Bootstrapでフォームを使うための前提として、以下のような条件があります。

  • 大枠をformタグで囲む
  • フォームひとつひとつを”form-group”で囲む
  • 入力エリアにはinputタグに”form-control”のクラスを設定


たとえば、次のようになります。

サンプルコード:

「<input type=”text” class=”form-control”>」はテキストボックスを表していますが、classの指定以外はドロップダウンリスト・チェックボックス・ラジオボタンなど別のコントロールでも変わらないため、ルールとして覚えておくのがおすすめです!

Bootsrapのフォームの種類・使い方

次に、フォームの種類・使い方について解説します。テキストボックス、ドロップダウンリストなどコントロールごとに使い方を解説しますね。

テキストボックス

まずは、テキストボックスについて解説します。テキストボックスは、文字・数値などを直接入力するためのコントロールです。

inputタグに「type=”text”」を指定することで、次のように使うことができます。

サンプルコード:

実行結果:


ドロップダウンリスト

次に、ドロップダウンリストについて解説します。ドロップダウンリストは、複数のリストから選択するときに使うコントロールです。

selectタグで大枠を作り、optionタグで項目を追加して、次のように使うことができます。

サンプルコード:

実行結果:

チェックボックス

次に、チェックボックスについて解説します。チェックボックスは、複数の選択肢からチェックして選択するためのコントロールです。

inputタグに「type=”checkbox”」「class=”form-check-input”」を指定することで、次のように使うことができます。

サンプルコード:

実行結果:

ラジオボタン

次に、ラジオボタンについて解説します。

ラジオボタンは、複数の選択肢から1つだけ選択するためのコントロールです。

inputタグに「type=”ラジオボタン”」「class=”form-check-input”」を指定することで、次のように使うことができます。

サンプルコード:

実行結果:

ボタン

次に、ボタンについて解説します。ボタンはフォームのコントロールではないのですが、フォームとセットで使うことが多いので合わせて覚えておくのがおすすめです!

使い方は、次のとおりです。

Bootstrapでボタンを使う方法:

たとえば、次のように色を付けたボタンを簡単に使うことができます。

サンプルコード:

実行結果:

Bootstrapのボタンの種類・詳しい使い方については以下で解説しているので、気になる方は見てみてくださいね!

【Bootstrap超入門】ボタンの種類・使い方について徹底解説!
更新日 : 2019年7月7日

覚えておくとさらに便利な応用テクニック

次に、フォームの応用的なテクニックについて解説します。

グリッドで横幅を変更する方法

まずは、グリッドで横幅を変更する方法についてです。Bootstrapはグリッドシステムといわれる、画面を12分割してサイズを決める仕組みがあります。

グリッドシステムのイメージ:

col-2、col-sm-7、col-md-12のように、数字を直接指定して横幅のサイズを指定できます。

「col-XX」「col-sm-XX」等の違いは以下のとおりです。

col-XX  Auto
col-sm-XX 最大幅540px
col-md-XX 最大幅720px
col-lg-XX 最大幅960px
col-xl-XX  最大幅1140px

「col-XX」にしておけば自動でサイズが決まるので、ここでは「col-XX」の形式で解説を進めます。これを応用して、フォームのコントローラのサイズを指定することができます。

先ほどのテキストボックス・ドロップダウンリストにサイズを指定したサンプルを用意しました。

サンプルコード:

実行結果:

このように、各コントロールの横幅を指定できるので覚えておくと便利です!

枠の色を変える方法

次は、枠の色を変える方法についてです。入力した値をチェックした結果をわかりやすくするために、枠の色を変えるケースがよくあります。そのため、枠の色を変える方法を覚えておくと便利です。

Bootstrap4では、「is-valid」で枠を緑色、「is-invalid」で枠を赤色にすることができます。
※Bootstrap3の場合は「has-success」で緑色、「has-warning」で黄色、「has-error」で赤色にできます。

サンプルコード:

実行結果:

入力した結果がエラーのときに赤色の枠に変更して強調するケースはよくあるので、覚えておくと便利です!

読み取り専用にする方法

次は、読み取り専用にする方法についてです。

Noや番号など、連番であらかじめ自動で振られるような値のときに読み取り専用にして値のみ表示するケースはよくあります。そのため、読み取り専用にする方法を覚えておくと便利です。

「readonly」を指定することで、簡単に読み取り専用にすることができます。

サンプルコード:

実行結果:

このように、簡単に読み取り専用にすることができます。

コントロールの上下左右に余白を作る方法

次は、コントロールの上下左右に余白を作る方法についてです。フォームを使っていると、並べた要素の間の空白を広げたいときもありますよね。

brタグを使えば1行あけることはできるものの、数行あけたい場合HTMLのコードがbrタグで埋め尽くされてしまい、少し見づらくなってしまいます。

そんな時におすすめなのが「margin」を指定する方法です。marginは、配置したコントロールの上下左右に余白を作るための方法です。

marginで余白を作るときのイメージ:

「mt-〇」で上に余白、「mr-〇」で右に余白、「mb-〇」で下に余白、「ml-〇」で左に余白を作ることができます。

Top(上)・Right(右)・Left(左)・Bottom(下)の頭文字をmの後に書いてから、1 ~ 5までの数字を指定することで、余白を作ることができます。

marginを確認するサンプルコード:

実行結果:

このように、余白を付けて見やすく整えることができます。フォームを作るときは位置を変えたいケースもよくあるので、合わせて覚えておくと便利です。

すぐに使えるフォームサンプル

ここまでの解説をみて、次のように思った方もいるのではないでしょうか。

それぞれのフォームの使い方は分かったけど、
どう組み立てて画面を作ればいいんだ?

そんな方向けに、今まで解説した内容を踏まえたサンプルを用意しました。

サンプルコード:

実行画面(フォーム):


このように、簡単にフォームを作ることができます。

ちなみにこのサンプルでは、データ一覧を画面下部に表示しています。

実行画面(データ一覧):

実際にアプリを作るときは、登録したデータを表示する場所を用意するケースがほとんどなので、フォームとセットで覚えるのがおすすめです!

合わせて覚えておくと便利な他の部品の使い方

ここまでフォームの使い方をメインに解説をしてきましたが、フォーム以外にも便利な使い方がたくさんあります。ナビゲーションバー・ボタンなど他の部品を使って作っていくケースがほとんどです。

Bootstrapさえ入れておけば、フォームと同じようにHTMLコードを書いてすぐ使えるので、合わせて覚えておくのがおすすめです!

【Bootstrap】Navbarの使い方・カスタマイズ方法を徹底解説
更新日 : 2019年5月9日
【Bootstrap超入門】ボタンの種類・使い方について徹底解説!
更新日 : 2019年7月7日

まとめ

今回は、Bootstrapのフォームの種類・使い方について徹底的に解説しました! フォームはアプリを作るときに必ず使うので覚えておくと便利です

使い方も簡単なので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説