SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

入力フォーム

 ログイン画面やデータ登録/変更画面など、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">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>
入力フォームの例
入力フォームの例

 入力フォームを、横方向に配置したいときは、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コントロールを利用すると、次のようなスタイリッシュなユーザ検索画面ができます。

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

ユーザ検索画面の例
ユーザ検索画面の例

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

おわりに

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
業務Webアプリケーションエンジニアのための「Bootstrap」入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 阿佐 志保(アサ シホ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7954 2014/08/08 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング