부트스트랩5, 플로팅 라벨

플로팅 라벨(Floating Lables)은 입력할 곳 위에 자동으로 상단으로 라벨이 이동한다. 아래 애니메이션처럼 Email address(이메일)과 Password(비밀번호)를 입력하려고 한다면 처음에 문구가 보인다. 만약 이메일을 입력하려고 한다면 Email address라는 문구가 입력 위로 이동한다.

 

예 애니메이션

버전 3에서 라벨이 입력 상단으로 이동하는 것이 없어 5에 플로팅 라벨이 아무것도 아닌데 신선했다.

 

예

 

처음에 예를 위에서 애니메이션으로 간단히 보였는데 그림으로 보면 아래와 같다. form-floating으로 활성화시킨 후 <input class="form-control">과 <label>을 둘러싼다.

 

예 그림

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <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>

 

만약 입력 값이 정해졌다면 라벨 위치는 아래 그림을 보듯이 자동으로 상단에 위치한다.

 

<input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">

 

값이 있는 경우

 

텍스트 영역

 

아래 애니메이션을 보면 부트스트랩에서 Textarea를 어떻게 사용하는가 알 수 있다. 위와 다른 것이 없다. 이 블로그 스킨을 변경할 때 댓글이나 방명록 등 텍스트 영역을 적을 때 유용할 것 같다는 생각이 들었다. 참고로 이 블로그는 부트스트랩 3으로 만들었다.

 

텍스트 영역에서 플로팅 라벨

 

입력을 위해 마우스 커서를 영역에 가져가면 라벨이 자동으로 위로 글꼴이 크기가 작아지면서 이동한다. 아래 그림을 보면 라벨 크기는 변함이 없는 것 같지만 작게 된다. 그리고 텍스트 영역의 높이를 지정할 때 rows를 사용하지 않고 아래 소스를 보듯이 style="height:수치"라고 인라인 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>

 

버전 3에서 텍스트 영역의 높이를 정하기 위해 인라인 CSS를 사용하기보다 rows를 사용했다.

 

<textarea class="form-control" rows="3"></textarea>

 

선택

 

Select(선택) 사용은 아래 애니메이션을 보면 되고 select는 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>

 

---

 

내가 보기에 플로팅 라벨은 제목 비슷하게 사용하면 될 것 같다.