フォームの書式：Bootstrapコードまとめ

投稿：2016年03月13日

Bootstrapのコードを少しずつまとめていきます。
今回はフォームの書式です。

基本的なフォームの書式

質問の項目ごとにdivで囲み、class「form-group」を適用します。

inputやtextareaなどの要素にはclass「form-control」を適用します。
このクラスでwidth100%、枠線の角丸、内側の影、余白などを指定しています。

<form>
  <div class="form-group">
    <label for="name1">お名前</label>
    <input type="text" class="form-control" id="name1">
  </div>
  <div class="form-group">
    <label for="mail1">メールアドレス</label>
    <input type="email" class="form-control" id="mail1">
  </div>
  <div class="form-group">
    <label for="ask1">お問い合わせ内容</label>
    <textarea rows="5" class="form-control" id="ask1"></textarea>
  </div>
  <button class="btn btn-primary">送信</button>
</form>

ブラウザでの表示

インラインフォーム

フォームの各項目を横に並べるには、form要素にclsass「form-inline」を適用します。

ウィンドウ幅が768px以上の時は横に並べて配置、
767px以下の時はwidth100%で縦に並べて配置となります。

また、インラインフォームではテキストボックスの幅をsize属性で指定することが可能です。
幅の単位は「文字数」となります。

HTML

<h1 class="page-header">お問い合わせ</h1>
<form class="form-inline text-right">
  <div class="form-group">
    <label class="sr-only" for="uID">ユーザー名</label>
    <input type="text" class="form-control" placeholder="ユーザー名" id="uID" size="14">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pass">パスワード</label>
    <input type="password" class="form-control" placeholder="パスワード" id="pass" size="14">
  </div>
  <button class="btn btn-primary">ログイン</button>
</form>

ブラウザでの表示

サイズの指定

テキストボックスのサイズを変更できます。
大きくするときはclass「input-lg」、小さくするときはclass「input-sm」を追加します。

HTML

<form>
  <div class="form-group">
    <label for="inp1">大</label>
    <input type="text" class="form-control input-lg" id="inp1">
  </div>
  <div class="form-group">
    <label for="inp2">標準</label>
    <input type="text" class="form-control" id="inp2">
  </div>
  <div class="form-group">
    <label for="inp3">小</label>
    <input type="text" class="form-control input-sm" id="inp3">
  </div>
</form>

ブラウザでの表示

色の指定

各項目グループのdiv要素に下記表の各色classを追加します。

class	色
has-success	緑系
has-warning	黄系
has-error	赤系

label要素にclass「control-label」を適用します。

HTML

<form>
  <div class="form-group has-success">
    <label class="control-label" for="inp1">success</label>
    <input type="text" class="form-control" id="inp1">
  </div>
  <div class="form-group has-warning">
    <label class="control-label" for="inp2">warning</label>
    <input type="text" class="form-control" id="inp2">
  </div>
  <div class="form-group has-error">
    <label class="control-label" for="inp3">error</label>
    <input type="text" class="form-control" id="inp3">
  </div>
</form>

ブラウザでの表示

テキストボックスの補足の書式

p要素かspan要素にclass「help-block」を適用します。

HTML

<form>
  <div class="form-group">
    <label for="name1">お名前</label>
    <input type="text" class="form-control" id="name1">
  </div>
  <div class="form-group">
    <label for="mail1">メールアドレス</label>
    <input type="email" class="form-control" id="mail1">
    <p class="help-block">※半角文字で入力してください。</p>
  </div>
  <div class="form-group">
    <label for="ask1">お問い合わせ内容</label>
    <textarea rows="5" class="form-control" id="ask1"></textarea>
  </div>
  <button class="btn btn-primary">送信</button>
</form>

ブラウザでの表示

テキストボックスにアイコンを表示

入力内容のチェック結果を表示する場合に使います。

グループをくくるdiv要素にclass「has-feedback」、
アイコンを表示するspan要素にclass「form-control-feedback」を適用します。

HTML

<form>
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="uID">ユーザー名</label>
    <input type="text" class="form-control" id="uID">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label for="mail1">メールアドレス</label>
    <input type="email" class="form-control" id="mail1">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    <p class="help-block">※メールアドレスは半角文字で入力してください。</p>
  </div>
  <button class="btn btn-primary">送信</button>
</form>

ブラウザでの表示

チェックボックスとラジオボタン

チェックボックスは、個々の選択肢をdiv要素で囲み、class「checkbox」を適用します。

ラジオボタンは、個々の選択肢をdiv要素で囲み、class「radio」を適用します。

また、これらのdiv要素にclass「disabled」を追加すると、マウスホバー時に選択不可マークを表示することも可能です。

HTML

<form>

  <div class="form-group">
    <p><b>ご住所を選択してください</b></p>
    <div class="checkbox"><label><input type="checkbox">福岡県・大分県</label></div>
    <div class="checkbox"><label><input type="checkbox">佐賀県・山口県</label></div>
    <div class="checkbox"><label><input type="checkbox" disabled>それ以外の都道府県</label></div>
  </div>

  <div class="form-group">
    <p><b>予約日を選択してください</b></p>
    <div class="radio"><label><input type="radio" name="iro">平日</label></div>
    <div class="radio"><label><input type="radio" name="iro">土曜日</label></div>
    <div class="radio"><label><input type="radio" name="iro">日曜日・祝日</label></div>
  </div>

</form>

ブラウザでの表示

チェックボックスとラジオボタンを横に並べる

個々の選択肢をdiv要素で囲まずに、直接label要素にclass「checkbox-inline」や「radio-inline」を適用します。

HTML

<form>

  <div class="form-group">
    <p><b>ご住所を選択してください</b></p>
    <label class="checkbox-inline"><input type="checkbox">福岡県・大分県</label>
    <label class="checkbox-inline"><input type="checkbox">佐賀県・山口県</label>
    <label class="checkbox-inline"><input type="checkbox">それ以外の都道府県</label>
  </div>

  <div class="form-group">
    <p><b>予約日を選択してください</b></p>
    <label class="radio-inline"><input type="radio" name="iro">平日</label>
    <label class="radio-inline"><input type="radio" name="iro">土曜日</label>
    <label class="radio-inline"><input type="radio" name="iro">日曜日・祝日</label>
  </div>

</form>

ブラウザでの表示

プルダウンメニューの書式

select要素にclass「form-control」を適用します。

また、プルダウンメニューのサイズを変更したい場合は、select要素にclass「input-lg」や「input-sm」を追加します。

HTML

<form>

　<div class="form-group">
    <label for="fi1">納品ファイルの種類を選択してください</label>
    <select class="form-control" id="fi1">
      <option>mp4</option>
      <option>avi</option>
      <option>wmv</option>
    </select>
　</div>

</form>

ブラウザでの表示

Twitter でシェア Facebook でシェア Google+ でシェア