플로팅 라벨
플로팅 라벨 (Floating labels)
입력 필드 위로 떠오르는 아름답고 단순한 폼 라벨을 만들어 보아요.
출처: 문서
본문
예시 (Example)
Bootstrap의 텍스트 폼 필드에 플로팅 라벨을 활성화하려면 <input class="form-control">과 <label> 요소 쌍을 .form-floating으로 감싸요.
각 <input>에는 비어 있지 않은 placeholder 속성이 필요해요. 우리의 CSS 전용 플로팅 라벨 구현은 :placeholder-shown 의사 요소에 의존해서 입력이 비어 있는지 감지하기 때문이에요. placeholder 텍스트 자체는 보이지 않고, 사용자에게는 <label>만 표시돼요.
또한 형제 셀렉터(즉 ~)를 활용할 수 있도록 <input>이 먼저 와야 한다는 점도 참고하세요.
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
이미 값이 정의되어 있으면 <label>이 자동으로 플로팅 위치로 조정돼요.
<form class="form-floating">
<input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputValue">Input with value</label>
</form>
폼 검증 스타일도 예상대로 작동해요.
<form class="form-floating">
<input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputInvalid">Invalid input</label>
</form>
텍스트 영역 (Textareas)
기본적으로 .form-control이 있는 <textarea>는 <input>과 같은 높이를 가져요.
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
<textarea>에 커스텀 높이를 설정하려면 rows 속성을 사용하지 마세요. 대신 명시적 높이를 설정해요 (인라인 또는 커스텀 CSS로).
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>
셀렉트 (Selects)
.form-control 외에도 플로팅 라벨은 .form-select에서만 사용할 수 있어요. 그들은 같은 방식으로 작동하지만, <input>과 달리 <label>을 항상 플로팅된 상태로 표시해요. size와 multiple이 있는 셀렉트는 지원되지 않아요.
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>
비활성화 (Disabled)
입력, 텍스트 영역 또는 셀렉트에 disabled 불리언 속성을 추가하면 회색으로 보이는 외형을 주고, 포인터 이벤트를 제거하며, 포커스를 방지해요.
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">Email address</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea>
<label for="floatingTextareaDisabled">Comments</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled>Disabled textarea with some text inside</textarea>
<label for="floatingTextarea2Disabled">Comments</label>
</div>
<div class="form-floating">
<select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectDisabled">Works with selects</label>
</div>
읽기 전용 일반 텍스트 (Readonly plaintext)
플로팅 라벨은 .form-control-plaintext도 지원해요. 페이지 레이아웃에 영향을 주지 않고 편집 가능한 <input>에서 일반 텍스트 값으로 전환할 때 유용해요.
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
<label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
<label for="floatingPlaintextInput">Input with value</label>
</div>
입력 그룹 (Input groups)
플로팅 라벨은 .input-group도 지원해요.
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
<label for="floatingInputGroup1">Username</label>
</div>
</div>
.input-group과 .form-floating을 폼 검증과 함께 사용할 때, -feedback은 .form-floating 밖에 있으면서 .input-group 안에 배치해야 해요. 즉 피드백은 JavaScript로 표시해야 한다는 뜻이에요.
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<div class="form-floating is-invalid">
<input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
<label for="floatingInputGroup2">Username</label>
</div>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
레이아웃 (Layout)
Bootstrap 그리드 시스템으로 작업할 때는 폼 요소를 컬럼 클래스 안에 배치해야 해요.
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>
CSS
Sass 변수 (Sass variables)
scss/_variables.scss
$form-floating-height: add(3.5rem, $input-height-border);
$form-floating-line-height: 1.25;
$form-floating-padding-x: $input-padding-x;
$form-floating-padding-y: 1rem;
$form-floating-input-padding-t: 1.625rem;
$form-floating-input-padding-b: .625rem;
$form-floating-label-height: 1.5em;
$form-floating-label-opacity: .65;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-label-disabled-color: $gray-600;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out;