【BootStrap】フォームコンポーネント

基本的な入力コントローラ

form-group

入力コントローラ単位(テキストボックスやセレクトボックス単位)にdiv要素で作成します。

form-control

input等の入力コントローラに指定します。各入力コントローラのフォーカス状態やサイズ等を統一させます。対応するlabel要素のfor属性の値とid属性の値を一致させる必要があります。forとidを紐づけることでラベル部分をクリックしたとしても入力コントロール部分にフォーカスを当てることが可能になります。

form-control-sm

入力コントローラを小さくできます。

form-control-lg

入力コントローラを大きくできます。

readonly

入力できない非活性の入力コントローラとすることが可能です。

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

form-check

div要素、余白がついた見やすいチェックボックス/ラジオボタンになります。

form-check-inline

div要素、チェックボックス/ラジオボタンを横に並べます。

form-check-input

チェックボックス/ラジオボタンのinput要素、チェックボックスを使う場合は「type=”checkbox”」、ラジオボタンを使う場合は「type=”radio”」を同時に指定する必要があります。

form-check-label

チェックボックス/ラジオボタンのlabel要素

ヘルプテキスト

form-text

入力コントローラへの注意書きの役割を行うヘルプテキストを表します。input要素の下にこのクラスを適用したsmall要素を指定する必要があります。合わせてテキストをグレーにするようにtext-mutedあたりを指定するのがベターでしょう。

トグルスイッチ

custom-control custom-switch

トグルスイッチを使うために必要な一番外側のdiv要素に指定します。

custom-control-input

トグルスイッチのinput要素です。

custom-control-label

トグルスイッチのlabel要素です。