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

フォーム・レイアウト(Layout) v5.0.0-alpha1設定変更

フォームレイアウト・オプションを使用して、横並びから水平、カスタムグリッドの実装までフォームに何らかの構造を与える。

目次

フォーム(Forms)

フォームフィールドのすべてのグループは <form> 要素の中に存在するべきである。Bootstrapは <form> 要素にデフォルトのスタイルを提供しないが、デフォルトで提供される強力なブラウザ機能がいくつかある。

  • ブラウザの <form> 要素で利用可能な属性の概要と完全なリストについてはMDN form docsで確認可能。
  • <form> 内の <button> はデフォルトで type="submit" なので、特定のものにして常に type を入れるようにすること。
  • <form>disabled 属性でフォーム内の全てのフォーム要素が無効可能。

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

 

ユーティリティ(Utilities)v5.0.0-alpha1設定変更

マージンユーティリティは、フォームに構造体を追加する最も簡単な方法。これらは、ラベル、コントロール、オプションのフォームテキスト、フォーム検証メッセージの基本的なグループを提供。Bootstrapでは margin-bottom ユーティリティにこだわり、一貫性のためにフォームを通して一つの方向を使うことを推奨。

<fieldset>, <div> や他のほぼすべての要素を使用して自由にフォームが作成可能。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="mb-3">
	<label for="Input" class="form-label">ラベルの例</label>
	<input type="text" class="form-control" id="Input" placeholder="入力プレースホルダーの例">
</div>
<div class="mb-3">
	<label for="Input2" class="form-label">もう1つのラベル</label>
	<input type="text" class="form-control" id="Input2" placeholder="もう1つの入力プレースホルダー">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<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>
【設定】
【変更履歴】
  • 【v5.0.0-alpha1】
    • div.form-groupdiv.mb-*.form-group は廃止)
    • <label>.form-label を入れる

 

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

より複雑なフォームは、グリッドクラスを使用して構築可能。複数の列、様々な幅、追加の配置オプションが必要なフォームレイアウトで使用。有効にするには $enable-grid-classes Sass変数が必要(デフォルトでは true(有効))。

見本
設定例
<div class="row">
	<div class="col">
		<input type="text" class="form-control" placeholder="名字" aria-label="名字">
	</div>
	<div class="col">
		<input type="text" class="form-control" placeholder="名前" aria-label="名前">
	</div>
</div>
【設定】
  • div.row > [div.col + div.col...]

 

ガターつき(Gutters)旧フォーム行、v5.0.0-alpha1設定変更

ガター修飾子クラスを追加することにより、ブロックの方向と同様にインラインでガター(グリッド列の間隔)の幅が制御可能。また、$enable-grid-classes Sass変数を有効にする必要あり(デフォルトでは true(有効))。

1. ラベルなしの設定

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="row g-3">
	<div class="col">
		<input type="text" class="form-control" placeholder="名字" aria-label="名字">
	</div>
	<div class="col">
		<input type="text" class="form-control" placeholder="名前" aria-label="名前">
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="form-row">
	<div class="col">
		<input type="text" class="form-control" placeholder="名字" aria-label="名字">
	</div>
	<div class="col">
		<input type="text" class="form-control" placeholder="名前" aria-label="名前">
	</div>
</div>

2. ラベルありの設定

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

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<form class="row g-3">
	<div class="col-md-6">
		<label for="inputEmail4" class="form-label">Eメール</label>
		<input type="email" class="form-control" id="inputEmail4">
	</div>
	<div class="col-md-6">
		<label for="inputPassword4" class="form-label">パスワード</label>
		<input type="password" class="form-control" id="inputPassword4">
	</div>
	<div class="col-md-2">
		<label for="inputZip" class="form-label">郵便番号</label>
		<input type="text" class="form-control" id="inputZip">
	</div>
	<div class="col-md-4">
		<label for="inputState" class="form-label">都道府県</label>
		<select id="inputState" class="form-select">
			<option selected>選択...</option>
			<option>...</option>
		</select>
	</div>
	<div class="col-md-6">
		<label for="inputCity" class="form-label">市町村</label>
		<input type="text" class="form-control" id="inputCity">
	</div>
	<div class="col-12">
		<label for="inputAddress" class="form-label">住所</label>
		<input type="text" class="form-control" id="inputAddress" placeholder="1丁目2番3号">
	</div>
	<div class="col-12">
		<label for="inputAddress2" class="form-label">住所2</label>
		<input type="text" class="form-control" id="inputAddress2" placeholder="マンション名,部屋番号など">
	</div>
	<div class="col-12">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" id="gridCheck">
			<label class="form-check-label" for="gridCheck">
				保存する
			</label>
		</div>
	</div>
	<div class="col-12">
		<button type="submit" class="btn btn-primary">サインイン</button>
	</div>
