Bootstrap 5 แทร็กฟอร์มแบบเลื่อน

แท็กแบบ float/animation

โดยมาตรฐาน ในการใช้แท็ก (label) มันจะปรากฏขึ้นที่ด้านบนของช่องบอกข้อมูล:

ด้วยการใช้แท็กแบบ float คุณสามารถใส่แท็กในช่องบอกข้อมูลและทำให้มัน float/animation ขึ้นเมื่อคลิกบอกข้อมูล:

ตัวอย่าง

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="กรุณาใส่ที่อยู่อีเมล" name="email">
  <label for="email">อีเมล</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="โปรดใส่รหัสผ่าน" name="pswd">
  <label for="pwd">รหัสผ่าน</label>
</div>

ทดสอบเองเลย

ความเกี่ยวข้องที่ควรจำเป็นต่อแทร็กฟลอติ่ง:

<label>ตัวแปร <input> ต้องอยู่หลังตัวแปร <input> และตัวแปร <input> แต่ละตัวต้องมี placeholder ตัวแปร (แม้จะไม่มีการแสดง)

Textarea

ยังใช้ได้กับ textarea ด้วย:

ตัวอย่าง

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="ความคิดเห็นที่ได้รับ"></textarea>
  <label for="comment">ความคิดเห็น</label>
</div>

ทดสอบเองเลย

เมนูเลือก

คุณยังสามารถใช้ "แทร็กฟลอติ่ง" ในเมนูเลือก แต่นั่นจะไม่มีการเหนือขึ้นหรืออะนิเมชั่น แทร็กจะมีทั้งหมดปรากฏอยู่ในมุมบนซ้ายของเมนูเลือก：

ตัวอย่าง

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">เลือกรายการ (เลือกหนึ่งรายการ)：</label>
</div>

ทดสอบเองเลย