フォーム（Forms） v4.0.0一部変更v4.2.1追加

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

• HTML フォームガイド（MDN）

概要（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>

ファイル入力 v4.0.0新設

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

見本

<form>
	<div class="form-group">
		<label for="File">ファイル入力の例</label>
		<input type="file" id="File">
	</div>
</form>

コピー<form>
	<div class="form-group">
		<label for="File">ファイル入力の例</label>
		<input type="file" class="form-control-file" id="File">
	</div>
</form>

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

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

サイズの種類

大きめ<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>

大きめコピー<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>

読み取り専用コントロール（Readonly）

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

見本

設定例

コピー<input class="form-control" type="text" placeholder="ここは読み取り専用..." readonly>

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

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

見本1（水平フォーム）

<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>

コピー<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>

レンジ入力（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>

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

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

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

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

縦積み（Default(stacked)）

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

見本

チェックボックス<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>

チェックボックスコピー<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>

横並び（Inline）

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

見本

チェックボックス<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>

チェックボックスコピー<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>

ラベル無し（Without labels）v4.0.0設定変更

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

見本

チェックボックス<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>

チェックボックスコピー<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>

フォームレイアウト（Layout）

Bootstrapは display: block と width: 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 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>

水平フォーム（Horizontal form）v4.6.0設定変更

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

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

見本

<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>

コピー<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>

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

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

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

サイズの種類

大きめのサイズ<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>

大きめのサイズコピー<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>

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

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

見本

<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>

コピー<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>

自動サイズ設定（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>

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

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

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

見本1（縦積みフォーム）

<label for="inputHelpBlock">パスワード</label>
<input type="password" id="inputHelpBlock" class="form-control" aria-describedby="passwordHelpBlock">
<span id="passwordHelpBlock" class="help-block">パスワードは、文字と数字を含めて8～20文字で、空白、特殊文字、絵文字を含むことはできません。</span>

コピー<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>

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

見本2（横並びフォーム）

設定例

コピー<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>

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

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

見本1（個別のコントロールを無効）

設定例

コピー<input type="text" class="form-control" id="disabledInput" placeholder="ここは無効..." disabled>

<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>

入力検証（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 を使用してカスタムの有効性メッセージを提供可能。

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

カスタムスタイル（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>

ブラウザのデフォルト（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>

サポート済の要素（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">１</option>
			<option value="2">２</option>
			<option value="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">１</option>
			<option value="2">２</option>
			<option value="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>

ツールチップ（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>

検証状態のカスタマイズ（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 クラスが必要。

見本 右端の角に注目

設定例 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>

カスタムフォーム（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>

カスタムチェックボックスは、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>

横並び（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>

無効化（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>

切替スイッチ（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>

選択メニュー（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 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>

複数選択メニュー

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">

レンジ入力は、それぞれ min と max に 0 と 100 の暗黙の値を持つ。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">

ファイル選択（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> に幅と高さを宣言。

文字列を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>