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

Tweet

Pocket

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

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

詳細は以下から。

Bootstrap3のFormパーツの使い方

Bootstrap3のFormパーツ一覧

Formの主なパーツは、input、textarea、select、radio、checkboxの５つ。
最初の３つには.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で横並びのインラインレイアウトを作ることができます。

<!-- 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フォームの左右どちらかに設置できます。

<!-- 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はサイズの変更が可能です。サイズはlgと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-groupでinputをカスタマイズできることだけ覚えておけばあとはなんとかなるはずです。

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

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