エンジニアに捧げる「Bootstrapを使っての入力フォームの体系的な作成法」2

前回は、FormGroupを使って縦の入力フォームの作り方を紹介させていただきました。
今回は、グリッドレイアウトシステムを使ってFormGroupを横並びに配置する方法を紹介させていただきます。

グリッドレイアウトシステムは、rowcolumnを使って画面を分割しながらレイアウトが行うことができるCSSの機能の一つです。
Bootstrapでは、form-rowというクラスを使用することで、FormGroupを横並びに配置することが出来ます。

form-rowを使ってのform-groupの横並び配置

例としてform-rowを使用すると、
以下のように郵便番号、都道府県、市町村を入力するコントロールを横並びに配置することが出来ます。

<div class=”container”>
<div class=”row”>
<div class=”col”>
<form>
    <div class=”form-row“>
        <div class=”form-group col-4“>
            <label for=”city”>City</label>
            <input type=”text” class=”form-control” id=”city”>
        </div>
        <div class=”form-group col-4“>
            <label for=”email”>State</label>
            <input type=”text” class=”form-control” id=”state”>
        </div>
        <div class=”form-group col-4“>
             <label for=”zip”>Zip</label>
             <input type=”text” class=”form-control” id=”zip”>
         </div>
     </div>
</form>
</div>
</div>
</div>

上記それぞれの入力コントロールをform-group化し、form-rowによって
1つの列を3つに分割して配置しています。

このようにBootstrapではform-rowを使うことで、
form-groupをグリッドレイアウトシステムによる配置が行えます。

さらに例えば右側のform-groupを右寄せにしたいという要望があるかもしれません。
この時Bootstrapでは、form-groupにtext-rightクラスを追加するだけで右寄せにすることが出来ます。

<div class=”container”>
<div class=”row”>
<div class=”col”>
<form>
     <div class=”form-row“>
        <div class=”form-group col-4″>
            <label for=”city”>City</label>
            <input type=”text” class=”form-control” id=”city”>
        </div>
        <div class=”form-group col-4″>
            <label for=”email”>State</label>
            <input type=”text” class=”form-control” id=”state”>
        </div>
        <div class=”form-group col-4 text-right“>
             <label for=”zip”>Zip</label>
             <input type=”text” class=”form-control” id=”zip”>
             <input type=”submit” value=”送信”>
         </div>
     </div>
</form>
</div>
</div>
</div>

このようにBootstrapでは、
各レイアーに分けて入力コントロールの配置を考えることが出来るようになっており、
体系的にFormを作成することが出来ます。

以上、Bootstrapを使ってのFormの体系的な作成方法のご紹介になります。

木曜担当 yoshimoto

参照

Bootstrap from-row 公式解説
https://getbootstrap.com/docs/4.0/components/forms/#form-row




アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム