Bootstrap5のフォームを理解する【図解たっぷりBootstrap5入門】

• Bootstrapのform
• フォームのカスタマイズ
• 【実習】フォームを作成しよう

Bootstrapのform

前レッスンで使用したNavbar (ナビゲーションバー)テンプレートにも入っていたフォームの部分です。

フォームは、ナビゲーション以外の部分でも使用できます。
では、フォームについて詳しく見ていきましょう。

下記コードは、基本的なフォームの構造です。
全体を<form>タグで囲います。

<label>タグではそれぞれの入力フォームの概要を記述。

<input>タグを使用して入力欄を作ります。
入力欄には「form-control」というCSSクラスを指定します。

このクラスには、入力フォームのデザインなどがテンプレートとして用意されています。

そして最後に「button」タグで送信ボタンを作成します。
出来上がりのページは以下のようなものになります。

ちなみに、ボタンのデザイン・配色はBootstrapが用意しているCSSクラスで変更可能です。
こちらは、次のボタンのレッスンで詳しく紹介します。

フォームのカスタマイズ

フォームに関しても、様々なカスタマイズが可能です。

まず、入力フォームのサイズを変えてみましょう。
以下コードの、CSSクラス部分にハイライト表示しているクラス名を追記します。

「form-control」だと入力箇所は標準サイズ。
「form-control-sm」を追加すると高さが小さくなり、
「form-control-lg」を追加すると高さが大きくなります。

フォームのレイアウト

最初に紹介した基本的なフォームは、全ての要素が縦並びになっていました。
横並びに要素をレイアウトする方法を見てみましょう。

まず、「form」タグ下に「row」というCSSクラスを指定したdivを追加します。
そして１つ１つの要素はカラムで囲っていきます。
通常のグリッドシステムと全く同じですね。

次に、「input」タグに「placeholder」という属性を適用してフォームを作ります。
この属性を適用し、値の部分にテキストを入れると、そのテキストが入力フォーム内に表示されます。

【実習】フォームを作成しよう

実際にBootstrapのフォームを作ってみましょう。
bootstrap-worksフォルダ内に、新しくform.htmlを作成してコードを書いてみてください。

「form-row」を使った横並び、placeholderを使ったフォーム内へのテキスト表示とこのレッスンの内容がすべて入っています。
フォームとしてはちょっと変ですが、復習として作成してみて下さい。

【完成イメージ】

【POINT】
①containerで囲む
formタグだけを書いてしまうとフォームが画面全体に伸びてしまいます。
<div class="container">でフォーム全体を囲っておいてください。

②サイズ
お名前は「form-control-lg」クラス
ご住所は「form-control-sm」クラス
を使って、入力部分の大きさを変更します。

③横並びの趣味・特技
スマホ幅でも２つ横に並ぶと狭いので、col-md-6クラスを指定してください。