フォームレイアウト

フォーム要素を使ったレイアウトパターン。

  • フォーム要素の多くは display: block、width: 100% が指定されています。縦に並べることで可読性を高めるだけでなく、レスポンシブ対応をしやすくしています。
  • 横並びにできるレイアウトパターンもありますが、576px 以上必要になります。
  • インラインでフォーム要素を並べる際、縦軸で中央に並ぶように .align-items-center を記述してください。

基本形

ラベルと要素の組み合わせは、.form-group で囲っていきます。

<form>
  <div class="form-group">
    <label class="form-control-label" for="formGroupExampleInput">Example</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example">
  </div>
  <div class="form-group">
    <label class="form-control-label" for="formGroupExampleInput2">Example 2</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Example 2">
  </div>
</form>

グルーピング

幾つかのフォームをグループにしてまとめたい場合、<fieldset class="form-group">で分類します。グループのキャプション（ヘッダー）は、<legend class="h3">と記述してください。

ユーザー情報
設定 
<form>
  <fieldset class="form-group">
    <legend class="h3">ユーザー情報</legend>
    <div class="form-group">
      <label class="form-control-label" for="formGroupExampleuserName">ユーザー名</label>
      <input type="text" class="form-control" id="formGroupExampleuserName" placeholder="Example">
    </div>
  </fieldset>
  <fieldset class="form-group">
    <legend class="h3">設定</legend>
    <div class="form-group">
      <label class="form-control-label" for="formGroupExampleuserLang">使用言語</label>
      <input type="text" class="form-control" id="formGroupExampleuserLang" placeholder="Example">
    </div>
  </fieldset>
</form>

グリッド

12 カラムグリッドを利用して、自由にレイアウトを作ることができます。


// 均等にしたい場合は .col と記述
<form>
  <div class="row">
    <div class="form-group col">
      <label>First Name</label>
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="form-group col">
      <label>Last Name</label>
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

// レイアウトをコントールしたい場合は、合計 12 になるようにクラス名に数字を入力
<form>
  <div class="row">
    <div class="form-group col-8">
      <label>First Name</label>
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="form-group col-4">
      <label>Last Name</label>
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

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

1 列にしたいチェックボックスを .form-check-inline で囲みます。

<div class="form-group align-items-center">
  <div class="form-check form-check-inline">
    <label class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="inlineCheckbox1" value="option1"><span class="custom-control-indicator"></span>オプション 1
    </label>
  </div>
  <div class="form-check form-check-inline">
    <label class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="inlineCheckbox2" value="option2"><span class="custom-control-indicator"></span>オプション 2
    </label>
  </div>
  <div class="form-check form-check-inline">
    <label class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="inlineCheckbox3" value="option3"><span class="custom-control-indicator"></span>オプション 3
    </label>
  </div>
</div>

インライン（ラベル非表示）

レイアウトの都合、もしくは見せ方の観点からラベルを必要としない場合があります。その場合、マークアップでは <label> を記述しますが、.sr-only を追加して非表示にします。この場合、視覚的には見えなくなりますが、音声ブラウザでは読み上げられます。

<form>
  <div class="form-row align-items-center">
    <div class="col">
      <label class="sr-only" for="inlineFormInput">ユーザー名</label>
      <input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInput" placeholder="ユーザー名">
    </div>
    <div class="col">
      <label class="sr-only" for="inlineFormInputGroup">パスワード</label>
      <input type="password" class="form-control" id="inlineFormInputGroup" placeholder="パスワード">
    </div>
    <div class="col">
      <div class="form-check mb-2 mb-sm-0">
        <label class="custom-control custom-checkbox" for="rememberMe">
          <input class="custom-control-input" type="checkbox" id="rememberMe" value="remember"><span class="custom-control-indicator"></span>Remember me
        </label>
      </div>
    </div>
    <div class="col">
      <button type="submit" class="btn btn-primary">送信</button>
    </div>
  </div>
</form>