メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

フォーム(Forms) v4.0.0一部変更v4.2.1追加

フォームコントロールスタイル、レイアウトオプション、および様々なフォームを作成するためのカスタムコンポーネントの実例と使用ガイドライン。

※HTMLフォームについての解説

概要(Overview)

Bootstrapのフォームコントロールは、クラスを使用してRebootのフォームスタイルを拡張する。これらのクラスを使用してカスタマイズされた表示を明示すると、ブラウザとデバイス間で一貫したレンダリングが可能になる。

電子メールの確認、番号の選択などの新しい入力コントロールを利用するには、すべてのinputに適切な type 属性(電子メールアドレス用の email や数値情報用の number など)を必ず使用する。

必要なクラス、フォームレイアウトなどの解説など、Bootstrapフォームのスタイルを簡単に説明する。

見本
あなたのメールは他の誰とも共有しません。
設定例
<form>
	<div class="form-group">
		<label for="exampleInputEmail1">Eメールアドレス</label>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Eメールアドレス">
		<small class="text-muted">あなたのメールは他の誰とも共有しません。</small>
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">パスワード</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="パスワード">
	</div>
	<div class="form-group form-check">
		<input type="checkbox" class="form-check-input" id="exampleCheck1">
		<label class="form-check-label" for="exampleCheck1">記憶する</label>
	</div>
	<button type="submit" class="btn btn-primary">送信する</button>
</form>

 

フォームコントロール(Form controls)v4.0.0一部追加

※マークアップのないベースのフォームのスタイルはRebootに掲載。

<input>, <select>, <textarea> のようなテキスト形式のコントロールは、.form-control クラスでスタイルされる。一般的な外観、フォーカス状態、サイズなどのスタイルを含む。

<select> スタイルをさらにカスタマイズするには、カスタムフォームを必ず調べること。

見本
設定例
<form>
	<div class="form-group">
		<label for="exampleFormControlInput1">Eメールアドレス</label>
		<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
	</div>
	<div class="form-group">
		<label for="exampleSelect1exampleFormControlSelect1">選択の例</label>
		<select class="form-control" id="exampleFormControlSelect1">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
	<div class="form-group">
		<label for="exampleFormControlSelect2">複数選択の例</label>
		<select multiple class="form-control" id="exampleFormControlSelect2">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
	<div class="form-group">
		<label for="exampleFormControlTextarea1">テキストエリアの例</label>
		<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
	</div>
</form>

【設定】

  • form > {div.form-group > [label《ラベル》 + input.form-control《コントロール》]}《フォームグループ》・・・+ .btn《ボタン》
  • label[for="ID"] + input.form-control#IDtextarea.form-control#IDselect.form-control#ID)でラベルとコントロールを関連付ける

ファイル入力 v4.0.0新設

.form-control.form-control-file に入れ替える。

見本
Bootstrap3.xの設定例
<form>
	<div class="form-group">
		<label for="File">ファイル入力の例</label>
		<input type="file" id="File">
	</div>
</form>
Bootstrap4.xの設定例 緑背景が変更箇所
<form>
	<div class="form-group">
		<label for="File">ファイル入力の例</label>
		<input type="file" class="form-control-file" id="File">
	</div>
</form>

【設定】

  • input[type="file"] の場合は、.form-control の代わりに .form-control-file を追加

コントロールのサイズ(Sizing)v4.0.0名称変更

.form-control-lg.form-control-sm のようなクラスを使って高さを設定。

サイズの種類

●大きめ:.form-control-lg

●小さめ:.form-control-sm

※デフォルト(参考)

Bootstrap3.xの設定例 赤背景が変更箇所
大きめ<input type="text" class="form-control input-lg" placeholder="...">
<select class="form-control input-lg">...</select>
小さめ<input type="text" class="form-control input-sm" placeholder="...">
<select class="form-control input-sm">...</select>
Bootstrap4.xの設定例 緑背景が変更箇所
大きめ<input type="text" class="form-control form-control-lg" placeholder="...">
<select class="form-control form-control-lg">...</select>
小さめ<input type="text" class="form-control form-control-sm" placeholder="...">
<select class="form-control form-control-sm">...</select>

【設定】

  • .form-control.form-control-{size}(上記の「サイズの種類」から選択)を追加

【変更履歴】

  • 【v4.0.0】
    • .input-{size}.form-control-{size} に名称変更

読み取り専用コントロール(Readonly)

入力コントロールに readonly ブール値属性を追加して、入力値の変更を防止する。読み取り専用入力コントロールは、(無効状態の入力と同じように)軽めに表示されるが、カーソルはデフォルトのまま保持される(フォーカスも可能)。

見本
設定例
<input class="form-control" type="text" placeholder="ここは読み取り専用..." readonly>

【設定】

  • <input>readonly 属性を入れる

読み取り専用プレーンテキスト(Readonly plain text)v4.0.0設定変更

フォームの <input readonly> 要素をプレーンテキストのスタイルにしたい場合は、.form-control-plaintext クラスを使用して、デフォルトのフォームフィールドスタイルを削除し、正しいマージンとパディングを保持。

見本1(水平フォーム)
Bootstrap3.xの設定例 赤背景が変更箇所
<form class="form-horizontal">
	<div class="form-group">
		<label class="col-sm-2 control-label">Eメール</label>
		<div class="col-sm-10">
			<p class="form-control-static">email@example.com</p>
		</div>
	</div>
	<div class="form-group">
		<label for="Password" class="col-sm-2 control-label">パスワード</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="Password" placeholder="パスワード">
		</div>
	</div>
</form>
Bootstrap4.xの設定例 緑背景が変更箇所
<form>
	<div class="form-group row">
		<label for="staticEmail" class="col-sm-2 col-form-label">Eメール</label>
		<div class="col-sm-10">
			<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
		</div>
	</div>
	<div class="form-group row">
		<label for="Password" class="col-sm-2 col-form-label">パスワード</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="Password" placeholder="パスワード">
		</div>
	</div>
</form>
見本2(横並びフォーム)
設定例
<form class="form-inline">
	<div class="form-group mb-2">
		<label for="staticEmail2" class="sr-only">Eメール</label>
		<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
	</div>
	<div class="form-group mx-sm-3 mb-2">
		<label for="inputPassword2" class="sr-only">パスワード</label>
		<input type="password" class="form-control" id="inputPassword2" placeholder="パスワード">
	</div>
	<button type="submit" class="btn btn-primary mb-2">同一性を確認</button>
</form>

【設定】

  • input.form-control の代わりに input[readonly].form-control-plaintext を入れる

【変更履歴】

  • 【v4.0.0】
    • p.form-control-staticinput[readonly].form-control-plaintext

 

レンジ入力(Range Inputs)v4.1.0新設

.form-control-range を使用して、水平方向にスクロール可能な範囲の入力が設定可能。

見本
設定例
<form>
	<div class="form-group">
		<label for="formControlRange">レンジ入力の例</label>
		<input type="range" class="form-control-range" id="formControlRange">
	</div>
</form>

【設定】

  • input[type="range"] の場合は、.form-control の代わりに .form-control-range を追加

 

チェックボックスとラジオボタン(Checkboxes and radios)v4.0.0設定変更

ブラウザ標準のチェックボックスとラジオボタンは、HTML要素のレイアウトと動作を改善する両方の入力タイプの一連のクラスである .form-check の助けを受けて改良されている。チェックボックスはリスト内の1つまたは複数のオプションを選択するためのものであり、ラジオボタンは多くのオプションから1つを選択するためのもの。

無効のチェックボックスとラジオボタンもサポート済。無効になった属性は、入力の無効状態を示すためにテキストの色が明るめになる。

チェックボックスとラジオボタンはHTMLベースのフォーム検証機能をサポートし、簡潔でアクセスしやすいラベルを提供。そのため、<input><label> は親子要素ではなく、兄弟要素にする。少し冗長になるが <input><label> には、関連付けのため idfor を指定する必要がある。

