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

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

2018年4月26日
技術情報

PHP研修も佳境に入り、只今研修中に作った勤怠システムをBootstrapを使って装飾しております。
Bootstrapを使っていると、自分にもデザイナーとしての素質があるのではないかと思えてしまうのですから不思議です。

作成した勤怠システムは、基本入力フォーム画面でほぼ出来ております。
これらの画面をBootstrapで作っていると、以下の２パターンを抑えておくことで、
入力フォームを体系的に作れることが分かりましたので、将来の私自身のためにまとめておきたいと思います。
（また私のようなデザインが「？」のエンジニアさんの為になればとも思います）

Bootstrapを使っての２パターンの入力フォーム作成法

1. form-groupによる入力フォームの作成

2. form-rowによる入力フォームの作成

今回はそのうちの一つであるform-groupによる縦方向の入力フォームの作成をご紹介させていただきます。

form-groupによる入力フォームの作成

この作成方法によるDOMの構造は、以下になります。

上記のようにテキストやコントロールをform-groupで囲むことで、順番に縦にそれらを配置してくれます。
またその際に適切なマージンをbottomに挿入してくれるため、全体的にキレイな縦方向の入力フォームを作ることが出来ます。

<div class=”container”>
<div class=”row”>
<div class=”col mt-3″>
<from action=”#”>
<div class=”form-group”>
<label> Email </label>
<input type=”email” class=”form-control”>
</div>
<div class=”form-group”>
<div class=”input-group align-items-center”>
<lable> パスワード </lable>
<input type=”password” class=”form-control ml-3″>
</div>
</div>
<div class=”form-group”>
<input class=”btn btn-primary” value=”送信”>
</div>
</from>
</div>
</div>
</div>

ですが上記のパスワードの例のように、
form-group内において、テキストやコントロール要素を横に並べて配置したい場合があります。
その際は、それらをinput-groupでグループ化します。

input-group/form-checkによるテキストとコントロールのグループ化

input-groupは、内部の子要素を横に並べて配置してくれるだけでなく、
input-group-prependを使用することで、
以下のようにボタンとテキストフィールドを一体化した新たな入力コントロールを作成することが出来ます。

<div class=”container”>
<div class=”row”>
<div class=”col mt-3″>
<from action=”#”>
<div class=”form-group”>
<label class=”text-info”>ラベルとテキストフィールドをグループ化</label>
<div class=”input-group align-items-center”>
<lable> 名前</lable>
<input type=”text” class=”form-control ml-3″>
</div>
</div>
<div class=”form-group”>
<label class=”text-info”>ボタンとテキストフィールドをグループ化 </label>
<div class=”input-group”>
<div class=”input-group-prepend”>
<span class=”input-group-text”>Default</span>
</div>
<input type=”text” class=”form-control”>
</div>
</div>
<div class=”form-group”>
<label class=”text-info”>チェックボックスとテキストフィールドをグループ化 </label>
<div class=”input-group”>
<div class=”input-group-prepend”>
<div class=”input-group-text”>
<input type=”checkbox”>
</div>
</div>
<input type=”text” class=”form-control” >
</div>
</from>
</div>
</div>
</div>

一方チェックボックスやラジオボックスを配置する際は、input-groupではなく、check-formを使用します。
使い方は直接bootstrapのサンプルを参照していただいたほうが分かりやすいと思いますので、
ここではリンクだけを貼らせて頂きます。
checkboxes & radios

これらinput-groupやform-checkはマージンを取らないので、form-groupに囲んでマージンを取るようにします。

またそうすることによって、順番に縦に配置していくことが出来ます。

ですが、form-groupを横並びに配置したいという要望も当然あるかと存じます。
そんな時はform-rowを使います。
form-rowを使うことで、グリッドレイアウトを使ってform-group単位で配置する事が簡単に出来ます。

次回は、そちらをご紹介させていただきます。

以上、form-groupを使って入力フォームの作成でした。

木曜担当 yoshimoto