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

フォームの概要(Overview)

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

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

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

 

概要(Overview)

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

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

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

見本
あなたのメールは他の誰とも共有しません。
設定例
<form>
	<div class="mb-3">
		<label for="exampleInputEmail1" class="form-label">Eメールアドレス</label>
		<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
		<div id="emailHelp" class="form-text">あなたのメールは他の誰とも共有しません。</div>
	</div>
	<div class="mb-3">
		<label for="exampleInputPassword1" class="form-label">パスワード</label>
		<input type="password" class="form-control" id="exampleInputPassword1">
	</div>
	<div class="mb-3 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 text)旧ヘルプテキスト、v5.0.0-alpha1設定変更

ブロックレベルやインラインレベルのフォームテキストは、.form-text を使用して作成可能。

1. 縦積みフォーム

インプットの下のフォームテキストは、.form-text でスタイル設定が可能。ブロックレベルの要素を使用する場合は、上のインプットから簡単に間隔が空くように上側にマージンが追加される。

見本
パスワードは、文字と数字を含めて8~20文字で、空白、特殊文字、絵文字を含むことはできません。
Bootstrap5.xの設定例 緑背景が変更箇所
<label for="inputHelpBlock" class="form-label">パスワード</label>
<input type="password" id="inputHelpBlock" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">パスワードは、文字と数字を含めて8~20文字で、空白、特殊文字、絵文字を含むことはできません。</div>
※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>

2. 横並びフォーム

インラインテキストでは、.form-text クラス以外に、通常のインラインHTML要素(<span> など)を使用。

見本
長さは8-20文字でなければなりません
Bootstrap5.xの設定例 緑背景が変更箇所
<form class="row g-3 align-items-center">
	<div class="col-auto">
		<label for="inputPassword6" class="col-form-label">パスワード</label>
	</div>
	<div class="col-auto">
		<input type="password" id="inputPassword" class="form-control" aria-describedby="passwordHelpInline">
	</div>
	<div class="col-auto">
		<span id="passwordHelpInline" class="form-text">長さは8-20文字でなければなりません</span>
	</div>
</form>
※Bootstrap4.xの設定例 赤背景が変更箇所
<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>
【設定】
  • 縦積みフォーム:フォームテキストを div.form-text で囲む
  • 横並びフォーム:フォームテキストを span.form-text で囲む
  • スタイルを変更したい場合は、scss/_variables.scss 内の $form-text-*** 変数の値を変更して再コンパイルする
アクセシビリティの設定】
  • <input> には aria-describedby 属性(解説を行うフォームテキストのIDを指定)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • 縦積みフォーム:small.form-text.text-muteddiv.form-text
    • 横並びフォーム:small.text-mutedspan.form-text
    • .form-text にあらかじめフォントサイズや色などが組み込まれたので、<small>.text-muted の設定は不要に

 

無効のフォーム(Disabled forms)

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

1. 個別のコントロールを無効

見本
設定例
<input class="form-control" id="disabledInput" type="text" placeholder="ここは無効..." disabled>
【設定】
  • 無効化したいコントロール(<input>, <select>, <textarea>)に disabled 属性を入れる

2. フォーム全体を無効

<fieldset>disabled 属性を追加すると、その中のすべてのコントロールが無効になる。ブラウザは、<fieldset disabled> 内のすべての本来のフォームコントロール(<input>, <select>, <button> 要素)を無効として扱い、キーボードとマウスの両方の操作を防止。

ただしフォームに <a class="btn btn-*">...</a> などのカスタムボタンのような要素も含まれている場合、これらには pointer-events:none のスタイルのみが与えられ、キーボードを使用してフォーカスと操作が可能。この場合、tabindex="-1" を追加してフォーカスを受け取らないようにしてこれらのコントロールを手動で変更し、aria-disabled="disabled" がその状態を支援技術に通知する必要がある。

見本
無効のフィールドセットの例
設定例
<form>
	<fieldset disabled>
		<legend>無効のフィールドセットの例</legend>
		<div class="mb-3">
			<label class="form-label">インプット</label>
			<input type="text" class="form-control" placeholder="入力できません">
		</div>
		<div class="mb-3">
			<label class="form-label">セレクトメニュー</label>
			<select class="form-select">
				<option>選択できません</option>
			</select>
		</div>
		<div class="mb-3">
			<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 属性を入れる

 

アクセシビリティ(Accessibility)

すべてのフォームコントロールに適切なアクセス可能な名前を付けて、それらの目的を支援技術のユーザーに伝えることができるようにする。これを実現する最も簡単な方法は、<label> 要素を使用するか、ボタンの場合は、<button>...</button> コンテンツの一部として十分に説明的なテキストを含めること。

可視の <label> や適切なテキストコンテンツを含めることができない状況では、次のようなアクセス可能な名前を提供する別の方法がある:

  • .visually-hidden を使用して非表示にされた <label> 要素
  • aria-labelledby を使用してラベルとして機能できる既存の要素を指す
  • title 属性を提供
  • aria-label を使用して要素にアクセス可能な名前を明示的に設定

これらのいずれも存在しない場合、支援技術は placeholder 属性を <input> 要素と <textarea> 要素でアクセス可能な名前のフォールバックとして使用することに頼ることがある。このセクションの例では、いくつかの提案されたケース固有のアプローチを提供する。

視覚的に非表示のコンテンツ(.visually-hidden, aria-label さらにはフォームフィールドにコンテンツが含まれると表示されなくなる placeholder コンテンツも)を使用すると支援技術のユーザーにメリットがあるが、ラベルテキストが表示されない場合もあり、特定のユーザーにとって問題がある。アクセシビリティとユーザビリティの両方において、一般的に何らかの形の可視ラベルが最善のアプローチである。