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

ホーム
アプリ関連ニュース
技術情報
エンジニアに捧げる「Bootstrapを使っての入力フォームの体系的な作成法」2

2018年5月10日
技術情報

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

グリッドレイアウトシステムは、rowやcolumnを使って画面を分割しながらレイアウトが行うことができる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によって
１つの列を３つに分割して配置しています。

このように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>