コンポーネント

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

  /

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

 

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

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

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

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

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

 

Contents
  1. フォームの基本構成
    1. フォームのタグ構成の手順
    2. フォームの実装
  2. チェックボックスとラジオボタン
  • ヘルプテキスト

    • フォームの基本構成

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

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

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

    ①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サイト運用」を経て、現在は「自社開発企業」のフロントエンドエンジニアとして仕事をしています。
    RELATED POST