Bootstrapの基本的な使い方 フォーム編
この記事では、Bootstrapでフォームにスタイルを設定する方法について紹介します。
See the Pen
Bootstrap Form Samples by Imai (@imai1)
on CodePen.
上記のCodePenのフォーム要素には送信先等の設定はありません。Bootstrapの機能紹介のためのガワだけしかありませんのでご安心ください。それでも気になる方はCodePenのHTML要素を確認していただくのが良いと思います。
- 基本的な使い方
- テキストとform-label, form-control, form-text
- セレクトボックスとform-select
- チェックボックス・ラジオボタンとform-check
- 参考文献
なお、Bootstrapを触ったことがないという方は、まずは次の記事を先に読んでいただくのが良いかと思います。
基本的な使い方
基本的な使い方は、通常通りformタグ配下にinput要素などを追加していき、個別の要素にスタイル用のクラスを設定するのみです。下記の例ではform-label form-control form-textなどがBootstrapのクラスです。
<form> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">メールアドレス</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text">メールアドレスはログインIDとしてのみ使用されます。許可なく第三者に公開されません。</div> </div> ... </form>
Bootstrapのフォーム用のクラスは、ボタンなどのコンポーネント用のものと同様に、主に要素のスタイルを制御するためのものです。フォームの機能はタグの元々の機能によって実現されます。
テキストとform-label, form-control, form-text
テキスト系要素の基本
labelタグにはform-labelクラスを付与します。inputタグやtextareaタグにはform-controlクラスを付与します。
<h3 class="h3">form-control</h3> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">メールアドレス</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">自由記入欄</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div>
labelとinputを改行したり、inputやtextareaを横幅いっぱいに広げたりなどはBootstrapのスタイルによるものです。Bootstrapのクラスを付与しない場合は次のようになりました。
form-text
パスワードの制約や秘密情報の注釈など、フォームに単なるテキストを追加する場合はform-textクラスを利用します。
<label for="exampleInputEmail1" class="form-label">メールアドレス</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text">メールアドレスはログインIDとしてのみ使用されます。許可なく第三者に公開されません。</div>
要素を一行に並べる場合
要素を一行に並べたい場合は、rowおよびcolのグリッド用クラスを利用します。form-labelのみcol-form-labelに変更が必要です。
<div class="row g-3 align-items-center"> <div class="col-auto"> <label for="inputPassword6" class="col-form-label">パスワード</label> </div> <div class="col-auto"> <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline"> </div> <div class="col-auto"> <span id="passwordHelpInline" class="form-text"> 8-20文字で入力してください </span> </div> </div>
なお、必ず一行に表示されるわけではなく、スクリーン幅によってレスポンシブに改行されます。
disabledおよびreadonlyについて
特に追加のクラスを設定する必要はありませんが、form-controlを設定するとdisabledやreadonly属性を付与した場合にもスタイルが設定されています。
ファイル選択
ファイル選択のinputタグもform-controlでスタイルを設定できます。
<label for="formFile" class="form-label">アップロードするファイル</label> <input class="form-control" type="file" id="formFile">
セレクトボックスとform-select
selectタグにはform-selectクラスを設定します。
<select class="form-select" aria-label="Default select example"> <option selected>選択してください</option> <option value="1">選択肢1</option> <option value="2">選択肢2</option> <option value="3">選択肢3</option> </select>
チェックボックス・ラジオボタンとform-check
基本的な使い方
チェックボックスにはform-check form-check-input form-check-labelを使用します。それぞれ全体を囲うdiv、input、labelに付与するクラスです。
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheck"> <label class="form-check-label" for="flexCheck"> チェックボックス </label> </div>
type="radio"でラジオボタンを作成する場合も同様です。
スイッチ
また、form-checkの要素にform-switchを付与すると、チェックボックスの見た目がスイッチ風になります。
<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"> <label class="form-check-label" for="flexSwitchCheckDefault">スイッチ</label> </div>
インライン配置
form-checkの要素にform-check-inlineを付与すると、同階層のチェックボックスが一行にインライン配置されます。
<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label> </div>