縦積み(Default(stacked))

デフォルトでは、直接の兄弟であるチェックボックスとラジオボタンはいくつでも垂直方向に積み重ねられ、.form-check で適切に配置される。

見本

●チェックボックス

●ラジオボタン

Bootstrap3.xの設定例 赤背景が変更箇所
チェックボックス<div class="checkbox">
	<label>
		<input type="checkbox" value="">
		デフォルトのチェックボックス
	</label>
</div>
<div class="checkbox disabled">
	<label>
		<input type="checkbox" value="" disabled>
		無効のチェックボックス
	</label>
</div>
ラジオボタン<div class="radio">
	<label>
		<input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
		デフォルトのラジオボタン
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
		デフォルトのラジオボタン2
	</label>
</div>
<div class="radio disabled">
	<label>
		<input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
		無効のラジオボタン
	</label>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
チェックボックス<div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
	<label class="form-check-label" for="defaultCheck1">
		デフォルトのチェックボックス
	</label>
</div>
<div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
	<label class="form-check-label" for="defaultCheck2">
		無効のチェックボックス
	</label>
</div>
ラジオボタン<div class="form-check">
	<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
	<label class="form-check-label" for="exampleRadios1">
		デフォルトのラジオボタン
	</label>
</div>
<div class="form-check">
	<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
	<label class="form-check-label" for="exampleRadios2">
		デフォルトのラジオボタン2
	</label>
</div>
<div class="form-check">
	<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
	<label class="form-check-label" for="exampleRadios3">
		無効のラジオボタン
	</label>
</div>

【設定】

  • チェックボックス:div.form-check > [input.form-check-input[type="checkbox"] + label.form-check-label]
  • ラジオボタン:div.form-check > [input.form-check-input[type="radio"] + label.form-check-label]
  • 無効化したい場合は、input.form-check-inputdisabled 属性を入れる

【変更履歴】

  • 【v4.0.0】
    • div.form-check > label.form-check-label > input.form-check-inputdiv.form-check > [input.form-check-input + label.form-check-label]
    • div.checkbox(チェックボックス)、div.radio(ラジオボタン) ⇒ div.form-check
    • <label>label.form-check-label
    • <input>input.form-check-input
    • <label><input> は親子要素ではなく兄弟要素に
    • 無効の場合:div.form-check.disabled は不要に
    • ラベル部分にカーソルを合わせた際に、指カーソル(cursor: pointer;)や無効化カーソル(cursor: not-allowed;)に変化しなくなった

横並び(Inline)

.form-check-inline を任意の .form-check に追加することにより、同じ水平行にチェックボックスまたはラジオボタンをグループ化。

見本

●チェックボックス

●ラジオボタン

Bootstrap3.xの設定例 赤背景が変更箇所
チェックボックス<label class="checkbox-inline">
	<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
	<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
	<input type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3(無効)
</label>
ラジオボタン<label class="radio-inline">
	<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
	<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
	<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3(無効)
</label>
Bootstrap4.xの設定例 緑背景が変更箇所
チェックボックス<div class="form-check form-check-inline">
	<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
	<label class="form-check-label">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">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">3(無効)</label>
</div>
ラジオボタン<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
	<label class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
	<label class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
	<label class="form-check-label">3(無効)</label>
</div>

【設定】

  • チェックボックス:div.form-check.form-check-inline > label.form-check-label > input.form-check-input[type="checkbox"]
  • ラジオボタン:div.form-check.form-check-inline > label.form-check-label > input.form-check-input[type="radio"]

【変更履歴】

  • 【v4.0.0】
    • div.form-check-inline > label.form-check-label > input.form-check-inputdiv.form-check-inline > [input.form-check-input + label.form-check-label]
    • label.checkbox-inline(チェックボックス)、label.radio-inline(ラジオボタン) ⇒ div.form-check.form-check-inline > label.form-check-label
    • <input>input.form-check-input
    • 無効の場合:div.form-check-inline.disabled は不要に
    • ラベル部分にカーソルを合わせた際に、指カーソル(cursor: pointer;)や無効化カーソル(cursor: not-allowed;)に変化しなくなった

ラベル無し(Without labels)v4.0.0設定変更

ラベルテキストを持たない .form-check 内のinputに .position-static を追加する。支援技術には、何らかの形式のアクセス可能な名前を提供することを忘れないように(例:aria-label の使用など)。

見本
Bootstrap3.xの設定例 赤背景が変更箇所
チェックボックス<div class="checkbox">
	<label>
		<input type="checkbox" id="Checkbox" value="option1" aria-label="...">
	</label>
</div>
ラジオボタン<div class="radio">
	<label>
		<input type="radio" name="Radio" id="Radio1" value="option1" aria-label="...">
	</label>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
チェックボックス<div class="form-check">
	<input class="form-check-input position-static" type="checkbox" id="Checkbox" value="option1" aria-label="...">
</div>
ラジオボタン<div class="form-check">
	<input class="form-check-input position-static" type="radio" name="Radio" id="Radio1" value="option1" aria-label="...">
</div>

【設定】

  • div.form-check > input.form-check-input.position-static

【注意】

  • 横並びのチェックボックスとラジオボタンには非対応?

アクセシビリティの設定】

  • ラベルテキストの代替として <input>aria-label 属性(要素に対してラベル付けを行う)を入れる

【変更履歴】

  • 【v4.0.0】
    • input.form-check-input.position-static を追加することに
    • <label> が不要に

 

フォームレイアウト(Layout)

Bootstrapは display: blockwidth: 100% をほぼすべてのフォームコントロールに適用するので、フォームはデフォルトでは垂直に積み重ねられる。フォーム単位でこのレイアウトを変更するには、追加のクラスを使用する。

フォームグループ(Form groups)

.form-group クラスは、フォームに構造体を追加する最も簡単な方法。ラベル、コントロール、オプションのヘルプテキスト、フォーム検証メッセージの適切なグループ化を促す柔軟なクラスを提供。デフォルトでは margin-bottom のみ適用されるが、必要に応じて .form-inline で追加のスタイルが選択可能。<fieldset>, <div> や他のほぼすべての要素とともに使用可能。

見本
設定例
<form>
	<div class="form-group">
		<label for="Input">ラベルの例</label>
		<input type="text" class="form-control" id="Input" placeholder="入力コントロールの例">
	</div>
	<div class="form-group">
		<label for="Input2">もう1つのラベル</label>
		<input type="text" class="form-control" id="Input2" placeholder="もう1つの入力コントロール">
	</div>
</form>

【設定】

  • form > [div.form-group + div.form-group](fieldset.form-group でも可)

フォームグリッド(Form grid)

より複雑なフォームは、グリッドクラスを使用して構築可能。 複数の列、様々な幅、および追加の配置オプションが必要なフォームレイアウトに使用する。

見本
設定例
<form>
	<div class="row">
		<div class="col">
			<input type="text" class="form-control" placeholder="名字">
		</div>
		<div class="col">
			<input type="text" class="form-control" placeholder="名前">
		</div>
	</div>
</form>

フォーム行(Form row)v4.0.0新設

.row.form-row に入れ替えることも可能。これはデフォルトのグリッド行のバリエーションで、よりコンパクトでコンパクトなレイアウトのためにデフォルトのガターを上書き。

見本1
設定例
<form>
	<div class="form-row">
		<div class="col">
			<input type="text" class="form-control" placeholder="名字">
		</div>
		<div class="col">
			<input type="text" class="form-control" placeholder="名前">
		</div>
	</div>
</form>

より複雑なレイアウトもグリッドシステムで作成可能。

