【Bootstrap:5】フォーム

Bootstrap

基本のフォームコード

inputのクラス名にform-control、id名にexampleInputをつける。
input直下のspanタグにつくクラス名ehelp-blockは入力フォームのヘルプテキスト。

<form>
  <fieldset>
    <legend>フォームタイトル</legend>
    <div class="form-group">
      <label for="exampleInput">name</label>
      <input type="text" class="form-control" id="exampleInput" name="name" placeholder="例)川村公平">
      <span class="help-block">名前は名字、名前の順で。ペンネーム不可。</span>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> チェックボックス
      </label>
    </div>
    <button type="submit" class="btn btn-default">登録</button>
  </fieldset>
</form>

出力結果

フォームのラベルとインプットエリアを横並びにする

formタグのクラス名にform-horizontalをつけ、その中に入れる全てのlabelとinputタグを個々に<div class="form-group">で囲む。
また、label、inputタグのクラス名に"col-サイズ-数値のグリッドシステムのクラス名を付けておく。
この時、モバイルデバイスに考慮したレスポンシブレイアウトを考えてcol-sm-*

にしました。

<form class="form-horizontal">
  <fieldset>
    <legend>フォームタイトル(ラベルとフォームを横並び)</legend>
    <div class="form-group">
      <label class="col-sm-1" for="exampleInput">name</label>
  
      <div class="col-sm-11">
      	<input type="text" class="form-control" id="exampleInput" name="name" placeholder="例)川村公平">
      </div>
      
    </div>
    
    <div class="form-group">
      <label class="col-sm-1" for="exampleInput">e-mail</label>
      <div class="col-sm-11">
      	<input type="text" class="form-control" id="exampleInput" name="e-mail" placeholder="例)xxx@xxx.co.jp">
      </div>
      
    </div>
    
    <div class="form-group">
    	<div class="col-sm-offset-1 col-sm-11">
    		<button type="submit" class="btn btn-default text-center">登録</button>
    	</div>
    </div>
  </fieldset>
</form>

出力結果

インラインチェックボックス

チェックボックスのインライン化はlabelタグのクラス名をcheckbox-inlineを付け、
labelタグ内にinputタグを入れる。

<label  class="checkbox-inline">value1<input type="checkbox" id="inlineCheckbox1" value="option1"></label>
<label  class="checkbox-inline">value2<input type="checkbox" id="inlineCheckbox2" value="option2"></label>
<label  class="checkbox-inline">value3<input type="checkbox" id="inlineCheckbox3" value="option3"></label>

出力結果

ラベル、コントロールの外枠、ヘルプテキストのカラー指定。

チェックボックスのインライン化はlabelタグのクラス名をcheckbox-inlineを付け、
labelタグ内にinputタグを入れる。

<div class="form-group has-error">
      <label for="exampleInput" class="control-label">name</label>
      <span class="help-block">ヘルプテキスト</span>
      <input type="text" class="form-control" id="exampleInput" name="name" placeholder="例)川村公平">
      </div>
      
<div class="form-group has-success">
      <label for="exampleInput" class="control-label">name</label>
      <span class="help-block">ヘルプテキスト</span>
      <input type="text" class="form-control" id="exampleInput" name="name" placeholder="例)川村公平">
      </div>
      
<div class="form-group has-warning">
      <label for="exampleInput" class="control-label">name</label>
      <span class="help-block">ヘルプテキスト</span>
      <input type="text" class="form-control" id="exampleInput" name="name" placeholder="例)川村公平">
      </div>

出力結果

コントロールのサイズ

コントロールのサイズ変更はクラス名にinput-smかinput-lgを付ける。

<label class="col-sm-1" for="exampleInput">small</label>
<input type="text" class="form-control input-sm">
<select name="" id="" class="form-control"></select>

<label class="col-sm-1" for="exampleInput">標準</label>
<input type="text" class="form-control col-sm-12">
<select name="" id="" class="form-control"></select>

<label class="col-sm-1" for="exampleInput">large</label>
 <input type="text" class="form-control input-lg">
 <select name="" id="" class="form-control"></select>

出力結果