플로팅 라벨 입력

분류: 폼 요소

입력 값이 없을 때는 라벨이 입력창 안에 겹쳐 보이다가, 값을 입력하거나 포커스를 주면 라벨이 위로 떠오르는 플로팅 라벨(Floating Label) 패턴입니다. .form-floating으로 감싼 뒤 <input>/<select> 다음에 <label for="...">를 두는 순서(입력 요소가 먼저, 라벨이 나중)를 지켜야 정상 동작합니다.

소스

<div class="mb-3">
    <label class="form-label">플로팅 라벨 입력</label>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floating-input" value="name@example.com" autocomplete="off">
        <label for="floating-input">이메일 주소</label>
    </div>
    <div class="form-floating mb-3">
        <input type="password" class="form-control" id="floating-password" value="Password" autocomplete="off">
        <label for="floating-password">비밀번호</label>
    </div>
    <div class="form-floating">
        <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
            <option selected="">이 선택 메뉴를 여세요</option>
            <option value="1">옵션 1</option>
            <option value="2">옵션 2</option>
            <option value="3">옵션 3</option>
        </select>
        <label for="floatingSelect">선택</label>
    </div>
</div>

사용된 주요 클래스

클래스	역할
form-control	텍스트/비밀번호 입력의 기본 스타일
form-floating	입력 요소와 라벨을 겹쳐 배치하고, 값 유무에 따라 라벨을 떠오르게 하는 컨테이너
form-label	예제 섹션 제목에 사용된 라벨 텍스트 스타일
form-select	<select> 요소에 적용하는 기본 드롭다운 스타일
mb-3	요소 사이 아래쪽 여백(margin-bottom)

참고 자료

• Form elements

실전 예제 페이지

HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-플로팅-라벨-입력.html 경로에서 렌더링 결과를 확인할 수 있습니다.

미리보기새 창에서 열기 ↗