見本2
設定例
<form>
	<div class="form-row">
		<div class="form-group col-md-6">
			<label for="inputEmail4">Eメール</label>
			<input type="email" class="form-control" id="inputEmail4" placeholder="Eメール">
		</div>
		<div class="form-group col-md-6">
			<label for="inputPassword4">パスワード</label>
			<input type="password" class="form-control" id="inputPassword4" placeholder="パスワード">
		</div>
	</div>
	<div class="form-row">
		<div class="form-group col-md-2">
			<label for="inputZip">郵便番号</label>
			<input type="text" class="form-control" id="inputZip">
		</div>
		<div class="form-group col-md-4">
			<label for="inputState">都道府県</label>
			<select id="inputState" class="form-control">
				<option selected>選択...</option>
				<option>...</option>
			</select>
		</div>
		<div class="form-group col-md-6">
			<label for="inputCity">市町村</label>
			<input type="text" class="form-control" id="inputCity">
		</div>
	</div>
	<div class="form-group">
		<label for="inputAddress">住所</label>
		<input type="text" class="form-control" id="inputAddress" placeholder="1丁目2番3号">
	</div>
	<div class="form-group">
		<label for="inputAddress2">住所2</label>
		<input type="text" class="form-control" id="inputAddress2" placeholder="マンション名,部屋番号など">
	</div>
	<div class="form-group">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" id="gridCheck">
			<label class="form-check-label" for="gridCheck">
				保存する
			</label>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">サインイン</button>
</form>

【設定】

  • .row.form-row にすると、margin-leftmargin-right-15px(ビューポート小以上)⇒ -5px(すべてのビューポート)

水平フォーム(Horizontal form)v4.6.0設定変更

フォームグループに .row クラスを追加し、.col-*-* クラスを使ってラベルとコントロールの幅を指定することで、グリッドを使って水平フォームを作成。<label>.col-form-label を追加すると、関連するフォームコントロールの中央に垂直に配置される。

時には、マージンやパディングユーティリティを使用して、完璧に必要な配置を作成する必要がある。例えば、積み重なったのラジオボタンinputラベルの padding-top を削除して、テキストのベースラインを整列させるようにする。

見本
ラジオボタン
Bootstrap3.xの設定例 赤背景が変更箇所
<form class="form-horizontal">
	<div class="form-group">
		<label for="inputEmail" class="col-sm-2 control-label">Eメール</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="inputEmail" placeholder="Eメール">
		</div>
	</div>
	<div class="form-group">
		<label for="inputPassword" class="col-sm-2 control-label">パスワード</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword" placeholder="パスワード">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2">ラジオボタン</label>
		<div class="col-sm-10">
			<div class="radio">
				<label>
					<input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
					オプション1
				</label>
			</div>
			<div class="radio">
				<label>
					<input type="radio" name="gridRadios" id="gridRadios2" value="option2">
					オプション2
				</label>
			</div>
			<div class="radio disabled">
				<label>
					<input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
					オプション3(無効)
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> ココをチェック
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-primary">登録</button>
		</div>
	</div>
</form>
Bootstrap4.xの設定例 緑背景が変更箇所
<form>
	<div class="form-group row">
		<label for="inputEmail" class="col-sm-2 col-form-label">Eメール</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="inputEmail" placeholder="Eメール">
		</div>
	</div>
	<div class="form-group row">
		<label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword" placeholder="パスワード">
		</div>
	</div>
	<fieldset class="form-group row">
		<legend class="col-form-label col-sm-2 float-sm-left pt-0">ラジオボタン</legend>
		<div class="col-sm-10">
			<div class="form-check">
				<input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
				<label class="form-check-label" for="gridRadios1">
					オプション1
				</label>
			</div>
			<div class="form-check">
				<input type="radio" name="gridRadios" id="gridRadios2" value="option2">
				<label class="form-check-label" for="gridRadios2">
					オプション2
				</label>
			</div>
			<div class="form-check">
				<input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
				<label class="form-check-label" for="gridRadios3">
					オプション3(無効)
				</label>
			</div>
		</div>
	</fieldset>
	<div class="form-group row">
		<div class="offset-sm-2 col-sm-10">
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="gridCheck1">
				<label class="form-check-label" for="gridCheck1">
					 ココをチェック
				</label>
			</div>
		</div>
	</div>
	<div class="form-group row">
		<div class="offset-sm-2 col-sm-10">
			<button type="submit" class="btn btn-primary">登録</button>
		</div>
	</div>
</form>

