Bootstrap3のFormパーツの使い方とカスタマイズ方法

Pocket

Bootstrap3のFormパーツの使い方とカスタマイズについてまとめ。

前回の記事でFormの基本的なところについて書いたので、ここではフォームで使えるパーツについてまとめていきます。Bootstrap3では単にフォームにスタイルを当てるだけでなく、インライン化したり、グループ化することでいろいろ便利な使い方ができます。

詳細は以下から。

Bootstrap3のFormパーツの使い方

Bootstrap3のFormパーツ一覧

Formの主なパーツは、inputtextareaselectradiocheckboxの5つ。
最初の3つには.form-controlclassをつけることでBootstrap3のスタイルを当てることができます。

textareaの行の高さはrows属性に数値を入れることで調整できます。

<!-- input -->
<input type="text" class="form-control" placeholder="プレースホルダ">

<!-- textarea -->
<textarea class="form-control" rows="3" placeholder="プレースホルダ"></textarea>

<!-- select -->
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<!-- radio -->
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    ラジオボタンのラベル
  </label>
</div>

<!-- checkbox -->
<div class="checkbox">
  <label>
    <input type="checkbox" value="check1">
    チェックボックスのラベル
  </label>
</div>

デモページはこちら

RadioボタンとCheckboxをインライン化する

RadioボタンとCheckboxは-inlineclassで横並びのインラインレイアウトを作ることができます。

Class名 概要
.checkbox-inline checkboxのインライン化
.radio-inline radioのインライン化
<!-- checkboxのインライン化 -->
<label class="checkbox-inline">
  <input type="checkbox" id="check1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="check2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="check3" value="option3"> 3
</label>

<!-- radioのインライン化 -->
<label class="radio-inline">
  <input type="radio" name="radio-op" id="radio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="radio-op" id="radio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="radio-op" id="radio3" value="option3"> 3
</label>

デモページはこちら

InputGroupでInputフォームをカスタマイズする

inputフォームと組み合わせることで、inputを様々な形にカスタマイズできるのがInputGroupです。

テキストを追加できるのが、input-group-addon。ボタンを追加できるのが、input-group-btnとなっています。それぞれinputフォームの左右どちらかに設置できます。

Class名 概要
.input-group > .input-group-addon inputにテキストを追加
.input-group > .input-group-btn inputにボタンを追加
<!-- input-group-addon -->
<div class="input-group">
  <span class="input-group-addon" id="addon1">@</span>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-describedby="addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="ユーザー名" aria-describedby="addon2">
  <span class="input-group-addon" id="addon2">@example.com</span>
</div>

<label for="basic-url">URL</label>
<div class="input-group">
  <span class="input-group-addon" id="addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="addon3">
</div>

<!-- input-group-btn -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="検索ワード">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">検索</button>
  </span>
</div><!-- /input-group -->
<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
  <input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->

デモページはこちら

InputGroupのサイズを変更する方法

InputGroupはサイズの変更が可能です。サイズはlgsmの2つが用意されています。

Class名 概要
.input-group.input-group-lg 大きいサイズに変更
.input-group.input-group-sm 小さいサイズに変更
<!-- input-groupのサイズ -->
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="size1">@</span>
  <input type="text" class="form-control" placeholder="lg">
</div>
<br>
<div class="input-group">
  <span class="input-group-addon" id="size2">@</span>
  <input type="text" class="form-control" placeholder="デフォルト">
</div>
<br>
<div class="input-group input-group-sm">
  <span class="input-group-addon" id="size3">@</span>
  <input type="text" class="form-control" placeholder="sm">
</div>

Bootstrap3で使えるフォームパーツに関してはこれだけです。パーツの種類はいろいろありますが、.form-controlを付けること、.input-groupinputをカスタマイズできることだけ覚えておけばあとはなんとかなるはずです。

フォームのバリデーションやdisableなどの属性については前回の記事を参考にしてください。

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