การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Form Floating Label

ใน Bootstrap 5 ได้เพิ่มฟีเจอร์ใหม่ที่เรียกว่า Floating Label สำหรับฟอร์ม ซึ่งเป็นการจัดการให้ป้ายข้อความ (Label) ของฟอร์มซ้อนอยู่ในฟิลด์ของอินพุต (Input Field) เมื่อผู้ใช้เริ่มกรอกข้อมูล ป้ายข้อความนี้จะเลื่อนขึ้นไปด้านบนของฟิลด์ ทำให้ฟอร์มดูสะอาดตาและใช้งานได้ง่ายขึ้น

การเริ่มต้นใช้งาน Floating Label

เพื่อใช้งาน Floating Label ในฟอร์มของ Bootstrap 5 จำเป็นต้องมีโครงสร้าง HTML ที่ถูกต้อง โดยใช้คลาส .form-floating ซึ่งจะครอบอินพุตและป้ายข้อความไว้

ตัวอย่างโครงสร้างพื้นฐาน

HTML
<div class="form-floating">
  <input type="text" class="form-control" id="floatingInput" placeholder="ชื่อผู้ใช้">
  <label for="floatingInput">ชื่อผู้ใช้</label>
</div>
  • div.form-floating: ครอบฟิลด์ที่ต้องการให้มี Floating Label
  • input.form-control: ใช้สำหรับฟิลด์อินพุตที่ต้องการให้แสดง Floating Label
  • label: แสดงป้ายข้อความสำหรับฟิลด์

หมายเหตุ: placeholder ในอินพุตจำเป็นต้องมี แต่มันจะถูกซ่อนไว้หลังจากที่ Floating Label ทำงาน

Floating Label กับฟิลด์รหัสผ่าน

นอกจากฟิลด์ข้อความปกติแล้ว เรายังสามารถใช้กับฟิลด์ประเภทอื่น ๆ เช่น ฟิลด์รหัสผ่าน

HTML
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="รหัสผ่าน">
  <label for="floatingPassword">รหัสผ่าน</label>
</div>

Floating Label กับ Textarea

Bootstrap 5 ยังสนับสนุนการใช้งานกับ textarea โดยสามารถใช้ Floating Label ได้ด้วย

HTML
<div class="form-floating">
  <textarea class="form-control" placeholder="ข้อความ" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">ข้อความ</label>
</div>

ข้อสังเกต: สำหรับ textarea ไม่มีการกำหนดจำนวนแถวล่วงหน้า จึงจำเป็นต้องเพิ่ม CSS เพื่อกำหนดขนาดของฟิลด์เอง

CSS
.form-floating textarea {
  height: 100px;
}

Floating Label กับ Select (Dropdown)

สำหรับฟิลด์ select เราสามารถใช้งาน Floating Label ได้โดยไม่ต้องปรับโครงสร้างมากนัก

HTML
<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>

Floating Label กับฟิลด์แบบ Validation

Bootstrap 5 มีระบบการตรวจสอบความถูกต้องของฟิลด์ (validation) ซึ่งสามารถใช้ร่วมกับ Floating Label ได้อย่างไม่มีปัญหา

HTML
<div class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingEmail" placeholder="อีเมล" required>
  <label for="floatingEmail">อีเมล</label>
  <div class="invalid-feedback">
    กรุณาใส่อีเมลที่ถูกต้อง
  </div>
</div>
  • คลาส .is-invalid จะใช้เพื่อแสดงว่าฟิลด์นี้ไม่ผ่านการตรวจสอบ
  • ส่วน .invalid-feedback ใช้เพื่อแสดงข้อความข้อผิดพลาดเมื่อฟิลด์ไม่ถูกต้อง

Floating Label กับสีต่าง ๆ

เราสามารถเปลี่ยนสีของฟิลด์ที่มี Floating Label ให้สอดคล้องกับสไตล์ของเว็บไซต์ได้ด้วยการใช้คลาสสีที่ Bootstrap มีมาให้ เช่น .text-primary, .text-success, .text-danger และอื่น ๆ

ตัวอย่างการเปลี่ยนสีของ Label

HTML
<div class="form-floating">
  <input type="text" class="form-control" id="floatingCustomColor" placeholder="ข้อมูล" style="border-color: #28a745;">
  <label for="floatingCustomColor" class="text-success">ข้อมูล</label>
</div>

สรุป

Floating Label ใน Bootstrap 5 เป็นฟีเจอร์ที่ทำให้การออกแบบฟอร์มมีความสะอาดตา และทันสมัยขึ้น สามารถนำไปประยุกต์ใช้ได้กับหลายรูปแบบฟิลด์ เช่น ฟิลด์ข้อความ, รหัสผ่าน, Textarea และ Dropdown โดยง่ายต่อการนำไปใช้ในโปรเจกต์ต่าง ๆ รวมทั้งยังสามารถทำงานร่วมกับระบบตรวจสอบความถูกต้องของฟิลด์ (Validation) ได้อย่างราบรื่น

ฟีเจอร์นี้เป็นตัวเลือกที่ดีในการทำให้ UI ของฟอร์มดูเป็นมืออาชีพและใช้งานง่ายขึ้น หากใช้งานอย่างเหมาะสมจะช่วยเพิ่มประสบการณ์ที่ดีให้กับผู้ใช้

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