フォームの書式:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回はフォームの書式です。
基本的なフォームの書式
質問の項目ごとにdivで囲み、class「form-group」を適用します。
inputやtextareaなどの要素にはclass「form-control」を適用します。
このクラスでwidth100%、枠線の角丸、内側の影、余白などを指定しています。
<form> <div class="form-group"> <label for="name1">お名前</label> <input type="text" class="form-control" id="name1"> </div> <div class="form-group"> <label for="mail1">メールアドレス</label> <input type="email" class="form-control" id="mail1"> </div> <div class="form-group"> <label for="ask1">お問い合わせ内容</label> <textarea rows="5" class="form-control" id="ask1"></textarea> </div> <button class="btn btn-primary">送信</button> </form>
ブラウザでの表示
インラインフォーム
フォームの各項目を横に並べるには、form要素にclsass「form-inline」を適用します。
ウィンドウ幅が768px以上の時は横に並べて配置、
767px以下の時はwidth100%で縦に並べて配置となります。
また、インラインフォームではテキストボックスの幅をsize属性で指定することが可能です。
幅の単位は「文字数」となります。
HTML
<h1 class="page-header">お問い合わせ</h1> <form class="form-inline text-right"> <div class="form-group"> <label class="sr-only" for="uID">ユーザー名</label> <input type="text" class="form-control" placeholder="ユーザー名" id="uID" size="14"> </div> <div class="form-group"> <label class="sr-only" for="pass">パスワード</label> <input type="password" class="form-control" placeholder="パスワード" id="pass" size="14"> </div> <button class="btn btn-primary">ログイン</button> </form>
ブラウザでの表示
サイズの指定
テキストボックスのサイズを変更できます。
大きくするときはclass「input-lg」、小さくするときはclass「input-sm」を追加します。
HTML
<form> <div class="form-group"> <label for="inp1">大</label> <input type="text" class="form-control input-lg" id="inp1"> </div> <div class="form-group"> <label for="inp2">標準</label> <input type="text" class="form-control" id="inp2"> </div> <div class="form-group"> <label for="inp3">小</label> <input type="text" class="form-control input-sm" id="inp3"> </div> </form>
ブラウザでの表示
色の指定
各項目グループのdiv要素に下記表の各色classを追加します。
class | 色 |
---|---|
has-success | 緑系 | has-warning | 黄系 |
has-error | 赤系 |
label要素にclass「control-label」を適用します。
HTML
<form> <div class="form-group has-success"> <label class="control-label" for="inp1">success</label> <input type="text" class="form-control" id="inp1"> </div> <div class="form-group has-warning"> <label class="control-label" for="inp2">warning</label> <input type="text" class="form-control" id="inp2"> </div> <div class="form-group has-error"> <label class="control-label" for="inp3">error</label> <input type="text" class="form-control" id="inp3"> </div> </form>
ブラウザでの表示
テキストボックスの補足の書式
p要素かspan要素にclass「help-block」を適用します。
HTML
<form> <div class="form-group"> <label for="name1">お名前</label> <input type="text" class="form-control" id="name1"> </div> <div class="form-group"> <label for="mail1">メールアドレス</label> <input type="email" class="form-control" id="mail1"> <p class="help-block">※半角文字で入力してください。</p> </div> <div class="form-group"> <label for="ask1">お問い合わせ内容</label> <textarea rows="5" class="form-control" id="ask1"></textarea> </div> <button class="btn btn-primary">送信</button> </form>
ブラウザでの表示
テキストボックスにアイコンを表示
入力内容のチェック結果を表示する場合に使います。
グループをくくるdiv要素にclass「has-feedback」、
アイコンを表示するspan要素にclass「form-control-feedback」を適用します。
HTML
<form> <div class="form-group has-success has-feedback"> <label class="control-label" for="uID">ユーザー名</label> <input type="text" class="form-control" id="uID"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label for="mail1">メールアドレス</label> <input type="email" class="form-control" id="mail1"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> <p class="help-block">※メールアドレスは半角文字で入力してください。</p> </div> <button class="btn btn-primary">送信</button> </form>
ブラウザでの表示
チェックボックスとラジオボタン
チェックボックスは、個々の選択肢をdiv要素で囲み、class「checkbox」を適用します。
ラジオボタンは、個々の選択肢をdiv要素で囲み、class「radio」を適用します。
また、これらのdiv要素にclass「disabled」を追加すると、マウスホバー時に選択不可マークを表示することも可能です。
HTML
<form> <div class="form-group"> <p><b>ご住所を選択してください</b></p> <div class="checkbox"><label><input type="checkbox">福岡県・大分県</label></div> <div class="checkbox"><label><input type="checkbox">佐賀県・山口県</label></div> <div class="checkbox"><label><input type="checkbox" disabled>それ以外の都道府県</label></div> </div> <div class="form-group"> <p><b>予約日を選択してください</b></p> <div class="radio"><label><input type="radio" name="iro">平日</label></div> <div class="radio"><label><input type="radio" name="iro">土曜日</label></div> <div class="radio"><label><input type="radio" name="iro">日曜日・祝日</label></div> </div> </form>
ブラウザでの表示
チェックボックスとラジオボタンを横に並べる
個々の選択肢をdiv要素で囲まずに、直接label要素にclass「checkbox-inline」や「radio-inline」を適用します。
HTML
<form> <div class="form-group"> <p><b>ご住所を選択してください</b></p> <label class="checkbox-inline"><input type="checkbox">福岡県・大分県</label> <label class="checkbox-inline"><input type="checkbox">佐賀県・山口県</label> <label class="checkbox-inline"><input type="checkbox">それ以外の都道府県</label> </div> <div class="form-group"> <p><b>予約日を選択してください</b></p> <label class="radio-inline"><input type="radio" name="iro">平日</label> <label class="radio-inline"><input type="radio" name="iro">土曜日</label> <label class="radio-inline"><input type="radio" name="iro">日曜日・祝日</label> </div> </form>
ブラウザでの表示
プルダウンメニューの書式
select要素にclass「form-control」を適用します。
また、プルダウンメニューのサイズを変更したい場合は、select要素にclass「input-lg」や「input-sm」を追加します。
HTML
<form> <div class="form-group"> <label for="fi1">納品ファイルの種類を選択してください</label> <select class="form-control" id="fi1"> <option>mp4</option> <option>avi</option> <option>wmv</option> </select> </div> </form>