การใช้งาน Bootstrap 5

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

ใน Bootstrap 5 การใช้ Select หรือปุ่มเลือกข้อมูลที่ให้ผู้ใช้เลือกจากรายการที่มีอยู่เป็นสิ่งที่จำเป็นในฟอร์มต่าง ๆ เพื่อให้สามารถเลือกรายการที่ต้องการได้ง่ายขึ้น

การสร้าง Select เบื้องต้น

การสร้าง Select เบื้องต้นใน Bootstrap 5 สามารถทำได้โดยการใช้แท็ก <select> และ <option> เหมือน HTML ปกติ แต่ Bootstrap จะทำให้ดูเรียบง่ายและใช้งานง่ายขึ้น

HTML
<div class="mb-3">
  <label for="exampleSelect" class="form-label">เลือกหมวดหมู่</label>
  <select class="form-select" id="exampleSelect">
    <option selected>เลือกหมวดหมู่</option>
    <option value="1">หมวดหมู่ที่ 1</option>
    <option value="2">หมวดหมู่ที่ 2</option>
    <option value="3">หมวดหมู่ที่ 3</option>
  </select>
</div>

ในตัวอย่างข้างต้น เราใช้ class="form-select" ของ Bootstrap เพื่อทำให้ Select สวยงามและใช้งานง่ายขึ้น

การทำ Select แบบ Disabled

หากเราต้องการทำให้ Select หรือบาง Option ไม่สามารถเลือกได้ (Disabled) เราสามารถทำได้โดยการใช้ disabled ภายใน <select> หรือ <option>

HTML
<div class="mb-3">
  <label for="disabledSelect" class="form-label">เลือกตัวเลือก (Disabled)</label>
  <select class="form-select" id="disabledSelect" disabled>
    <option selected>เลือกไม่ได้</option>
    <option value="1">หมวดหมู่ที่ 1</option>
    <option value="2">หมวดหมู่ที่ 2</option>
  </select>
</div>

ในตัวอย่างนี้ Select ทั้งหมดจะไม่สามารถกดเลือกได้เพราะเราใช้ disabled ใน <select> ซึ่งมีประโยชน์เมื่อต้องการป้องกันการเลือกบางตัวเลือกในบางสถานการณ์

Select แบบหลายตัวเลือก (Multiple Select)

หากต้องการให้ผู้ใช้สามารถเลือกได้มากกว่าหนึ่งตัวเลือก Bootstrap รองรับการทำงานนี้ผ่านการเพิ่ม multiple ในแท็ก <select>

HTML
<div class="mb-3">
  <label for="multipleSelect" class="form-label">เลือกได้หลายหมวดหมู่</label>
  <select class="form-select" id="multipleSelect" multiple>
    <option value="1">หมวดหมู่ที่ 1</option>
    <option value="2">หมวดหมู่ที่ 2</option>
    <option value="3">หมวดหมู่ที่ 3</option>
    <option value="4">หมวดหมู่ที่ 4</option>
  </select>
</div>

ตัวเลือกนี้ช่วยให้ผู้ใช้สามารถเลือกได้มากกว่าหนึ่งตัวเลือกโดยการกดปุ่ม Ctrl (หรือ Cmd ใน Mac) เพื่อเลือกหลายตัวเลือกพร้อมกัน

การปรับขนาดของ Select

Bootstrap 5 รองรับการปรับขนาดของ Select ผ่านการเพิ่มคลาสต่าง ๆ เช่น form-select-sm สำหรับขนาดเล็กและ form-select-lg สำหรับขนาดใหญ่

HTML
<div class="mb-3">
  <label for="smallSelect" class="form-label">ขนาดเล็ก</label>
  <select class="form-select form-select-sm" id="smallSelect">
    <option value="1">หมวดหมู่ที่ 1</option>
    <option value="2">หมวดหมู่ที่ 2</option>
  </select>
</div>

<div class="mb-3">
  <label for="largeSelect" class="form-label">ขนาดใหญ่</label>
  <select class="form-select form-select-lg" id="largeSelect">
    <option value="1">หมวดหมู่ที่ 1</option>
    <option value="2">หมวดหมู่ที่ 2</option>
  </select>
</div>

การปรับขนาด Select ช่วยให้ฟอร์มของเรามีความหลากหลายมากขึ้นและเหมาะสมกับดีไซน์ที่ต้องการ

Select ที่มี Option แบบกลุ่ม (Option Groups)

ในกรณีที่ต้องการแยกหมวดหมู่ภายใน Select เราสามารถใช้ <optgroup> เพื่อจัดกลุ่มตัวเลือกได้

HTML
<div class="mb-3">
  <label for="groupSelect" class="form-label">เลือกหมวดหมู่ที่จัดกลุ่ม</label>
  <select class="form-select" id="groupSelect">
    <optgroup label="หมวดหมู่หลัก">
      <option value="1">หมวดหมู่ที่ 1</option>
      <option value="2">หมวดหมู่ที่ 2</option>
    </optgroup>
    <optgroup label="หมวดหมู่รอง">
      <option value="3">หมวดหมู่ที่ 3</option>
      <option value="4">หมวดหมู่ที่ 4</option>
    </optgroup>
  </select>
</div>

การใช้ <optgroup> ช่วยให้ Select ของเราดูมีการจัดระเบียบมากขึ้น โดยเฉพาะเมื่อมีตัวเลือกจำนวนมาก

การตกแต่ง Select ด้วย Custom Styles

หากต้องการตกแต่ง Select เพิ่มเติม Bootstrap 5 รองรับการตกแต่งด้วย CSS ปกติ เราสามารถปรับสี ขอบ หรือรูปแบบอื่น ๆ ได้ตามต้องการ

HTML
<style>
  .custom-select {
    background-color: #f8f9fa;
    border: 2px solid #6c757d;
    color: #495057;
  }
</style>

<div class="mb-3">
  <label for="customStyledSelect" class="form-label">Select แบบกำหนดเอง</label>
  <select class="form-select custom-select" id="customStyledSelect">
    <option value="1">หมวดหมู่ที่ 1</option>
    <option value="2">หมวดหมู่ที่ 2</option>
    <option value="3">หมวดหมู่ที่ 3</option>
  </select>
</div>

การตกแต่งในลักษณะนี้สามารถช่วยให้ Select ของเราดูโดดเด่นและสอดคล้องกับดีไซน์ของเว็บไซต์มากขึ้น

สรุป

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

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

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