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

フローティングラベル(Floating labels) v5.0.0-alpha3新設

入力フィールドに浮かぶ美しくシンプルなフォームラベルを作成。

目次

実例(Example)

1.入力フィールドに値が入っていない場合

.form-floating<input class="form-control"> 要素と <label> 要素のペアを囲んで、Bootstrapのテキストフォームフィールドでフローティングラベルを有効にする。CSSのみのフローティングラベルのメソッドは :placeholder-shown 疑似要素を使用するため、各 <input> には placeholder が必要。そして兄弟セレクタ(例:)を利用できるように <input> が先に来る必要がある。

見本
Bootstrap5.0.0-alpha3の設定例 緑背景が変更箇所
<div class="form-floating mb-3">
	<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
	<label for="floatingInput">Eメールアドレス</label>
</div>
<div class="form-floating">
	<input type="password" class="form-control" id="floatingPassword" placeholder="パスワード">
	<label for="floatingPassword">パスワード</label>
</div>
※Bootstrap5.0.0-alpha2の設定例(実例より) 赤背景が変更箇所
<div class="form-label-group">
	<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
	<label for="floatingInput" class="form-label">Eメールアドレス</label>
</div>

<div class="form-label-group">
	<input type="password" id="floatingPassword" class="form-control" placeholder="パスワード">
	<label for="inputPassword" class="form-label">パスワード</label>
</div>

2.入力フィールドに値が入っている場合

すでに定義されている value がある場合、<label> は自動的にフロート位置に調整される。

見本
設定例
<form class="form-floating">
	<input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
	<label for="floatingInputValue">Eメールアドレス</label>
</form>

3.フォーム検証スタイルの無効入力

フォーム検証スタイルも期待どおりに機能。

見本
設定例
<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
  <label for="floatingInputInvalid">Eメールアドレス</label>
</form>
【設定】
  • .form-floating(.mb-3) > [input.form-control#ID[placeholder]《コントロール》 + label[for]《ラベル》]
【注意】
  • コントロールとラベルの順番が通常とは逆になる

 

テキストエリア(Textareas)

1.通常の場合

デフォルトでは、.form-control を持つ <textarea><input> と同じ高さになる。

見本
設定例
<div class="form-floating">
	<textarea class="form-control" placeholder="ここにコメントを残す" id="floatingTextarea"></textarea>
	<label for="floatingTextarea">コメント</label>
</div>

2.テキストエリアの高さを変更する場合

<textarea> にカスタムの高さを設定するには、rows 属性を使用しないこと。代わりに、(インラインかカスタムCSSを経由して)明示的な height を設定する。

見本
設定例
<div class="form-floating">
	<textarea class="form-control" placeholder="ここにコメントを残す" id="floatingTextarea2" style="height: 100px"></textarea>
	<label for="floatingTextarea2">コメント</label>
</div>
【設定】
  • コントロールが textarea.form-control でも設定可能
【注意】
  • <textarea> の高さ設定に rows 属性は使用不可。任意のCSSで height の設定が必要

 

選択メニュー(Selects)

.form-control を除き、フローティングラベルは .form-select でも使用可能。これらは同じように機能するが、<input> とは異なり、常に <label> がフロート状態で表示。sizemultiple 属性がある選択メニューは非対応。

見本
設定例
<div class="form-floating">
	<select class="form-select" id="floatingSelect" aria-label="フローティングラベル選択例">
		<option selected>この選択メニューを開く</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
	<label for="floatingSelect">選択で動作</label>
</div>
【設定】
  • コントロールが select.form-select でも設定可能
【注意】
  • 選択フィールドに値が入っていない場合でも、<label> はフロート状態で表示
  • sizemultiple 属性がある選択メニューは非対応

 

レイアウト(Layout)

Bootstrapグリッドシステムを使用する場合は、必ずフォーム要素を列クラス内に配置する。

見本
設定例
<div class="row g-2">
	<div class="col-md">
		<div class="form-floating">
			<input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
			<label for="floatingInputGrid">Eメールアドレス</label>
		</div>
	</div>
	<div class="col-md">
		<div class="form-floating">
			<select class="form-select" id="floatingSelectGrid" aria-label="フローティングラベル選択例">
				<option selected>この選択メニューを開く</option>
				<option value="1">その1</option>
				<option value="2">その2</option>
				<option value="3">その3</option>
			</select>
			<label for="floatingSelectGrid">選択で動作</label>
		</div>
	</div>
</div>
【設定】
  • グリッド(form.row.g-* > div.col(-{breakpoint}-*))内に .form-floating 以下を入れる