【設定】

  • <form> > {div.form-group.row > label.col-form-label.col(-{breakpoint})-**[for="ID"]《ラベル》+ [div.col(-{breakpoint})-* > input#ID.form-control]《コントロール》}《フォームグループ》・・・ + {fieldset.form-group.row > legend.col(-{breakpoint})-**.col-form-label.pt-0 + [div.col(-{breakpoint})-* > div.form-check > input.form-check-input + label.form-check-label]《チェックボックス/ラジオボタン》・・・}《フィールドグループ》 + [div.form-group.row.justify-content-end > div.col(-{breakpoint})-* > .btn]《ボタン》
    ※ラベルとコントロールは .col(-{breakpoint})-*グリッド表記)で設定

【変更履歴】

  • 【v4.0.0】
    • form.form-horizontal > div.form-group > label.control-label.col-{breakpoint}-**[for="ID"]<form> > div.form-group.row > label.col-form-label.col(-{breakpoint})-**[for="ID"]
    • .form-group.row を追加する必要あり
    • .control-label.col-form-label
  • 【v4.6.0】
    • fieldset.form-group > div.row > legend.col-form-label.col-sm-2.pt-0fieldset.form-group.row > legend.col-form-label.col-sm-2.float-sm-left.pt-0

水平フォームのサイズ(Horizontal form label sizing)v4.0.0設定変更

<label><legend>.form-control-lg.form-control-sm のサイズに正しく合わせるには、.col-form-label-sm または .col-form-label-lg を使用。

グリッドベースのフォームレイアウトは、大と小の入力コントロールをサポート。

サイズの種類

●大きめのサイズ .col-form-label-lg, .form-control-lg

●小さめのサイズ .col-form-label-sm, .form-control-sm

※通常のサイズ(参考)

Bootstrap3.xの設定例 赤背景が変更箇所
大きめのサイズ<form class="form-horizontal">
	<div class="form-group form-group-lg">
		<label for="lgFormGroupInput" class="col-sm-2 control-label">Eメール</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="lgFormGroupInput" placeholder="you@example.com">
		</div>
	</div>
</form>
小さめのサイズ<form class="form-horizontal" >
	<div class="form-group form-group-sm">
		<label for="smFormGroupInput" class="col-sm-2 control-label">Eメール</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="smgFormGroupInput" placeholder="you@example.com">
		</div>
	</div>
</form>
Bootstrap4.xの設定例 緑背景が変更箇所
大きめのサイズ<form>
	<div class="form-group row">
		<label for="lgFormGroupInput" class="col-sm-2 col-form-label col-form-label-lg">Eメール</label>
		<div class="col-sm-10">
			<input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com">
		</div>
	</div>
</form>
小さめのサイズ<form>
	<div class="form-group row">
		<label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Eメール</label>
		<div class="col-sm-10">
			<input type="email" class="form-control form-control-sm" id="smFormGroupInput" placeholder="you@example.com">
		</div>
	</div>
</form>

【設定】

  • ラベル部分:.col-form-label.col-form-label-{size}(上記の「サイズの種類」から選択)を追加
  • コントロール部分:.form-control.form-control-{size}(上記の「サイズの種類」から選択)を追加

【変更履歴】

  • 【v4.0.0】
    • div.form-group.form-group-{size} > label.control-label + input.form-controldiv.form-group.row > label.col-form-label.col-form-label-{size} + input.form-control.form-control-{size}

コントロールの幅サイズ(Column sizing)v4.0.0設定変更

前の実例で示したように、グリッドシステムでは、.row.form-row の中に任意の数の .col を置くことが可能。利用可能な幅を均等に分割。また、残りの .col は、.col-7 のような特定の列クラスを使って残りの部分を均等に分割。

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<form>
	<div class="row">
		<div class="col-xs-3">
			<input type="text" class="form-control" placeholder="郵便番号">
		</div>
		<div class="col-xs-3">
			<input type="text" class="form-control" placeholder="都道府県">
		</div>
		<div class="col-xs-6">
			<input type="text" class="form-control" placeholder="市町村">
		</div>
	</div>
</form>
Bootstrap4.xの設定例 緑背景が変更箇所
<form>
	<div class="form-row">
		<div class="col">
			<input type="text" class="form-control" placeholder="郵便番号">
		</div>
		<div class="col">
			<input type="text" class="form-control" placeholder="都道府県">
		</div>
		<div class="col-7">
			<input type="text" class="form-control" placeholder="市町村">
		</div>
	</div>
</form>

【設定】

  • div.form-row > div.col(-{breakpoint}-*) > .form-control

【変更履歴】

  • 【v4.0.0】
    • すべてのビューポートで適用する場合:.col-xs-*.col-* または .col

自動サイズ設定(Auto-sizing)v4.0.0新設

次の実例では、Flexユーティリティを使用してコンテンツを垂直方向に中央揃え(※ .align-items-center を追加)し、.col.col-auto に変更して、カラムが必要なだけのスペースを占めるようにしている。別の言い方をすれば、列の幅はコンテンツ内容に基づいてサイズが決まる。

見本1
@
設定例
<form>
	<div class="form-row align-items-center">
		<div class="col-auto">
			<label class="sr-only" for="inlineFormInput">名前</label>
			<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="ブート太郎">
		</div>
		<div class="col-auto">
			<label class="sr-only" for="inlineFormInputGroup">ユーザー名</label>
			<div class="input-group mb-2">
				<div class="input-group-prepend">
					<div class="input-group-text">@</div>
				</div>
				<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="ユーザー名">
			</div>
		</div>
		<div class="col-auto">
			<div class="form-check mb-2">
				<input class="form-check-input" type="checkbox" id="autoSizingCheck">
				<label class="form-check-label" for="autoSizingCheck">
					記憶する
				</label>
			</div>
		</div>
		<div class="col-auto">
			<button type="submit" class="btn btn-primary mb-2">登録</button>
		</div>
	</div>
</form>

次に、サイズ別の列クラスを使用して、これを再度リミックスすることが可能。

見本2
@
設定例
<form>
	<div class="form-row align-items-center">
		<div class="col-sm-3">
			<label class="sr-only" for="inlineFormInputName">名前</label>
			<input type="text" class="form-control" id="inlineFormInputName" placeholder="ブート太郎">
		</div>
		<div class="col-sm-3 my-1">
			<label class="sr-only" for="inlineFormInputGroupUsername">ユーザー名</label>
			<div class="input-group">
				<div class="input-group-prepend">
					<div class="input-group-text">@</div>
				</div>
				<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="ユーザー名">
			</div>
		</div>
		<div class="col-auto my-1">
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
				<label class="form-check-label" for="autoSizingCheck2">
					記憶する
				</label>
			</div>
		</div>
		<div class="col-auto my-1">
			<button type="submit" class="btn btn-primary">登録</button>
		</div>
	</div>
</form>

もちろん、カスタムフォームコントロールもサポート済。

見本3
設定例
<form>
	<div class="form-row align-items-center">
		<div class="col-auto my-1">
			<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">好み</label>
			<select class="custom-select" id="inlineFormCustomSelect">
				<option selected>選択...</option>
				<option value="1">1:</option>
				<option value="2">2:</option>
				<option value="3">3:</option>
			</select>
		</div>
		<div class="col-auto my-1">
			<div class="custom-control custom-checkbox mr-sm-2">
				<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
				<label class="custom-control-label" for="customControlAutosizing">好みを記憶する</label>
			</div>
		</div>
		<div class="col-auto my-1">
			<button type="submit" class="btn btn-primary">登録</button>
		</div>
	</div>
</form>

横並びフォーム(Inline forms)

.form-inline クラスを使用して、一連のラベル、フォームコントロール、およびボタンを水平の1行に表示。横並びフォーム内のフォームコントロールは、デフォルトの状態とは少し異なる。

  • コントロールは、display: flex となり、HTMLの空白を畳ませたり、空白Flexboxのユーティリティで配置の制御が可能。
  • コントロールとインプットグループは、Bootstrapのデフォルトの width: 100% を再定義して width: auto になる。
  • コントロールは、モバイルデバイスの狭いビューポートに対応するために、幅576px以上のビューポートにのみ横並びで表示

個々のフォームコントロールの幅と配置を空白ユーティリティ(下記参照)を手動で指定する必要がある場合がある。最後にスクリーンリーダー以外の訪問者に対して .sr-only で非表示にする必要がある場合でも、常に各ラベルには <label> を含めること。

見本1
@
設定例
<form class="form-inline">
	<label class="sr-only" for="inlineFormInput">名前</label>
	<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInput" placeholder="ブート太郎">
	<label class="sr-only" for="inlineFormInputGroup">ユーザー名</label>
	<div class="input-group mb-2 mr-sm-2">
		<div class="input-group-prepend">
			<span class="input-group-text">@</span>
		</div>
		<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="ユーザー名">
	</div>
	<div class="form-check mb-2 mr-sm-2">
		<input class="form-check-input" type="checkbox" id="inlineFormCheck">
		<label class="form-check-label" for="inlineFormCheck">
			記憶する
		</label>
	</div>
	<button type="submit" class="btn btn-primary mb-2">登録</button>
</form>

カスタムフォームのコントロールと選択もサポート。

見本2
設定例
<form class="form-inline">
	<label class="my-1 mr-2" for="inlineFormCustomSelect">好み</label>
	<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelect">
		<option selected>選択...</option>
		<option value="1">1:</option>
		<option value="2">2:</option>
		<option value="3">3:</option>
	</select>
	<div class="custom-control custom-checkbox my-1 mr-sm-2">
		<input type="checkbox" class="custom-control-input" id="customControlInline">
		<label class="custom-control-label" for="customControlInline">好みを記憶する</label>
	</div>
	<button type="submit" class="btn btn-primary my-1">送信</button>

【設定】

  • <form>.form-inline を入れる
  • ラベルを隠す場合は、<label>.sr-only を入れる
  • ラベルやコントロールの間隔の設定には、別途空白ユーティリティクラスを追加すること(上記の事例では .my-1.mr-sm-2 を設定)

 

ヘルプテキスト(Help text)v4.0.0設定変更

フォーム内のブロックレベルのヘルプテキストは .form-text(以前はv3で .help-block と呼ばれていた)を使用して作成可能。インラインのヘルプテキストは、インラインHTML要素や .text-muted などのユーティリティクラスを使用して柔軟に実装可能。

下の見本のような入力やヘルプテキストの長い行のブロックヘルプテキストは、.form-text で簡単に作成可能。このクラスには display:block が組み込まれており、上の入力と簡単に間隔があくように上マージンが追加されている。

見本1(縦積みフォーム)
パスワードは、文字と数字を含めて8~20文字で、空白、特殊文字、絵文字を含むことはできません。
Bootstrap3.xの設定例 赤背景が変更箇所
<label for="inputHelpBlock">パスワード</label>
<input type="password" id="inputHelpBlock" class="form-control" aria-describedby="passwordHelpBlock">
<span id="passwordHelpBlock" class="help-block">パスワードは、文字と数字を含めて8~20文字で、空白、特殊文字、絵文字を含むことはできません。</span>
Bootstrap4.xの設定例 緑背景が変更箇所
<label for="inputHelpBlock">パスワード</label>
<input type="password" id="inputHelpBlock" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">パスワードは、文字と数字を含めて8~20文字で、空白、特殊文字、絵文字を含むことはできません。</small>

【設定】

  • ヘルプテキストを small.form-text.text-muted で囲む

アクセシビリティの設定】

  • <input> には aria-describedby 属性(解説を行うヘルプテキストのIDを指定)を入れる

【変更履歴】

  • 【v4.0.0】
    • span.help-blocksmall.form-text.text-muted

インラインテキストは、通常のインラインHTML要素(<small>, <span> など)で使用可能。

見本2(横並びフォーム)
長さは8-20文字でなければなりません
設定例
<form class="form-inline">
	<div class="form-group">
		<label for="inputPassword">パスワード</label>
		<input type="password" id="inputPassword" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
		<small id="passwordHelpInline" class="text-muted">
		 長さは8-20文字でなければなりません
		</small>
	</div>
</form>

【設定】

  • ヘルプテキストを small.text-muted または span.text-muted で囲む
  • ラベルやコントロールの間隔の設定には、別途空白ユーティリティクラスを追加すること(上記の事例では<input>.mx-sm-3 を設定)

アクセシビリティの設定】

  • <input> には aria-describedby 属性(解説を行うヘルプテキストのIDを指定)を入れる

 

無効のフォーム(Disabled forms)v4.2.1設定変更

input等のコントロールに disabled ブール値属性を追加すると、ユーザーのやりとりを防ぐことが可能。

見本1(個別のコントロールを無効)
設定例
<input type="text" class="form-control" id="disabledInput" placeholder="ここは無効..." disabled>

【設定】

  • 無効化したいコントロール(<input>, <select>, <textarea>)に disabled 属性を入れる

【変更履歴】

  • 【v4.0.0】
    • コントロールにカーソルを合わせた際に、無効化カーソル(cursor: not-allowed;)に変化しなくなった

<fieldset>disabled 属性を追加すると、その中のすべてのコントロールが無効になる。

見本2(フォーム全体を無効)
無効なフィールドセットの例
設定例
<form>
	<fieldset disabled>
		<legend>無効なフィールドセットの例</legend>
		<div class="form-group">
			<label >インプット</label>
			<input type="text" class="form-control" placeholder="入力できません">
		</div>
		<div class="form-group">
			<label>セレクトメニュー</label>
			<select class="form-control">
				<option>選択できません</option>
			</select>
		</div>
		<div class="form-group">
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="disabledCheck">
				<label class="form-check-label" for="disabledCheck">
					チェックできません
				</label>
			</div>
		</div>
		<button type="submit" class="btn btn-primary">登録不能</button>
	</fieldset>
</form>

【設定】

  • <fieldset>disabled 属性を入れる

【変更履歴】

  • 【v4.0.0】
    • コントロールにカーソルを合わせた際に、無効化カーソル(cursor: not-allowed;)に変化しなくなった
  • 【v4.2.1】
    • div.form-check の部分も div.form-group で囲む

 

入力検証(Validation)v4.0.0設定変更

サポートされているすべてのブラウザで利用可能なHTML5フォーム検証機能を使用して、貴重なフィードバックをユーザーに提供。ブラウザのデフォルト検証フィードバックから選択するか、組込済クラスとスターターJavaScriptを使用してカスタムメッセージを実装。

使い方(How it works)

Bootstrapでフォーム検証がどのように機能するかは次のとおり:

  • HTMLフォームの検証は、CSSの2つの疑似クラス、:invalid:valid を介して適用。required 属性を持つ <input>, <select>, <textarea> 要素に適用。
  • Bootstrapは、:invalid:valid スタイルを親の .was-validated クラスに適用する。通常は <form> に適用。それ以外の場合、値のない任意の必須フィールドは、ページのロード時に無効として表示。このようにして、それらをアクティブにするタイミングを選択することが可能(通常はフォームの送信が試行された後)。
  • フォームの外観をリセットするには(AJAXを使用した動的フォーム送信の場合など)、提出後に再び <form> から .was-validated クラスを削除する。
  • フォールバックとして、.is-invalid クラスと .is-valid クラスをサーバー側の検証用の疑似クラスの代わりに使用可能。.was-validated 親クラスは必要ない。
  • CSSの仕組みの制約から、カスタムJavaScriptの助けを借りずにDOMのフォームコントロールの前にある <label> にスタイルを適用することは不可。
  • すべての最新ブラウザは、フォームコントロールを検証する一連のJavaScriptメソッドであるThe constraint validation API(制約検証API)をサポート済。
  • フィードバックメッセージは、ブラウザのデフォルト(各ブラウザごとに異なり、CSS経由では変更不可)や追加のHTMLとCSSを使用したカスタムフィードバックスタイルを利用可能。
  • JavaScriptで setCustomValidity を使用してカスタムの有効性メッセージを提供可能。

これを念頭に置いて、カスタムフォームの検証スタイル、オプションのサーバーサイドクラス、およびブラウザのデフォルトに関する次の見本を検討すること。

【変更履歴】

  • 【v4.0.0】
    • 各検証状態の表示スタイルからHTML5フォーム検証機能を使用したスタイルに変更
    • .has-warning, .has-error, .has-success, .has-feedback, .form-control-feedback は廃止

カスタムスタイル(Custom styles)

カスタムBootstrapフォーム検証メッセージの場合は、<form>novalidate ブール値属性を追加する必要がある。これにより、ブラウザのデフォルトのフィードバックツールチップは無効になるが、JavaScriptのフォーム検証APIにはまだアクセスできない。次のフォームで送信すると、BootstrapのJavaScriptは送信ボタンを傍受し、フィードバックを中継する。送信しようとすると、フォームコントロールに :invalid:valid スタイルが適用される。

カスタムフィードバックスタイルでは、カスタムの色、枠線、フォーカススタイル、および背景アイコンを適用して、フィードバックをよりよく伝える。<select> の背景アイコンは .custom-select だけで利用でき、.form-control では利用不可。

見本 このまま送信ボタンを押して下さい
入力済!
入力済!
有効な郵便番号を入力してください
有効な都道府県を選択してください
有効な住所を入力してください
提出する前に同意する必要があります
設定例
HTML<form class="needs-validation" novalidate>
	<div class="form-row">
		<div class="col-md-6 mb-3">
			<label for="validationCustom01">名字</label>
			<input type="text" class="form-control" id="validationCustom01" value="ブート" required>
			<div class="valid-feedback">
				入力済!
			</div>
		</div>
		<div class="col-md-6 mb-3">
			<label for="validationCustom02">名前</label>
			<input type="text" class="form-control" id="validationCustom02" value="太郎" required>
			<div class="valid-feedback">
				入力済!
			</div>
		</div>
	</div>
	<div class="form-row">
		<div class="col-md-3 mb-3">
			<label for="validationCustom03">郵便番号</label>
			<input type="text" class="form-control" id="validationCustom03" required>
			<div class="invalid-feedback">
				有効な郵便番号を入力してください
			</div>
		</div>
		<div class="col-md-3 mb-3">
			<label for="validationCustom04">都道府県</label>
			<select class="custom-select" id="validationCustom04" required>
				<option selected disabled value="">選択...</option>
				<option>...</option>
			</select>
			<div class="invalid-feedback">
				有効な都道府県を選択してください
			</div>
		</div>
		<div class="col-md-6 mb-3">
			<label for="validationCustom5">住所</label>
			<input type="text" class="form-control" id="validationCustom05" required>
			<div class="invalid-feedback">
				有効な住所を入力してください
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
			<label class="form-check-label" for="invalidCheck">
				利用規約に同意する
			</label>
			<div class="invalid-feedback">
				提出する前に同意する必要があります
			</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">フォームを送信</button>
</form>
Javascript<script>
// 無効なフィールドがある場合にフォーム送信を無効にするスターターJavaScriptの実例
(function() {
	'use strict';

	window.addEventListener('load', function() {
		// カスタムブートストラップ検証スタイルを適用するすべてのフォームを取得
		var forms = document.getElementsByClassName('needs-validation');
		// ループして帰順を防ぐ
		var validation = Array.prototype.filter.call(forms, function(form) {
			form.addEventListener('submit', function(event) {
				if (form.checkValidity() === false) {
					event.preventDefault();
					event.stopPropagation();
				}
				form.classList.add('was-validated');
			}, false);
		});
	}, false);
})();
</script>

【設定】

  • ブラウザのデフォルトのフィードバックツールチップを無効にするため、<form>novalidate 属性を入れる
  • 検証したい <input> などのコントールに、required(入力必須)属性を入れる
  • 有効時のフィードバックの文章は div.valid-feedback、無効時のフィードバックの文章は div.invalid-feedback で囲む(両方設定しても可)

ブラウザのデフォルト(Browser defaults)

カスタム検証のフィードバックメッセージやフォームの動作を変更するJavaScriptの作成に興味があるのなら、ブラウザのデフォルトが使用可能。次のフォームに入力すると、使用しているブラウザとOSによって、多少異なるスタイルのフィードバックが表示される。

これらのフィードバックのスタイルはCSSでスタイル付けすることはできないが、JavaScriptを使用してフィードバックテキストをカスタマイズすることは可能。

見本 このまま送信ボタンを押して下さい
設定例
<form>
	<div class="form-row">
		<div class="col-md-6 mb-3">
			<label for="validationDefault01">名字</label>
			<input type="text" class="form-control" id="validationDefault01" value="ブート" required>
		</div>
		<div class="col-md-6 mb-3">
			<label for="validationDefault02">名前</label>
			<input type="text" class="form-control" id="validationDefault02" value="太郎" required>
		</div>
	</div>
	<div class="form-row">
		<div class="col-md-3 mb-3">
			<label for="validationDefault03">郵便番号</label>
			<input type="text" class="form-control" id="validationDefault03" required>
		</div>
		<div class="col-md-3 mb-3">
			<label for="validationDefault04">都道府県</label>
			<select class="custom-select" id="validationDefault04" required>
				<option selected disabled value="">選択...</option>
				<option>...</option>
			</select>
		</div>
		<div class="col-md-6 mb-3">
			<label for="validationDefault05">住所</label>
			<input type="text" class="form-control" id="validationDefault05" required>
		</div>
	</div>
	<div class="form-group">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
			<label class="form-check-label" for="invalidCheck2">
				利用規約に同意する
			</label>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">フォームを送信</button>
</form>

サーバー側の検証(Server side)v4.5.1設定変更

クライアント側の検証を使用することを推奨するが、サーバー側の検証が必要な場合は無効や有効なフォームフィールドを .is-invalid.is-valid で指定可能。.invalid-feedback もこれらのクラスでサポート済。

無効なフィールドの場合、aria-describeby を使用して、無効なフィードバック/エラーメッセージが関連するフォームフィールドに関連付けられていることを確認する(フィールドがすでに追加のフォームテキストを指している場合は、この属性で複数の id が参照可能なことに注意)。

見本 このまま送信ボタンを押して下さい
有効な郵便番号を入力してください
有効な都道府県を選択してください
有効な住所を入力してください
提出する前に同意する必要があります
設定例 緑背景がv4.5.1での変更箇所
<form>
	<div class="form-row">
		<div class="col-md-6 mb-3">
			<label for="validationServer01">名字</label>
			<input type="text" class="form-control is-valid" id="validationServer01" value="ブート" required>
		</div>
		<div class="col-md-6 mb-3">
			<label for="validationServer02">名前</label>
			<input type="text" class="form-control is-valid" id="validationServer02" value="太郎" required>
		</div>
	</div>
	<div class="form-row">
		<div class="col-md-3 mb-3">
			<label for="validationServer03">郵便番号</label>
			<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
			<div id="validationServer03Feedback" class="invalid-feedback">
				有効な郵便番号を入力してください
			</div>
		</div>
		<div class="col-md-3 mb-3">
			<label for="validationServer04">都道府県</label>
			<select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
				<option selected disabled value="">選択...</option>
				<option>...</option>
			</select>
			<div id="validationServer04Feedback" class="invalid-feedback">
				有効な都道府県を選択してください
			</div>
		</div>
		<div class="col-md-6 mb-3">
			<label for="validationServer05">住所</label>
			<input type="text" class="form-control is-invalid" id="validationServer05" placeholder="住所" aria-describedby="validationServer05Feedback" required>
			<div id="validationServer05Feedback" class="invalid-feedback">
				有効な住所を入力してください
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="form-check">
			<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
			<label class="form-check-label" for="invalidCheck3">
				利用規約に同意する
			</label>
			<div id="invalidCheck3Feedback" class="invalid-feedback">
				提出する前に同意する必要があります
			</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">フォームを送信</button>
</form>

【設定】

  • あらかじめ有効状態にする場合は、<input>, <select> などのコントールに、.is-valid を入れる
  • あらかじめ無効状態にする場合は、<input>, <select> などのコントールに、.is-invalid を入れる

アクセシビリティの設定】

  • input.is-invalid(または select.is-invalid)に aria-describedby 属性、div.invalid-feedbackid を追加して関連付ける

【変更履歴】

  • 【v4.5.1】
    • アクセシビリティの設定を追加

サポート済の要素(Supported elements)

検証スタイルは、次のフォームコントロールとコンポーネントで使用可能。

  • .form-control が入った <input><textarea>
  • .form-control.custom-select が入った <select>
  • .form-check
  • .custom-checkbox.custom-radio
  • .custom-file
見本 各ボタンを押して下さい
テキストエリアにメッセージを入力してください。
無効時のフィードバックテキストの例
無効時のフィードバックテキストの例
無効時のフィードバックカスタム選択メニューの例
無効時のフィードバックカスタムファイル選択の例
@
無効時のフィードバックインプットグループの例
無効時のフィードバックインプットグループの例
無効時のフィードバックインプットグループの例
設定例
<form class="was-validated">
	<div class="mb-3">
		<label for="validationTextarea">テキストエリア</label>
		<textarea class="form-control" id="validationTextarea" placeholder="必須のテキストエリアの例" required></textarea>
		<div class="invalid-feedback">
			テキストエリアにメッセージを入力してください。
		</div>
	</div>
	<div class="custom-control custom-checkbox mb-3">
		<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
		<label class="custom-control-label" for="customControlValidation1">このカスタムチェックボックスをチェック</label>
		<div class="invalid-feedback">無効時のフィードバックテキストの例</div>
	</div>

	<div class="custom-control custom-radio">
		<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
		<label class="custom-control-label" for="customControlValidation2">このカスタムラジオボタンを切替</label>
	</div>
	<div class="custom-control custom-radio mb-3">
		<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
		<label class="custom-control-label" for="customControlValidation3">またはこの他のカスタムラジオボタンを切替</label>
		<div class="invalid-feedback">無効時のフィードバックテキストの例</div>
	</div>

	<div class="form-group">
		<select class="custom-select" required>
			<option value="">この選択メニューを開く</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<div class="invalid-feedback">無効時のフィードバックカスタムファイル選択メニューの例</div>
	</div>

	<div class="custom-file">
		<input type="file" class="custom-file-input" id="validatedCustomFile" required>
		<label class="custom-file-label" for="validatedCustomFile" data-browse="参照">ファイル選択...</label>
		<div class="invalid-feedback">無効時のフィードバックカスタムファイル選択の例</div>
	</div>

	<div class="mb-3">
		<div class="input-group is-invalid">
			<div class="input-group-prepend">
				<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
			</div>
			<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" placeholder="必須のインプットグループの例" required>
		</div>
		<div class="invalid-feedback">無効時のフィードバックインプットグループの例</div>
	</div>

	<div class="mb-3">
		<div class="input-group is-invalid">
			<div class="input-group-prepend">
				<label class="input-group-text" for="validatedInputGroupSelect">オプション</label>
			</div>
			<select class="custom-select" id="validatedInputGroupSelect" required>
			<option value="">この選択メニューを開く</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			</select>
		</div>
		<div class="invalid-feedback">無効時のフィードバックインプットグループの例</div>
	</div>

	<div class="input-group is-invalid">
		<div class="custom-file">
			<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
			<label class="custom-file-label" for="validatedInputGroupCustomFile" data-browse="参照">ファイル選択...</label>
		</div>
		<div class="input-group-append">
			 <button class="btn btn-outline-secondary" type="button">ボタン</button>
		</div>
	</div>
		<div class="invalid-feedback">無効時のフィードバックインプットグループの例</div>
</form>

【設定】

  • 検証状態をあらかじめ表示しておくには、<form>.was-validated を入れる

ツールチップ(Tooltips)v4.0.0新設

フォームレイアウトで許可されている場合は、.{valid|invalid}-feedback クラスを .{valid|invalid}-tooltip クラスに置き換えると、検証フィードバックをスタイル付きツールチップで表示可能。ツールヒントの位置を決めるため親要素に position: relative が入っているか確認すること。下記の実例では、列クラスには既にこれがあるが、プロジェクトでは別の設定が必要な場合がある。

見本 このまま送信ボタンを押して下さい
入力済!
入力済!
有効な郵便番号を入力してください
有効な都道府県を選択してください
有効な住所を入力してください
設定例
<form class="needs-validation" novalidate>
	<div class="form-row">
		<div class="col-md-6 mb-3">
			<label for="validationTooltip01">名字</label>
			<input type="text" class="form-control" id="validationTooltip01" value="ブート" required>
			<div class="valid-tooltip">
				入力済!
			</div>
		</div>
		<div class="col-md-6 mb-3">
			<label for="validationTooltip02">名前</label>
			<input type="text" class="form-control" id="validationTooltip02" value="太郎" required>
			<div class="valid-tooltip">
				入力済!
			</div>
		</div>
	</div>
	<div class="form-row">
		<div class="col-md-3 mb-3">
			<label for="validationTooltip03">郵便番号</label>
			<input type="text" class="form-control" id="validationTooltip03" required>
			<div class="invalid-tooltip">
				有効な郵便番号を入力してください 
			</div>
		</div>
		<div class="col-md-3 mb-3">
			<label for="validationTooltip04">都道府県</label>
			<select class="custom-select" id="validationTooltip04" required>
				<option selected disabled value="">選択...</option>
				<option>...</option>
			</select>
			<div class="invalid-tooltip">
				有効な都道府県を選択してください
			</div>
		</div>
		<div class="col-md-6 mb-3">
			<label for="validationTooltip05">住所</label>
			<input type="text" class="form-control" id="validationTooltip05" required>
			<div class="invalid-tooltip">
				有効な住所を入力してください
			</div>
		</div>
	</div>
	<button class="btn btn-primary" type="submit">フォームを送信</button>
</form>

【設定】

  • 有効時のフィードバックの文章は div.valid-tooltip、無効時のフィードバックの文章は div.invalid-tooltip で囲む(両方設定しても可)
  • 親要素は position: relative である必要がある(上記の設定でツールチップが起動しない場合は、各.mb-3.position-relative を追加すること

検証状態のカスタマイズ(Customizing)v4.3.0新設

検証状態は $form-validation-states マップを使ってSassでカスタマイズ可能。Bootstrapの scss/_variables.scss ファイルにあるこのSassマップは、デフォルトの valid/invalid 検証状態を生成するためにループされて格納され、各状態の色とアイコンをカスタマイズするために入れ子状のマップが入っている。ブラウザでサポートされている他の状態は入ってないが、カスタムスタイルを使用している状態では、より複雑なフォームフィードバックが簡単に追加可能。

form-validation-state mixinを変更せずにこれらの値をカスタマイズすることは推奨しない。

Sass// `_variables.scss` からのマップ
// これを上書きしてSassを再コンパイルしてさまざまな状態を生成
$form-validation-states: map-merge(
	(
		"valid": (
			"color": $form-feedback-valid-color,
			"icon": $form-feedback-icon-valid
		),
		"invalid": (
			"color": $form-feedback-invalid-color,
			"icon": $form-feedback-icon-invalid
		)
	),
	$form-validation-states
);

// `_forms.scss` からループ
// 上記のSassマップへの変更は、このループを通じてコンパイル済CSSに反映
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

インプットグループの検証(Input group validation)v4.5.0新設、v4.6.0設定変更

検証を使用してインプットグループ内で角を丸める必要がある要素を検出するには、インプットグループに追加の .has-validation クラスが必要。

見本 右端の角に注目
@
ユーザー名を入力してください

.has-validation クラスがない場合(参考)

@
ユーザー名を入力してください
設定例 v4.6.0で緑背景を追加、赤背景を削除
<div class="input-group has-validation">
	<div class="input-group-prepend">
		<span class="input-group-text">@</span>
	</div>
	<input type="text" class="form-control rounded-right" required>
	<div class="invalid-feedback">
		ユーザー名を入力してください
	</div>
</div>

【設定】

  • .input-group.has-validation を追加

【変更履歴】

  • 【v4.6.0】
    • .input-group > input.form-control.rounded-{left|right}.input-group.has-validation > input.form-control
    • 小さめ、大きめのインプットグループの設定の場合の追加のCSSは不要に

 

カスタムフォーム(Custom forms)v4.0.0新設

カスタマイズやクロスブラウザの一貫性をさらに高めるには、完全にカスタムのフォーム要素を使用して、ブラウザのデフォルトを置き換える。セマンティックでアクセス可能なマークアップの上に構築されているため、デフォルトのフォームコントロールの代わりに使用可能。

チェックボックスとラジオボタン(Checkboxes and radios)

各チェックボックスとラジオの <input><label> ペアは、カスタムコントロールを作成するために <div> で囲む。これは、構造的にはデフォルトの .form-check と同じアプローチ。

Bootstrapでは、:checked のように、すべての <input> の状態に兄弟セレクタ(~)を使用して、カスタムフォームのインジケータに適切なスタイルを設定する。.custom-control-label クラスと組み合わせると、<input> の状態に基づいて各アイテムのテキストのスタイルを設定することも可能。

デフォルトの <input>opacity で非表示にし、.custom-control-label を使用して、::before::after で新しいカスタムフォームのインジケータを構築する。残念ながらCSSの content は、その要素では動作しないので、<input> だけでカスタムを構築することはできない。

チェック状態では、Open Iconicからbase64を組み込んだSVGアイコンを使用し、ブラウザやデバイス間でのスタイルと配置が最適なコントロールを提供する。

チェックボックス(Checkboxes)

見本1
設定例
<div class="custom-control custom-checkbox">
	<input type="checkbox" class="custom-control-input" id="customCheck1">
	<label class="custom-control-label" for="customCheck1">このカスタムチェックボックスをチェック</label>
</div>

【設定】

  • div.custom-control.custom-checkbox > [input.custom-control-input[type="checkbox"] + label.custom-control-label]

カスタムチェックボックスは、JavaScriptを手動で設定した場合には、:indeterminate 疑似クラスが使用可能(指定するためのHTML属性はない)。

見本2

jQueryを使用している場合は、次のようなもので十分。

設定例
JavaScript$(function () {
	$('.your-checkbox').prop('indeterminate', true)
})
HTML<div class="custom-control custom-checkbox">
	<input type="checkbox" class="custom-control-input your-checkbox" id="customCheck2">
	<label class="custom-control-label" for="customCheck2">このカスタムチェックボックスをチェック</label>
</div>

ラジオボタン(Radios)

見本
設定例
<div class="custom-control custom-radio">
	<input id="customRadio1" name="customRadio" type="radio" class="custom-control-input">
	<label class="custom-control-label" for="customRadio1">このカスタムラジオボタンを切替</label>
</div>
<div class="custom-control custom-radio">
	<input id="customRadio2" name="customRadio" type="radio" class="custom-control-input">
	<label class="custom-control-label" for="customRadio2">またはこの他のカスタムラジオボタンを切替</label>
</div>

【設定】

  • div.custom-control.custom-radio > [input.custom-control-input[type="radio"] + label.custom-control-label]

横並び(Inline)

見本
設定例
<div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
	<label class="custom-control-label" for="customRadioInline1">このカスタムラジオボタンを切替</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
	<label class="custom-control-label" for="customRadioInline2">またはこの他のカスタムラジオボタンを切替</label>
</div>

【設定】

  • カスタムチェックボックスとラジオボタンをさらに .custom-control-inline を追加

無効化(Disabled)

カスタムのチェックボックスやラジオを無効にすることも可能。disabled ブール型属性を <input> に追加すると、カスタムインジケータとラベルの説明が自動的にスタイルされる。

見本
設定例
<div class="custom-control custom-checkbox">
	<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
	<label class="custom-control-label" for="customCheckDisabled1">このカスタムチェックボックスをチェック</label>
</div>

<div class="custom-control custom-radio">
	<input id="customRadioDisabled" name="radioDisabled2" type="radio" class="custom-control-input" disabled>
	<label class="custom-control-label" for-"customRadioDisabled2">このカスタムラジオボタンを切替</label>
</div>

【設定】

  • 無効化したい <input>disabled 属性を入れる

切替スイッチ(Switches)v4.2.1新設

スイッチにはカスタムチェックボックスのマークアップがあるが、.custom-switch クラスを使用して切替スイッチを表示。スイッチは disabled 属性もサポート。

見本
設定例
<div class="custom-control custom-switch">
	<input type="checkbox" class="custom-control-input" id="customSwitch1">
	<label class="custom-control-label" for="customSwitch1">このスイッチ要素を切替</label>
</div>
<div class="custom-control custom-switch">
	<input type="checkbox" class="custom-control-input" id="customSwitch2" disabled>
	<label class="custom-control-label" for="customSwitch2">無効なスイッチ要素</label>
</div>

【設定】

  • カスタムチェックボックスの設定で .custom-checkbox の代わりに .custom-switch を追加

選択メニュー(Select menu)

カスタム <select> メニューはカスタムクラスのみを必要とし、.custom-select がカスタムスタイルに切り替える。カスタムスタイルは <select> の最初の外観に制限されており、ブラウザの制限により <option> を変更することは不可。

見本
設定例
<select class="custom-select">
	<option selected>この選択メニューを開く</option>
	<option value="1">その1</option>
	<option value="2">その2</option>
	<option value="3">その3</option>
</select>

【設定】

  • select.custom-select を入れる

選択メニューのサイズ

同様のサイズのテキスト入力とマッチするように、大きめと小さめのカスタム選択も選択可能。

サイズの種類

●大きめのカスタム選択メニュー

●小さめのカスタム選択メニュー

※デフォルト(参考)

設定例
大きめのカスタム選択メニュー<select class="custom-select custom-select-lg">
	<option selected>大きめの選択メニューを開く</option>
	<option value="1">その1</option>
	<option value="2">その2</option>
	<option value="3">その3</option>
</select>
小さめのカスタム選択メニュー<select class="custom-select custom-select-sm">
	<option selected>小さめの選択メニューを開く</option>
	<option value="1">その1</option>
	<option value="2">その2</option>
	<option value="3">その3</option>
</select>

【設定】

  • select.custom-select.custom-select-{size}(上記の「サイズの種類」から選択)を追加

複数選択メニュー

multiple 属性もサポート:

見本
設定例
<select class="custom-select" multiple>
	<option selected>この選択メニューを開く</option>
	<option value="1">その1</option>
	<option value="2">その2</option>
	<option value="3">その3</option>
</select>

表示範囲のサイズ

size 属性も同様にサポート:

見本
設定例
<select class="custom-select" size="3">
	<option selected>この選択メニューを開く</option>
	<option value="1">その1</option>
	<option value="2">その2</option>
	<option value="3">その3</option>
</select>

レンジ入力(Range)v4.1.0新設

.custom-range でカスタムの <input type="range"> コントロールを作成。トラック(背景)とつまみ(値)は、どのブラウザでも同じように表示される。IEとFirefoxでは進行状況を視覚的に示す手段としてつまみの左右からトラックを「埋め込む」ことをサポートしているため、現在のところサポートしていない。

見本
設定例
<label for="customRange1">レンジの実例</label>
<input type="range" class="custom-range" id="customRange1">

レンジ入力は、それぞれ minmax0100 の暗黙の値を持つ。min 属性と max 属性を使用するユーザーには新しい値が指定可能。

見本
設定例
<label for="customRange2">レンジの実例</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

デフォルトでは、レンジ入力は整数値で「スナップ」する。これを変更するには、step 値を指定する。次の実例では、step="0.5" を使用してステップ数を2倍にする。

見本
設定例
<label for="customRange3">レンジの実例</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

【設定】

  • <input type="range">.custom-range を入れる

ファイル選択(File browser)

ファイルの入力はこの項目の中で最も複雑で、機能的にプレースホルダの"ファイルを選択..."を選択したファイル名のテキストに変わるようにするには追加のJavaScriptが必要。

※高機能なものを求めるならfile-upload-with-previewを追加するのがいいかも。

見本 カスタムで日本語に設定済
設定例
<div class="custom-file">
	<input type="file" class="custom-file-input" id="customFile">
	<label class="custom-file-label" for="customFile">ファイル選択...</label>
</div>

opacity を使ってデフォルトファイル <input> を隠し、代わりに <label> をスタイル。ボタンは生成されて ::after で配置。最後に周囲のコンテンツの適切な間隔のために <input> に幅と高さを宣言。

【設定】

  • div.custom-file > [input.custom-file-input[type="file"] + label.custom-file-label]

文字列をSCSSで翻訳またはカスタマイズ(Translating or customizing the strings with SCSS)

:lang() 擬似クラスを使用して、ボタンの"Browse"テキストを他の言語に翻訳して上書き。関連するIETF言語タグとローカライズされた文字列を使用して $custom-file-text Sass変数にエントリを再定義したり追加するだけで、英語の文字列も同様にカスタマイズ可能。例えば、日本語の翻訳を追加する方法は次のとおり(日本語の言語コードは ja)。

設定例
Sassの場合$custom-file-text: (
	en: "Browse"
	es: "Elegir"
	ja: "参照"
);
CSSの場合.custom-file-input:lang(ja) ~ .custom-file-label::after {
	content: "参照";
}
.custom-file-input:lang(es) ~ .custom-file-label::after {
	content: "Elegir";
}

上記の設定でスペイン語 lang(es) に翻訳したカスタムファイル入力:

設定例
HTML<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

テキストを正しく表示するためには、文書(またはそのサブツリー)の言語を正しく設定する必要がある。これは、<html> 要素のlang 属性または Content-Language HTTPヘッダを使用して行うことが可能。

※つまり、

  • HTML5のdoctype<html lang="ja"> と設定
  • <head><meta http-equiv="content-language" content="ja"> を追加
  • 上記のように <input>lang="ja" を入れる

のいずれかに設定する必要がある。

文字列をHTMLで翻訳またはカスタマイズ(Translating or customizing the strings with HTML)v4.2.1新設

Bootstrapは、カスタム入力のラベル(実例はオランダ語)に追加できる data-browse 属性を使用して、HTMLの「参照」部分のテキストを翻訳する方法も提供。

見本
設定例
<div class="custom-file">
	<input type="file" class="custom-file-input" id="customFileLangHTML">
	<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label></div>

【設定】

  • <label>[data-browse] を入れる(日本語の場合は data-browse="参照"