</form>
※Bootstrap4.xの設定例 赤背景が変更箇所
<form>
	<div class="form-row">
		<div class="form-group col-md-6">
			<label for="inputEmail4">Eメール</label>
			...
		</div>
		<div class="form-group col-md-6">
			<label for="inputPassword4">パスワード</label>
			...
		</div>
	</div>
	<div class="form-row">
		<div class="form-group col-md-2">
			<label for="inputZip">郵便番号</label>
			...
		</div>
		<div class="form-group col-md-4">
			<label for="inputState">都道府県</label>
			<select id="inputState" class="form-control">
				...
			</select>
		</div>
		<div class="form-group col-md-6">
			<label for="inputCity">市町村</label>
			...
		</div>
	</div>
	<div class="form-group">
		<label for="inputAddress">住所</label>
		...
	</div>
	<div class="form-group">
		<label for="inputAddress2">住所2</label>
		...
	</div>
	<div class="form-group">
		<div class="form-check">
			...
		</div>
	</div>
	<button type="submit" class="btn btn-primary">サインイン</button>
</form>
【設定】
  • ラベルなし:div.row.g-* > {[div.col(-{breakpoint}-*) > input.form-control[aria-label]] + [div.col(-{breakpoint}-*) > input.form-control[aria-label]]...}
  • ラベルあり:form.row.g-* > [div.col(-{breakpoint}-*) + div.col(-{breakpoint}-*)...]
アクセシビリティの設定】
  • コントロールをラベルなしで使用する場合は、ラベルテキストの代替として input.form-controlaria-label 属性(要素に対してラベル付けを行う)を入れる
    placeholder 属性はまだアクセシビリティな名前を提供する有効な方法として公式かつ一貫してサポートされていないため
【変更履歴】
  • 【v5.0.0-alpha1】
    • ラベルなし:div.form-rowdiv.row.g-*
    • ラベルあり:form > div.form-row > div.form-group.col(-{breakpoint}-*)form.row.g-* > div.col(-{breakpoint}-*)
    • .form-row, .form-group は廃止
    • <label>.form-label を入れる

 

水平フォーム(Horizontal form)v5.0.0-alpha1設定変更

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

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

見本
ラジオボタン
Bootstrap5.xの設定例 緑背景が変更箇所
<form>
	<div class="row mb-3">
		<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">
		</div>
	</div>
	<div class="row mb-3">
		<label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword">
		</div>
	</div>
	<fieldset class="row mb-3">
		<legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
		<div class="col-sm-10">
			<div class="form-check">
				<input 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 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 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="row mb-3">
		<div class="col-sm-10 offset-sm-2">
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="gridCheck1">
				<label class="form-check-label" for="gridCheck1">
					 ココをチェック
				</label>
			</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">登録</button>
</form>
※Bootstrap4.xの設定例 赤背景が変更箇所
<form>
	<div class="form-group row">
		...
	</div>
	<div class="form-group row">
		...
	</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">
				...
			</div>
			<div class="form-check">
				...
			<div class="form-check">
				...
			</div>
		</div>
	</fieldset>
	<div class="form-group row">
		<div class="col-sm-10 offset-sm-2">
			<div class="form-check">
				...
			</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">登録</button>
</form>
【設定】
  • <form> > {div.row.mb-* > label.col-form-label.col(-{breakpoint})-**[for="ID"]《ラベル》+ [div.col(-{breakpoint})-* > input#ID.form-control]《コントロール》}《フォームグループ》・・・ + {fieldset.mb-*.row > legend.col(-{breakpoint})-**.col-form-label.pt-0 + [div.col(-{breakpoint})-* > div.form-check > input.form-check-input + label.form-check-label]《チェックボックス/ラジオボタン》・・・}《フィールドグループ》 +.btn《ボタン》
    ※ラベルとコントロールは .col(-{breakpoint})-*グリッド表記)で設定
【変更履歴】
  • 【v5.0.0-alpha1】
    • div.form-group.rowdiv.row.mb-*.form-group は廃止)

水平フォームのサイズ(Horizontal form label sizing)

<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

※通常のサイズ(参考)

