[form] BS5 - Form Floating Labels (폼 플로팅 라벨) ※ placeholder (플레이스홀더)

1. Input - Floating/Animated Label
2. Textarea - Floating/Animated Label
3. Select - Floating/Animated Label

※ 플로팅/애니 라벨은 (INPUT, TEXTAREA, SELECT) 태그에 적용 가능.

※ SELECT 태그 경우엔 애니 효과 적용 X. (단지, 상단 고정 효과만 적용)

Input - Floating/Animated Label

 

<form action="/action_page.php">

    <div class="form-floating mb-3 mt-3">

      <input type="text" class="form-control" id="email" placeholder="Email 입력" name="email">

      <label for="email">Email</label>

    </div>

    <div class="form-floating mt-3 mb-3">

      <input type="text" class="form-control" id="pwd" placeholder="Password 입력" name="pwd">

      <label for="pwd">Password</label>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

</form>

 

---

PS. 주의사항 2가지 ★★★

 

1. <label> 태그는 반드시 <input> 태그 다음에 위치해야 함.
2. placeholder 속성은 표시 안 돼도, 각각의 <input> 요소에 필수.

 

Textarea - Floating/Animated Label

 

<form action="/action_page.php">

    <div class="form-floating mb-3 mt-3">

      <textarea class="form-control" id="self" name="text" placeholder="자기소개 입력"></textarea>

      <label for="self">자기소개</label>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

</form>

 

PS. <INPUT> 태그 주의사항과 마찬가지.

Select - Floating/Animated Label

 

<form action="/action_page.php">

    <div class="form-floating mb-3 mt-3">

      <select class="form-select" id="lang" name="lang">

        <option>HTML</option>

        <option>CSS</option>

        <option>PHP</option>

        <option>SQL</option>

      </select>

      <label for="lang" class="form-label">언어 선택 (1개)</label>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

</form>

 

PS. 라벨이 실렉트 메뉴 왼쪽 상단에 고정되어 보임. (즉, 애니효과 X)