【入門】Bootstrapを使ったformの書き方

みなさんこんにちは、さくちゃんです。
本日は、「Bootstrapを使ったformの書き方」について解説していきます。

本来であればフォームを書く場合、HTMLでマークアップした後に、CSSでスタイルを書いていくのですが、Bootstrapを使えば、HTML、CSSで書かずともformが簡単に作成できるようになります。

そこで今回は、Bootsrapを使った、formの書き方について、わかりやすく解説していきたいと思います。
HTMLを使ったformの書き方がわからない方は、こちらの記事を読んでおくと、理解しやすいかと思います。

また始める前に、Bootstrapを書く準備をしておきましょう。
まだの方は、こちらをご確認ください。

では早速やっていきましょう！

Bootstrapを使ったformの書き方

公式サイトの確認

まずは公式サイトの確認です。公式サイトはこちらになります。
公式サイトは英語で書かれていますが、翻訳機能などを使ってめげずに頑張りましょう。

もし公式サイト以外でBootstrapを学びたい方は、こちらの本でも学べます。

基本的な書き方

Bootstrapのformの書き方はこちらになります。

<form>
   <div class="form-group">
     <label for="textbox">TEXT BOX</label>
     <input type="text" id="textbox" class="form-control" placeholder="TEXT">
   </div>
</form>

これだけ見てもいまいちピンとこないかと思いますので、Bootstrapでformを書くときは、下の3つのポイントを押さえておくといいです。

1. フォームに決められたクラス名を付ける
2. フォームのラベル（名前）を決める
3. フォームのタイプを決める

この3つを押さえておくだけで、すごくわかりやすくなります。
では実際に、具体的な書き方について見ていきましょう。

form

こちらはHTMLでも同じなのですが、フォームを書くときは、「ここからここまでのコードはフォームですよー」と書く必要があります。そこで使うのが「formタグ」です。書き方は下のように書きます。

<form>
   //この中にフォームを書いていきます。
</form>

form-group

次に、それぞれのブロックを<div>タグで囲み、クラス名に「form-group」とつけます。ブロックとは、それぞれのフォーム・ボックスのことを指します。

例えば、1つのブロック（フォーム）を作成したい場合は、下のように書きます。

<form>
   <div class="form-group">

   </div>
</form>

もし、もう1つのブロックを追加したい場合は、divタグを増やすだけです。
※今回は、1つのブロックで解説します。

<form>
   <div class="form-group">

   </div>

   <div class="form-group">

   </div>
</form>

label

次にフォームのラベル（名前）を決めます。
こちらはHTMLと同様にlabelタグを使って書いていきます。
書き方は下のように書いていきます。

<form>
   <div class="form-group">
     <label>TEXT BOX</label>
   </div>
</form>

書き方は簡単で、フォームの名前を<label>タグの中に書くだけです。
ただこれだけでは少し不十分です。
ここで書いたラベル（名前）とフォームのボックスを紐付けしなければなりません。※フォームのボックスはあとで解説します。

ではどのように書いていくかと言うと、<label>タグには「for」、フォームのボックスには「id」を付けて、紐付けを行います。
書き方は下のように書きます。

<form>
   <div class="form-group">
     <label for="任意の名前">TEXT BOX</label>
   </div>
</form>

あとで解説しますが、「for」と「id」には同じ名前を付けます。

type

次に、フォームのボックスのタイプを決めます。
フォームのボックスは、HTML同様に<input>タグで書いていきます。

<form>
   <div class="form-group">
     <label for="任意の名前">TEXT BOX</label>
     <input>
   </div>
</form>

ただこれだけでは機能しないので、ここから<input>タグに、色々な情報を与えます。それが「type」になります。
基本的にはHTMLと同じなのですが、すごく重要なので、こちらでも解説します。

まず「type」には、いくつかの種類があるので、それぞれの用途にあった「type」を付けていきます。

他にもいくつかあるのですが、よく使うのはこんな感じです。
詳しく知りたい方は、「HTML　フォーム　タイプ」で調べて見てください。

では実際に「type」を付けていきます。
今回は、「一行のテキストボックス」を作成したいので、「text」と書いていきます。

<form>
   <div class="form-group">
     <label for="任意の名前">TEXT BOX</label>
     <input type="text">
   </div>
</form>

これで「type」は以上になります。
次に、先ほど説明した「id」を付けていきます。「id」の名前には、「for」と同じ名前を付けていきます。

<form>
   <div class="form-group">
     <label for="任意の名前">TEXT BOX</label>
     <input type="text" id="forと同じ名前">
   </div>
</form>

form-control

<input>タグを書く時に、必ず付けなければいけないクラス名があります。
それが「form-control」です。これを付けないとレイアウトが崩れてしまうので、付け忘れには注意しましょう。
書き方は下のように書いていきます。

<form>
   <div class="form-group">
     <label for="任意の名前">TEXT BOX</label>
     <input type="text" id="forと同じ名前" class="form-control">
   </div>
</form>

placeholder

そして最後に、「placeholder」について解説していきます。
「placeholder」は、フォームボックスの初期表示の内容を指します。
例えば、ここまで書いてきたフォームで、テキストボックスの中に名前を入力して欲しい場合は、下のように書くとより親切になります。

<form>
   <div class="form-group">
     <label for="textbox">名前</label>
     <input type="text" id="textbox" class="form-control" placeholder="名前を入力してください">
   </div>
</form>

ではどのように表示されるか、ブラウザで確認してみましょう。

このように、「placeholder」を付けることで、フォームボックスの初期表示の内容を書くことができるので、一緒に覚えておきましょう。

注意点

Bootstrapでよくありがちな質問として、

と言う質問をよく見かけます。
復習なのですが、Bootstrapはあくまで見た目を整える言語なので、実際にフォームを動かすことはできません。フォームを動かしたい場合は、PHPなどの言語を使って動かす必要があるので、注意が必要です。

PHPを学びたい方にオススメの参考書はこちら

まとめ

ここまで「Bootstrapを使ったformの書き方」について解説してきました。
今回紹介した内容以外にも、まだまだたくさん機能があるので、詳しく学びたい方は、公式サイトやBootstrapの参考書を見てみてください。

では本日は以上になります。