設定例
大きめのサイズ<div class="row mb-3">
	<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>
小さめのサイズ<div class="row mb-3">
	<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>
【設定】
  • ラベル部分:.col-form-label.col-form-label-{size}(上記の「サイズの種類」から選択)を追加
  • コントロール部分:.form-control.form-control-{size}(上記の「サイズの種類」から選択)を追加

 

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

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

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<form class="row g-3">
	<div class="col-sm">
		<input type="text" class="form-control" placeholder="郵便番号" aria-label="郵便番号">
	</div>
	<div class="col-sm">
		<input type="text" class="form-control" placeholder="都道府県" aria-label="都道府県">
	</div>
	<div class="col-sm-7">
		<input type="text" class="form-control" placeholder="市町村" aria-label="市町村">
	</div>
</form>
※Bootstrap4.xの設定例 赤背景が変更箇所
<form>
	<div class="form-row">
		<div class="col-sm">
			<input type="text" class="form-control" placeholder="郵便番号" aria-label="郵便番号">
		</div>
		<div class="col-sm">
			<input type="text" class="form-control" placeholder="都道府県" aria-label="都道府県">
		</div>
		<div class="col-sm-7">
			<input type="text" class="form-control" placeholder="市町村" aria-label="市町村">
		</div>
	</div>
</form>
【設定】
  • form.row.g-* > div.col(-{breakpoint}-*) > .form-control
【変更履歴】
  • 【v5.0.0-alpha1】
    • form > div.form-rowform.row.g-*.form-row は廃止)

 

自動サイズ設定(Auto-sizing)v5.0.0-alpha2設定変更

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

1. .col-auto を使用

見本
@
Bootstrap5.xの設定例 緑背景が変更箇所
<form class="row gy-2 gx-3 align-items-center">
	<div class="col-auto">
		<label class="visually-hidden" for="autoSizingInput">名前</label>
		<input type="text" class="form-control" id="autoSizingInput" placeholder="ブート太郎">
	</div>
	<div class="col-auto">
		<label class="visually-hidden" for="autoSizingInputGroup">ユーザー名</label>
		<div class="input-group">
			<div class="input-group-text">@</div>
			<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="ユーザー名">
		</div>
	</div>
	<div class="col-auto">
		<label class="visually-hidden" for="autoSizingSelect">好み</label>
		<select class="form-select" id="autoSizingSelect">
			<option selected>選択...</option>
			<option value="1">1:</option>
			<option value="2">2:</option>
			<option value="3">3:</option>
		</select>
	</div>
	<div class="col-auto">
		<div class="form-check">
			<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">登録</button>
	</div>
</form>
※Bootstrap4.xの設定例 赤背景が変更箇所
<form>
	<div class="form-row align-items-center">
		<div class="col-auto">
			<label class="sr-only" for="autoSizingInput">名前</label>
			<input type="text" class="form-control mb-2" id="autoSizingInput" placeholder="ブート太郎">
		</div>
		<div class="col-auto">
			<label class="sr-only" for="autoSizingInputGroup">ユーザー名</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="autoSizingInputGroup" placeholder="ユーザー名">
			</div>
		</div>
		<div class="col-auto">
			<div class="form-check mb-2">
				...
			</div>
		</div>
		<div class="col-auto">
			<button type="submit" class="btn btn-primary mb-2">登録</button>
		</div>
	</div>
</form>

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

2. .col-{breakpoint}-* と併用

見本
@
Bootstrap5.xの設定例 緑背景が変更箇所
<form class="row gx-3 gy-2 align-items-center">
	<div class="col-sm-3">
		<label class="visually-hidden" for="specificSizeInputName">名前</label>
		<input type="text" class="form-control" id="specificSizeInputName" placeholder="ブート太郎">
	</div>
	<div class="col-sm-3">
		<label class="visually-hidden" for="autoSizingInputGroupUsername">ユーザー名</label>
		<div class="input-group">
			<div class="input-group-text">@</div>
			<input type="text" class="form-control" id="autoSizingInputGroupUsername" placeholder="ユーザー名">
		</div>
	</div>
	<div class="col-sm-3">
		<label class="visually-hidden" for="specificSizeSelect">好み</label>
		<select class="form-select" id="specificSizeSelect">
			<option selected>選択...</option>
			<option value="1">1:</option>
			<option value="2">2:</option>
			<option value="3">3:</option>
		</select>
	</div>
	<div class="col-auto">
		<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">
		<button type="submit" class="btn btn-primary">登録</button>
	</div>
