การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Checkbox

ใน Bootstrap 5 เราสามารถใช้งาน Checkbox ได้อย่างง่ายดาย และสะดวกต่อการออกแบบ UI ที่สวยงาม รวมถึงรองรับการทำงานในทุกอุปกรณ์ ไม่ว่าจะเป็นเดสก์ท็อปหรือมือถือ Checkbox เป็นองค์ประกอบสำคัญในฟอร์มที่ใช้สำหรับให้ผู้ใช้งานเลือกตัวเลือกที่หลากหลายได้พร้อมกัน

การสร้าง Checkbox แบบพื้นฐาน (Basic Checkbox)

Checkbox แบบพื้นฐานใน Bootstrap 5 สามารถสร้างได้ง่ายโดยใช้คลาส .form-check และ .form-check-input สำหรับ Checkbox และ .form-check-label สำหรับป้ายชื่อ (Label)

HTML
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    เลือกตัวเลือกนี้
  </label>
</div>

Checkbox แบบเลือกไม่ได้ (Disabled Checkbox)

ในกรณีที่ต้องการแสดง Checkbox แต่ไม่อนุญาตให้ผู้ใช้งานทำการเลือก สามารถใช้คลาส disabled เพื่อปิดการใช้งานได้

HTML
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="disabledCheck1" disabled>
  <label class="form-check-label" for="disabledCheck1">
    ตัวเลือกนี้ไม่สามารถเลือกได้
  </label>
</div>

Checkbox แบบกำหนดสถานะเริ่มต้นเป็นเลือก (Checked by Default)

ถ้าต้องการให้ Checkbox ถูกเลือกไว้ตั้งแต่เริ่มต้น สามารถเพิ่มแอตทริบิวต์ checked ใน <input> ได้

HTML
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultChecked1" checked>
  <label class="form-check-label" for="defaultChecked1">
    เลือกไว้แล้วตั้งแต่เริ่มต้น
  </label>
</div>

Inline Checkbox (Checkbox แสดงแบบแนวนอน)

ถ้าต้องการให้ Checkbox แสดงในรูปแบบแนวนอน สามารถใช้คลาส .form-check-inline เพื่อจัดเรียง Checkbox ให้อยู่ในบรรทัดเดียวกันได้

HTML
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">ตัวเลือก 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">ตัวเลือก 2</label>
</div>

Custom Checkbox (ออกแบบ Checkbox ให้ดูสวยงาม)

ใน Bootstrap 5 เราสามารถสร้าง Checkbox ในแบบที่ออกแบบเฉพาะได้โดยใช้คลาส .custom-checkbox ซึ่งจะช่วยปรับแต่งรูปลักษณ์ของ Checkbox ให้ดูสวยงามและเข้ากับดีไซน์ที่ต้องการ

HTML
<div class="form-check custom-checkbox">
  <input class="form-check-input" type="checkbox" id="customCheck1">
  <label class="form-check-label" for="customCheck1">ตัวเลือกแบบปรับแต่ง</label>
</div>

Checkbox แบบไม่มี Label

หากไม่ต้องการแสดงป้ายชื่อ (Label) ให้แสดงแค่ Checkbox สามารถเว้น label หรือซ่อนไว้ได้

HTML
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkboxNoLabel">
</div>

Checkbox ในกลุ่มฟอร์ม (Form Group)

Checkbox มักจะถูกใช้ในกลุ่มฟอร์มร่วมกับองค์ประกอบฟอร์มอื่น ๆ เช่น ปุ่มหรืออินพุตอื่น ๆ ซึ่งเราสามารถจัดรูปแบบให้ดูเป็นระเบียบด้วยคลาส .form-group

HTML
<form>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="groupCheckbox1">
      <label class="form-check-label" for="groupCheckbox1">เลือกตัวเลือกนี้</label>
    </div>
    <button type="submit" class="btn btn-primary">ส่ง</button>
  </div>
</form>

สรุป

Checkbox ใน Bootstrap 5 ช่วยให้การพัฒนาเว็บไซต์เป็นเรื่องง่ายขึ้น ทั้งในด้านการออกแบบที่สวยงาม และความสะดวกในการใช้งานในหลายรูปแบบ เราสามารถปรับแต่ง Checkbox ได้หลากหลายเพื่อให้เหมาะสมกับความต้องการของเว็บไซต์ ทั้งในรูปแบบพื้นฐาน ไปจนถึงการแสดงผลแบบกำหนดเอง

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

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