コンポーネント

【Bootstrapのコンポーネント】フォーム(Forms)に関して

記事内に商品プロモーションを含む場合があります

 

以下の順番で解説していきます。

フォーム基本構成
→フォームを構成する基本的な構成

チェックボックス
→チェックボックスについて

ヘルプテキスト
⇨フォームの補助テキスト

トグルスイッチ
→"ON"と"OFF"で色が変わる

 

フォームの基本構成

まずはフォームを構成する基本的な構成についてみていきます。

フォームのタグ構成の手順

タグ構成の手順としては、次のようになります。

①formタグを作る
↓
②div class="form-group"で囲う
↓
③labelタグでひも付ける
↓
④必要な要素(input select textareaなど)を記述
↓
⑤欲しい機能が作れるよう、②〜④を繰り返す

ソースコードレベルで見ていきましょう。

フォームの実装

基本構成

基本構成

  1.     <div class=”container”>
  2.       <form action=””>
  3.         <div class=”form-group“>
  4.           <label for=”hoge1″>Email address</label>
  5.           <input type=”email” class=”form-control” id=”hoge1″ name=””>
  6.         </div>
  7.         <div class=”form-group”>
  8.           <label for=”hoge2″>Example select</label>
  9.           <select class=”form-control” id=”hoge2″ name=””>
  10.             <option value=””>1</option>
  11.             <option value=””>2</option>
  12.             <option value=””>3</option>
  13.             <option value=””>4</option>
  14.             <option value=””>5</option>
  15.           </select>
  16.         </div>
  17.         <div class=”form-group”>
  18.           <label for=”hoge3″>Example multiple select</label>
  19.           <select multiple class=”form-control” id=”hoge3″ name=””>
  20.             <option value=””>1</option>
  21.             <option value=””>2</option>
  22.             <option value=””>3</option>
  23.             <option value=””>4</option>
  24.             <option value=””>5</option>
  25.           </select>
  26.         </div>
  27.         <div class=”form-group”>
  28.           <label for=”hoge4″>Email textarea</label>
  29.           <textarea class=”form-control” name=”” id=”hoge4″></textarea>
  30.         </div>
  31.       </form>
  32.     </div>

 

基礎的なフォーム
selecetタグの選択時

基本的な機能のあるformが出来上がりました。

サイジング

入力欄のサイズを変えるクラスも存在します。
サイジング

  1.   <div class=”container”>
  2.       <form action=””>
  3.         <div class=”form-group”>
  4.           <input type=”text” class=”form-control form-control-lg mb-3″ placeholder=”大きめ”>
  5.           <input type=”text” class=”form-control mb-3″ placeholder=”デフォルト”>
  6.           <input type=”text” class=”form-control form-control-sm” placeholder=”小さめ”>
  7.         </div>
  8.       </form>
  9.     </div>

 

サイズ違いの input text

サイズが異なるinput textが確認できます。

書き込み不可

textareaで書き込みが出来ないものも作成可能です。

書き込み不可

  1.     <div class=”container”>
  2.       <form action=””>
  3.         <div class=”form-group”>
  4.           <input type=”text” class=”form-control” readonly placeholder=”リードオンリー”>
  5.         </div>
  6.       </form>
  7.     </div>

 

書き込みができない input text

注意点

  • class=”form-control”がないと、インライン属性になって、幅目一杯、ではなくなります
  • labelのfor属性と、次に来るタグのid属性を揃えることで、テキストをクリックしたときに該当する入力欄にカーソルが当たるようになります
  • selectは選択肢が隠れている状態、select multipleは選択肢が表示されている状態のものです

チェックボックスとラジオボタン

次にformにチェックボックスを追加します。

チェックボックス

チェックボックスはselectタグとは違い、選択肢が既に表示された状態になっています。

横並びにしたい場合は、クラス名を”form-check”ではなく、”form-check-inline”にします。
チェックボックス

  1.     <div class=”container”>
  2.       <form action=”” class=”mb-3″>
  3.         <div class=”form-check“>
  4.           <input class=”form-check-input” type=”checkbox” id=”hoge5″>
  5.           <label class=”form-check-label” for=”hoge5″ >checkbox 1</label>
  6.         </div>
  7.         <div class=”form-check”>
  8.           <input class=”form-check-input” type=”checkbox” id=”hoge6″>
  9.           <label class=”form-check-label” for=”hoge6″ >checkbox2</label>
  10.         </div>
  11.       </form>
  12.       <form action=””>
  13.         <div class=”form-check-inline“>
  14.           <input class=”form-check-input” type=”checkbox” id=”hoge7″>
  15.           <label class=”form-check-label” for=”hoge7″ >checkbox 3</label>
  16.         </div>
  17.         <div class=”form-check-inline”>
  18.           <input class=”form-check-input” type=”checkbox” id=”hoge8″>
  19.           <label class=”form-check-label” for=”hoge8″ >checkbox 4</label>
  20.         </div>
  21.       </form>
  22.     </div>

 