</form>
※Bootstrap4.xの設定例 赤背景が変更箇所
<form>
	<div class="form-row align-items-center">
		<div class="col-sm-3">
			<label class="sr-only" for="specificSizeInputName">名前</label>
			...
		</div>
		<div class="col-sm-3 my-1">
			<label class="sr-only" for="autoSizingInputGroupUsername">ユーザー名</label>
		<label class="sr-only" for="autoSizingInputGroup">ユーザー名</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="autoSizingInputGroup" placeholder="ユーザー名">
		</div>
		</div>
		<div class="col-sm-3 my-1">
			<label class="sr-only" for="specificSizeSelect">好み</label>
			<select class="custom-select" id="specificSizeSelect">
				...
			</select>
		</div>
		<div class="col-auto my-1">
			<div class="custom-control custom-checkbox mr-sm-2">
				<input class="custom-control-input" type="checkbox" id="autoSizingCheck2">
				<label class="custom-control-label" for="autoSizingCheck2">
					記憶する
				</label>
			</div>
		</div>
		<div class="col-auto my-1">
			<button type="submit" class="btn btn-primary">登録</button>
		</div>
	</div>
</form>
【設定】
  • form.row.gx-3.gy-2.align-items-center > [.col-auto + .col(-{breakpoint})-{auto|*}...]
【変更履歴】
  • 【v5.0.0-alpha1】
    • form > div.form-row.align-items-centerform.row.gx-3.gy-2.align-items-center
    • インプットグループのアドオン部分を囲む div.input-group-{prepend|append} は不要に
  • 【v5.0.0-alpha2】
    • label.sr-onlylabel.visually-hidden

 

横並びフォーム(Inline forms)v5.0.0-alpha2設定変更

.col-auto クラスを使用して、水平レイアウトを作成。ガター修飾子クラスを追加することにより、水平方向と垂直方向にガター(グリッド列の間隔)ができる。.align-items-center はフォーム要素を中央に揃え、.form-checkbox を適切に揃える。

見本
@
Bootstrap5.xの設定例 緑背景が変更箇所
<form class="row row-cols-lg-auto g-3 align-items-center">
	<div class="col-12">
		<label class="visually-hidden" for="inlineFormInputNameGroup">ユーザー名</label>
		<div class="input-group">
			<span class="input-group-text">@</span>
			<input type="text" class="form-control" id="inlineFormInputNameGroup" placeholder="ユーザー名">
		</div>
	</div>
	<div class="col-12">
		<label class="visually-hidden" for="inlineFormSelectPref">好み</label>
		<select class="form-select" id="inlineFormSelectPref">
			<option selected>選択...</option>
			<option value="1">1:</option>
			<option value="2">2:</option>
			<option value="3">3:</option>
		</select>
	</div>
	<div class="col-12">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" id="inlineFormCheck">
			<label class="form-check-label" for="inlineFormCheck">
				記憶する
			</label>
		</div>
	</div>
	<div class="col-12">
		<button type="submit" class="btn btn-primary">登録</button>
	</div>
</form>
※Bootstrap4.xの設定例 赤背景が変更箇所
<form class="form-inline">
	<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>
	<label class="sr-only" for="inlineFormSelectPref">好み</label>
	<select class="custom-select mb-2 mr-sm-2" id="inlineFormSelectPref">
		...
	</select>
	<div class="custom-control custom-checkbox mb-2 mr-sm-2">
		<input class="custom-control-input" type="checkbox" id="inlineFormCheck">
		<label class="custom-control-label" for="inlineFormCheck">
			記憶する
		</label>
	</div>
	<button type="submit" class="btn btn-primary mb-2">登録</button>
</form>
【設定】
  • form.row.row-cols-lg-auto.g-3.align-items-center > [div.col-12 + div.col-12...]
  • ラベルを隠す場合は、<label>.visually-hidden を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • form.form-inlineform.row.row-cols-md-auto.g-3.align-items-center > [div.col-12 + div.col-12...](.form-inline は廃止)
    • ラベルやコントロールの間隔の設定:ラベルやコントロールに空白ユーティリティクラスを追加 ⇒ <form>グリッドガタークラスを追加(上記の事例では .g-3 を設定)
    • インプットグループのアドオン部分を囲む div.input-group-{prepend|append} は不要に
  • 【v5.0.0-alpha2】
    • form.row.row-cols-md-autoform.row.row-cols-lg-auto
    • ラベルを隠す場合:label.sr-onlylabel.visually-hidden