Bootstrap - CSS Form


基本的なフォーム

 form タグの中に置くコントロールは、class="form-control" を指定する。label タグでコントロールを囲むと改行される。


<form>
 <div class="form-group">
  <label>
    列車名:
    <input type="text" class="form-control" id="text1" placeholder="列車名" size="50" />
  </label>
 </div>
 <div class="form-group">
  <label>
    発車:
    <input type="text" class="form-control" id="text2" placeholder="HH:MM" size="20" />
  </label>
 </div>
 <div class="form-group">
  <label>
    行先:
    <input type="text" class="form-control" id="text3" placeholder="行先" size="50" />
  </label>
 </div>
 <div class="form-group">
   <input type="button" id="button1" class="btn btn-default" value="検索" />
 </div>
</form>

1行フォーム

 form タグで、class="form-inline" を指定すると、改行が入らずに横方向へ伸びる。


<form class="form-inline">
<label>会員番号:
<input type="number" class="form-control" id="number" placeholder="数字のみ" size="20" />
</label>
<label style="margin-left:20px;">記憶する:
<input type="checkbox" class="form-control" id="memory" checked />
</label>
<button type="submit" class="btn btn-default" style="margin-left:20px;">送る</button>
</form>

ラベル:コントロール形式フォーム

 form タグで class="form-horizontal" を設定するとラベルとコントロールが1行に表示されるようになる。ラベルとコントロールの位置は Bootstrap の グリッド系の定義による。


<form class="form-horizontal">
 <div class="form-group">
  <label for="mail" class="col-sm-2 control-label">メールアドレス</label>
  <div class="col-sm-offset-1 col-sm-8">
   <input type="mail" id="mail" size="50" placeholder="your_id@hotmai.com" />
  </div>
 </div>
 <div class="form-group">
  <label for="password" class="col-sm-2 control-label">パスワード</label>
  <div class="col-sm-offset-1 col-sm-8">
    <input type="password" id="password" size="50" placeholder="*******" />
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-1 col-sm-2">
   <button type="button" id="button1" class="col-sm-offset-2 col-sm-10">送信</button>
  </div>
 </div>
</form>