Bootstrapで業務Webアプリのカッコいい入力フォームを作る

業務Webアプリケーションエンジニアのための「Bootstrap」入門 第2回

入力フォーム

　ログイン画面やデータ登録／変更画面など、Webアプリではユーザからのデータ入力を受けつける画面が多くあります。ここでは、入力フォームを利用する方法について説明します。

基本の入力フォーム

　入力フォームを利用するには、div要素のclass属性に"form-group"を指定します。form-groupを指定できる<input>要素は、text／password／datetime／datetime-local／date／month／time／week／number／email／url／search／tel／colorがあります。

　また、登録確認画面のように、値を固定値で表示したいときはp属性のclass要素に"form-control-static"を指定します。

リスト8　基本の入力フォーム（form.htmlの抜粋）

<div class="form-group">
    <label for="mailaddr">メールアドレス</label>
    <p class="form-control-static" id="mailaddr">[e-mail]</p>
</div>
<div class="form-group">
    <label for="pass">パスワード</label>
    <input type="password" class="form-control" id="pass" placeholder="パスワードを入力してください">
</div>
<div class="form-group">
    <label for="memo">メモ</label>
    <textarea class="form-control" id="memo" rows="5" placeholder="メモを入力してください"></textarea>
</div>

入力フォームの例

　入力フォームを、横方向に配置したいときは、form要素のclass属性に"form-inline"、フォームを水平方向に配置したいときは、form要素のclass属性に"form-horizontal"を指定します。form-horizontalでフォームを並べるときはコントロールをどういうバランスで水平にレイアウトするかをBootstrapのグリッドシステムをつかって定義します。

なお、class属性にform-groupを指定するとグリッドシステムのclass="row"と同じ動きをします。

インラインフォームの例

チェックボックス／ラジオボタン／セレクトボックス

　あらかじめ用意された情報から選択するためのUIコントロールに、チェックボックス／ラジオボタン／セレクトボックスなどがあります。チェックボックスを使用するには、div要素のclass属性に"checkbox"、ラジオボタンを使用するには、div要素のclass属性に"radiobox"、セレクトボックスを使用するには、select要素のclass属性に"form-control"を指定します。

リスト9　チェックボックス／ラジオボタン／セレクトボックス（form.htmlの抜粋）

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    チェックボックス
  </label>
</div>
<div class="radio">
  <label><input type="radio" value="" checked>ラジオボタン</label>
</div>
<select multiple class="form-control">
  <option>選択1</option>
  <option>選択2</option>
  <option>選択3</option>
</select>

さまざまな入力フォームの例

枠の色

　入力フォームを目立たせるため、枠の色をつけることができます。div要素に枠の色をclass属性で指定します。指定できる色は次のとおりです。

枠の色

用途	class属性の指定	色
成功	has-success	緑
警告	has-warning	オレンジ
エラー	has-error	赤

　入力フィールドにアイコンを設定することができます。アイコンを設定するには、div要素のclass属性に"has-feedback"を指定します。さらに、アイコンのspan要素のclass属性に"form-control-feedback"を指定します。

リスト10　入力ボックスの枠の色（form.htmlの抜粋）

<div class="form-group has-success">
  ～中略～
</div>
<div class="form-group has-warning">
  ～中略～
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="error">エラー</label>
  <input type="text" class="form-control" id="error">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

入力フォーム枠色の例

サイズ

　入力フォームのサイズを指定するには、class属性にフォームサイズを指定します。指定できるサイズは次のとおりです。

入力フォームのサイズ

サイズ	class属性の指定
大きい	input-lg
デフォルト	なし
小さい	input-sm

リスト11　入力フォームのサイズ指定（form.htmlの抜粋）

<input class="form-control input-lg" type="text" placeholder="大きいサイズ">
<input class="form-control" type="text" placeholder="普通サイズ">
<input class="form-control input-sm" type="text" placeholder="小さいサイズ">

入力フォームサイズの例

ヘルプテキスト

　入力ミスがないように注意書きを入れるためのヘルプテキストも使用できます。ヘルプテキストはspan要素のclass属性に"help-block"を指定します。

リスト12　入力フォームのサイズ指定（form.htmlの抜粋）

<div class="form-group">
    <label class="control-label" for="passhelp">パスワード</label>
    <input type="password" class="form-control" id="passhelp">
    <span class="help-block">パスワードは最低6文字以上を設定してください</span>
</div>

ヘルプテキストの例

実用例（ユーザの検索画面）

　今回の記事で紹介した入力フォームやボタンなどのBootstrapのUIコントロールを利用すると、次のようなスタイリッシュなユーザ検索画面ができます。

　ソースコードは以下のサイトで公開されていますので、参考にしてみてください。

• Viewing snippet Panel table with filters (per column) | Bootsnipp.com

ユーザ検索画面の例

　一からすべてデザインしようとすると大変ですが、BootstrapのCSSをもとにUI部品を組み合わせると手軽に、Webアプリケーションの画面が作成できるのがお分かりいただけたかと思います。

おわりに

　今回の記事では、作成したレイアウトにフォームやボタンなどのUI部品を配置する手順を説明しました。次回は、データを表示するための見栄えの良いテーブルや、アラートなどをご紹介します。