Bootstrap3でFormを簡単に作る方法

Pocket

Bootstrap3を使ったフォームの作り方をまとめて紹介します。

フォームはWebにとって欠かせない要素の1つ。ブラウザ標準のスタイルがかかっているため、扱いづらい感じがしますが、Bootstrap3を使うことで簡単にレイアウトやバリデーションスタイルを当てることができます。

使えるスタイルがたくさんあるので、覚えるのも大変ですが、まずは基本的なところから始めていきましょう。

関連記事: Bootstrap3とPHPでメールフォームを作る方法

Bootstrap3 Formコンポーネントの使い方

基本的なFormタグの書き方

inputselecttextareaはブラウザの標準スタイルが適用されますが、.form-controを追加することでBootstrap3のスタイルをつけることができます。

また、フォームパーツは.form-groupで囲むことで自動的に最適な間隔で表示されるようになります。

Class名 概要
.form-group フォームパーツをまとめてグループ化
.form-control フォームパーツにBootstrap3のスタイルを追加
<form>
  <!-- .form-groupはパーツを最適な間隔で並べる -->
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" placeholder="Name">
  </div>
  <button type="submit" class="btn btn-default">送信</button>
</form>

デモページはこちら

Bootstrap3で使える2種類のフォームレイアウト

フォームの形は、768px(タブレットサイズ)以上で横並びになる.form-inline、labelとinputを水平に表示できる.form-horizontalの2種類があります。

どちらも、.form-groupを囲むようにタグを設置することで実装可能です。

Class名 概要
.form-inline > .form-group 横並びのレイアウト
.form-horizontal > .form-group 水平表示のレイアウト
<!-- .form-inline -->
<form class="form-inline">
  <div class="form-group">
    <input type="email" class="form-control" placeholder="メール" id="mail">
  </div>
  <div class="form-group">
    <input type="password" class="form-control" placeholder="パスワード" id="pass">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> パスワードを記憶する
    </label>
  </div>
  <button type="submit" class="btn btn-default">サインイン</button>
</form>

<!-- .form-horizontal -->
<form class="form-horizontal">
  <div class="form-group">
    <label for="mail2" class="col-sm-2 control-label">メール</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="mail2" placeholder="メール">
    </div>
  </div>
  <div class="form-group">
    <label for="pass2" class="col-sm-2 control-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pass2" placeholder="パスワード">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> パスワードを記憶する
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">サインイン</button>
    </div>
  </div>
</form>

デモページはこちら

Formの状態を変更

次はフォームの状態について。確定している内容をpタグで表示するform-control-static。フォームをクリックした際のスタイルを決めるfocus。フォーム操作を無効にするdisabled。読み取り専用として表示するreadonlyの4種類があります。

Class名 概要
.form-control-static フォーム内にテキストを表示
focus フォームをクリックしてアクティブにした際につけられるスタイル
disabled この属性をつけたフォームを無効にする
fieldset disabled 中に含まれるフォーム全体を無効にする
readonly この属性を付けたフォームを読み取り専用にする
<!-- .form-control-static -->
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">メール</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワード">
    </div>
  </div>
</form>

<!-- disabled -->
<input disabled type="text" id="input" class="form-control" placeholder="Disabled input">

<!-- disabled with fieldset -->
<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="input">Disabled input</label>
      <input type="text" id="input" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="select">Disabled select menu</label>
      <select id="select" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

<!-- readonly -->
<input class="form-control" type="text" placeholder="読み取り専用の内容" readonly>

デモページはこちら

Bootstrap3のフォームバリデーションの使い方

Bootstrap3のフォームのバリデーションは.form-groupにclassを追加するだけでOK。グループ内にあるラベルやヘルプテキストにもスタイルが適用されるようになっています。

また、glyphicon.form-control-feedbackclassをつけることで、チェックマークや注意マークなどのアイコンを追加することも可能。この時.has-feedbackが必要になるので注意。

Class名 概要
.form-group.has-success 緑色の成功カラーを表示
.form-group.has-warning 黄色の注意カラーを表示
.form-group.has-error 赤色の警告カラーを表示
.form-group.has-feedback フィードバックアイコンを追加する際に使用
.form-control-feedback フィードバックアイコンをつける
<!-- バリデーション -->
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功!</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="helpBlock2" class="help-block">ヘルプテキスト。フォームの説明文や注意書きを記述。</span>
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      成功チェックボックス
    </label>
  </div>
</div>

デモページはこちら

Bootstrap3で使えるフォームパーツサイズの変更方法

フォームパーツのサイズを変えたい場合は、lgsmから選ぶことができます。また、フォームグループ全体のサイズを変えることもできます。

Class名 概要
.form-control.input-lg パーツのサイズを大きく
.form-control.input-sm パーツのサイズを小さく
.form-group.form-group-lg グループ全体を大きく
.form-group.form-group-sm グループ全体を小さく
<!-- form-control -->
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="通常サイズ">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<!-- form-group -->
<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">大きいラベル</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="大きいサイズ">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">小さいラベル</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="小さいサイズ">
    </div>
  </div>
</form>

デモページはこちら

Formに関しては以上です。ステートとかバリデーションとかちょっと複雑なので分かりづらいですが、使うclassもそんなにないのでまとめて覚えておきましょう。

checkboxradioinput-groupなどフォームパーツに関しては次の記事にまとめています。

最後までご覧いただきありがとうございました 🙂