入力フォーム
ログイン画面やデータ登録/変更画面など、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"を指定します。
<div class="form-group"> <label for="mailaddr">メールアドレス</label> <p class="form-control-static" id="mailaddr">asashiho@xxxx.mail.com</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>
![入力フォームの例](http://cz-cdn.shoeisha.jp/static/images/article/7954/7954_11.gif)
入力フォームを、横方向に配置したいときは、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"を指定します。
<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>
![さまざまな入力フォームの例](http://cz-cdn.shoeisha.jp/static/images/article/7954/7954_13.gif)
枠の色
入力フォームを目立たせるため、枠の色をつけることができます。div要素に枠の色をclass属性で指定します。指定できる色は次のとおりです。
用途 | class属性の指定 | 色 |
---|---|---|
成功 | has-success | 緑 |
警告 | has-warning | オレンジ |
エラー | has-error | 赤 |
入力フィールドにアイコンを設定することができます。アイコンを設定するには、div要素のclass属性に"has-feedback"を指定します。さらに、アイコンのspan要素のclass属性に"form-control-feedback"を指定します。
<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>
![入力フォーム枠色の例](http://cz-cdn.shoeisha.jp/static/images/article/7954/7954_14.gif)
サイズ
入力フォームのサイズを指定するには、class属性にフォームサイズを指定します。指定できるサイズは次のとおりです。
サイズ | class属性の指定 |
---|---|
大きい | input-lg |
デフォルト | なし |
小さい | input-sm |
<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="小さいサイズ">
![入力フォームサイズの例](http://cz-cdn.shoeisha.jp/static/images/article/7954/7954_15.gif)
ヘルプテキスト
入力ミスがないように注意書きを入れるためのヘルプテキストも使用できます。ヘルプテキストはspan要素のclass属性に"help-block"を指定します。
<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>
![ヘルプテキストの例](http://cz-cdn.shoeisha.jp/static/images/article/7954/7954_16.gif)
実用例(ユーザの検索画面)
今回の記事で紹介した入力フォームやボタンなどのBootstrapのUIコントロールを利用すると、次のようなスタイリッシュなユーザ検索画面ができます。
ソースコードは以下のサイトで公開されていますので、参考にしてみてください。
一からすべてデザインしようとすると大変ですが、BootstrapのCSSをもとにUI部品を組み合わせると手軽に、Webアプリケーションの画面が作成できるのがお分かりいただけたかと思います。
おわりに
今回の記事では、作成したレイアウトにフォームやボタンなどのUI部品を配置する手順を説明しました。次回は、データを表示するための見栄えの良いテーブルや、アラートなどをご紹介します。