チェックボックスの種類

縦並びと、横並びのチェックボックスができました。

ラジオボタン

次はラジオボタンです。

ラジオボタンの場合もチェックボックス同様、縦並びと横並びにすることができます。
異なるのは、type属性を”checkbox”ではなく”radio”にすることです。

確認していきましょう。
ラジオボタン

  1.     <div class=”container”>
  2.       <form action=”” class=”mb-3″>
  3.         <div class=”form-check“>
  4.           <input class=”form-check-input” type=”radio” id=”hoge7″ name=”radio1″ value=”option1″>
  5.           <label class=”form-check-label” for=”hoge7″ >radio 1</label>
  6.         </div>
  7.         <div class=”form-check”>
  8.           <input class=”form-check-input” type=”radio” id=”hoge8″ name=”radio1″ value=”option2″>
  9.           <label class=”form-check-label” for=”hoge8″ >radio 2</label>
  10.         </div>
  11.       </form>
  12.       <form action=””>
  13.         <div class=”form-check-inline”>
  14.           <input class=”form-check-input” type=”radio” id=”hoge9″ name=”radio2″ value=”option3″>
  15.           <label class=”form-check-label” for=”hoge9″ >radio 3</label>
  16.         </div>
  17.         <div class=”form-check-inline”>
  18.           <input class=”form-check-input” type=”radio” id=”hoge10″ name=”radio2″ value=”option4″>
  19.           <label class=”form-check-label” for=”hoge10″ >radio 4</label>
  20.         </div>
  21.       </form>
  22.     </div>

 

ラジオボタンの種類

こちらも縦並び、横並びのラジオボタンができました。

注意点

  • 同じグループ内では、同じname属性を付けてください
    (ラジオボタンが複数選択できるのを防ぐため)

ヘルプテキスト

ここでは、formのヘルプテキストについて説明します。

ヘルプテキストは、formの入力欄の、補助文言を意味します。

それでは、確認していきましょう。
ヘルプテキスト

  1.     <div class=”container”>
  2.       <form action=””>
  3.         <div class=”form-group”>
  4.           <label for=”hoge11″ >パスワード</label>
  5.           <input type=”password” class=”form-control” id=”hoge11″>
  6.           <small class=”form-text text-muted“>
  7.             英文字数字8〜20文字、空白や記号を含めないでください。
  8.           </small>
  9.         </div>
  10.       </form>
  11.     </div>

 

ヘルプテキストが付いた入力フォーム

少し小さめのテキストで、灰色の文字が追加されていることが分かります。

注意点

  • ヘルプテキストには、small要素にtext-mutedクラスで、文字色を薄い灰色にするとユーザーが補助文言と認識しやすいかと思います

トグルスイッチ

最後はトグルスイッチです。

トグルスイッチは、ONにすると着色され、0FFにすると非活性になるスイッチです。

早速確認していきましょう。

トグルスイッチ

  1.     <div class=”container”>
  2.       <form action=””>
  3.         <div class=”form-group”>
  4.             <div class=”custom-control custom-switch”>
  5.               <input type=”checkbox” class=”custom-control-input” id=”hoge12″>
  6.               <label class=”custom-control-label” for=”hoge12″>トグルスイッチ</label>
  7.             </div>
  8.         </div>
  9.       </form>
  10.     </div>

 

初期状態のトグルスイッチ
ONにした時のトグルスイッチ

トグルスイッチが完成しました。

まとめ

Bootstrap4のフォームコンポーネントについて解説しました。

解説内容をまとめると以下の通りでした。

フォーム基本構成
→フォームを構成する基本的な構成

チェックボックス
→チェックボックスについて

ヘルプテキスト
→フォームの補助テキスト

トグルスイッチ
→"ON"と"OFF"で色が変わる

 

フォームは組み合わせによって、様々な内容や装飾を追加していけるので、使用用途は幅広いです。

公式ドキュメントも参考にしながら、ぜひ進めてみてください。

ABOUT ME
ゆう
エンジニア歴7年。 大学卒業後、フィールドエンジニア職に就くが「手に職をつけたい」と思い、未経験からWEBデザイナーに転職。 その後、「WEB制作会社」「上場企業のECサイト運用」を経て、現在は「自社開発企業」のフロントエンドエンジニアとして仕事をしています。