5-6. 플로팅 라벨
■ 플로팅 라벨
플로팅 라벨을 사용하면 입력 필드 내부에 라벨을 삽입하고 입력 필드를 클릭하면 라벨이 플로팅 되도록 할 수 있습니다.
<div class="container mt-3">
<h3>플로팅 라벨</h3>
<form>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="email" name="email">
<label for="email">이메일</label>
</div>
<div class="form-floating mt-3 mb-3">
<input type="text" class="form-control" id="pwd" name="password">
<label for="pwd">비밀번호</label>
</div>
<div class="form-floating mt-3 mb-3">
<textarea class="form-control" id="comment" name="text"></textarea>
<label for="comment">내용</label>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
</div>
ex5-12.html의 실행 결과