Bootstrap3のFormパーツの使い方とカスタマイズについてまとめ。
前回の記事でFormの基本的なところについて書いたので、ここではフォームで使えるパーツについてまとめていきます。Bootstrap3では単にフォームにスタイルを当てるだけでなく、インライン化したり、グループ化することでいろいろ便利な使い方ができます。
詳細は以下から。
Bootstrap3のFormパーツの使い方
Bootstrap3のFormパーツ一覧
Formの主なパーツは、input
、textarea
、select
、radio
、checkbox
の5つ。
最初の3つには.form-control
classをつけることで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は-inline
classで横並びのインラインレイアウトを作ることができます。
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はサイズの変更が可能です。サイズはlg
とsm
の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-group
でinput
をカスタマイズできることだけ覚えておけばあとはなんとかなるはずです。
フォームのバリデーションやdisable
などの属性については前回の記事を参考にしてください。
さいごまでご覧いただきありがとうございました 🙂