フォーム(form)クラスの使い方を徹底解説2024年5月1日SHAREポストシェアはてブLINE記事にはプロモーションが含まれる場合があります。Bootstrap4で利用できるform(フォーム)の使い方をご紹介します。一部追加されたクラスなどありますが、formの基本的な使い方はbootstrap3とほぼ同じです。基本的なフォーム部品の使い方フォームを利用する場合の基本的な使い方としては、フォーム部品(input、textarea、select)にform-controlクラスを追加し、外側をform-groupクラスをつけたdivタグで囲む形になります。ラベルやフォーム部品をグルーピングする外側のdivタグで利用します。余白などの見た目を整えてくれます。フォーム部品に設定します。input、textarea、selectで利用します。フォーム部品の大きさやレイアウトを整えてくれます。input要素のtypeがcheckboxやradioの場合は、form-controlの代わりにform-check-inputを利用します。ブートストラップの導入方法と基本を徹底解説!labelにあるcol-form-labelってなんでしょうか?必要なんですか?ラベルの文字のレイアウトを少し調整してくれます。必須ではありませんが、あった方が良いでしょう。form-inlineフォーム部品を全て横並びにする場合は、form要素にform-inlineクラスを追加します(form要素にdisplay:flexがかかり、中の子要素がフレックスアイテムになります。mb-2">ログイン</button></form>■(参考)form-inlineクラス(form要素にdisplay:flexがかかり、中の子要素がフレックスアイテムになります。btn-primary">登録する</button></form>チェックボックスとラジオボタンここでは、チェックボックスとラジオボタンの使用例をご紹介します。input要素のtypeがcheckboxやradioの場合は、form-controlの代わりにform-check-inputを利用します。btn-primary">登録する</button></form>form-checkクラスとform-check-labelクラスについてform-checkクラスとform-check-labelクラスも、レイアウトを微調整するために用意されているBootstrap4のクラスです。必要に応じて組み合わせて使いましょう。btn-primary">登録する</button></form>■参考)form-check-inlineクラスのCSS。display:flex-inlineが設定されます。ここでは割愛しますが、このほかにも色々な使い方があります。詳しくは下記の公式サイトをご覧ください。Bootstrap4.3まとめいかがでしたでしょうか。今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のフォーム(form)の使い方の基本をご紹介しました。使用頻度が低いためここでは割愛しましたが、ほかにもいくつかの使い方があります。公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。ブートストラップの導入方法と基本を徹底解説!今回は、以上になります。最後までご覧いただきありがとうございました。