Bootstrap - Chọn Form

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của các yếu tố Chọn Form trong Bootstrap. Là giáo viên máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn bạn trong hành trình này. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ rất cơ bản và dần dần tiến lên. Vậy, hãy lấy một cốc cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu!

Bootstrap - Select

Chọn Form là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu rõ Chọn Form trong Bootstrap là gì. Hãy tưởng tượng bạn đang ở một cửa hàng kem, và bạn có một thực đơn để chọn. Thực đơn đó giống như một yếu tố chọn trong thiết kế web. Nó cho phép người dùng chọn một tùy chọn từ danh sách nhiều tùy chọn. Bootstrap, người bạn đáng tin cậy của chúng ta trong phát triển web, giúp các yếu tố chọn này trông đẹp mắt và hoạt động mượt mà trên nhiều thiết bị và trình duyệt khác nhau.

Chọn Form Mặc Định

Hãy bắt đầu với hình thức cơ bản nhất của một Chọn Form Bootstrap. Đây là cách nó trông như thế nào:

<select class="form-select" aria-label="Default select example">
  <option selected>Mở menu chọn này</option>
  <option value="1">Một</option>
  <option value="2">Hai</option>
  <option value="3">Ba</option>
</select>

Bây giờ, hãy phân tích này:

Chúng ta bắt đầu với thẻ <select>, cho biết trình duyệt rằng chúng ta đang tạo một menu thả xuống.
class="form-select" là phép thuật của Bootstrap giúp định dạng chọn của chúng ta đẹp mắt.
aria-label là để hỗ trợ khả năng truy cập, giúp các trình đọc màn hình hiểu mục đích của yếu tố này.
Bên trong <select>, chúng ta có các thẻ <option>. Đây là các lựa chọn trong menu thả xuống.
Thuộc tính selected trên tùy chọn đầu tiên làm cho nó là lựa chọn mặc định.

Khi bạn sử dụng mã này, bạn sẽ thấy một menu thả xuống tinh tế với bốn tùy chọn. Đẹp phải không?

Ví dụ: Ngôn ngữ lập trình yêu thích

Hãy làm cho điều này thú vị hơn với một ví dụ thực tế. Hãy tưởng tượng chúng ta đang tạo một khảo sát về ngôn ngữ lập trình yêu thích:

<select class="form-select" aria-label="Chọn ngôn ngữ lập trình yêu thích của bạn">
  <option selected>Chọn ngôn ngữ yêu thích của bạn</option>
  <option value="python">Python</option>
  <option value="javascript">JavaScript</option>
  <option value="java">Java</option>
  <option value="csharp">C#</option>
</select>

Điều này tạo ra một menu thả xuống cho phép người dùng chọn ngôn ngữ lập trình yêu thích của họ. Nó giống như hỏi bạn bè của bạn họ thích hương vị kem nào, nhưng cho các lập trình viên!

Định cỡ: Làm cho thứ gì đó lớn hơn (hoặc nhỏ hơn)

Đôi khi, bạn có thể muốn chọn lớn hơn hoặc nhỏ hơn. Bootstrap có thể giúp bạn! Dưới đây là ba tùy chọn kích thước:

Ví dụ: Chọn Lớn

<select class="form-select form-select-lg mb-3" aria-label="Ví dụ chọn lớn">
  <option selected>Mở menu chọn này</option>
  <option value="1">Một</option>
  <option value="2">Hai</option>
  <option value="3">Ba</option>
</select>

Class form-select-lg làm cho chọn này lớn hơn kích thước mặc định.

Ví dụ: Chọn Mặc Định

<select class="form-select mb-3" aria-label="Ví dụ chọn mặc định">
  <option selected>Mở menu chọn này</option>
  <option value="1">Một</option>
  <option value="2">Hai</option>
  <option value="3">Ba</option>
</select>

Đây là kích thước tiêu chuẩn, như chúng ta đã thấy trước đó.

Ví dụ: Chọn Nhỏ

<select class="form-select form-select-sm" aria-label="Ví dụ chọn nhỏ">
  <option selected>Mở menu chọn này</option>
  <option value="1">Một</option>
  <option value="2">Hai</option>
  <option value="3">Ba</option>
</select>

Class form-select-sm tạo ra một yếu tố chọn nhỏ hơn.

Hãy tưởng tượng những này như là các loại đồ uống nhỏ, trung bình và lớn ở một nhà hàng nhanh. Bạn chọn kích thước phù hợp nhất với thiết kế của bạn!

Vô hiệu hóa: Khi các tùy chọn không có trong thực đơn

Đôi khi, bạn có thể muốn ngăn người dùng tương tác với một yếu tố chọn. Có lẽ nó không áp dụng cho họ, hoặc có thể nó phụ thuộc vào một lựa chọn khác mà họ chưa thực hiện. Đó là lúc thuộc tính disabled phát huy tác dụng.

Ví dụ: Chọn Vô hiệu hóa

<select class="form-select" aria-label="Ví dụ chọn vô hiệu hóa" disabled>
  <option selected>Mở menu chọn này (nhưng bạn không thể!)</option>
  <option value="1">Một</option>
  <option value="2">Hai</option>
  <option value="3">Ba</option>
</select>

Thêm disabled vào thẻ <select> làm cho toàn bộ menu thả xuống bị mờ đi, ngăn không cho bất kỳ tương tác nào. Nó giống như đặt một biển "Đóng" trước cửa hàng kem mà chúng ta đã nói đến trước đó.

Kết hợp tất cả lại

Bây giờ chúng ta đã bao gồm các yếu tố cơ bản, hãy tạo một biểu mẫu phức tạp hơn sử dụng các loại chọn khác nhau:

<form>
  <div class="mb-3">
    <label for="programmingLanguage" class="form-label">Ngôn ngữ lập trình yêu thích</label>
    <select class="form-select form-select-lg" id="programmingLanguage">
      <option selected>Chọn ngôn ngữ yêu thích của bạn</option>
      <option value="python">Python</option>
      <option value="javascript">JavaScript</option>
      <option value="java">Java</option>
      <option value="csharp">C#</option>
    </select>
  </div>

  <div class="mb-3">
    <label for="experience" class="form-label">Năm kinh nghiệm</label>
    <select class="form-select" id="experience">
      <option selected>Chọn kinh nghiệm của bạn</option>
      <option value="1">Dưới 1 năm</option>
      <option value="2">1-3 năm</option>
      <option value="3">3-5 năm</option>
      <option value="4">5+ năm</option>
    </select>
  </div>

  <div class="mb-3">
    <label for="futureLanguage" class="form-label">Ngôn ngữ bạn muốn học tiếp theo</label>
    <select class="form-select form-select-sm" id="futureLanguage" disabled>
      <option selected>Trước tiên, chọn ngôn ngữ yêu thích của bạn</option>
      <option value="rust">Rust</option>
      <option value="go">Go</option>
      <option value="kotlin">Kotlin</option>
      <option value="swift">Swift</option>
    </select>
  </div>
</form>

Biểu mẫu này kết hợp tất cả những gì chúng ta đã học:

Một chọn lớn cho việc chọn ngôn ngữ lập trình yêu thích
Một chọn mặc định cho năm kinh nghiệm
Một chọn nhỏ, vô hiệu hóa cho việc học ngôn ngữ tiếp theo (hãy tưởng tượng nó sẽ được启用 khi họ chọn ngôn ngữ yêu thích)

Kết luận

Và thế là bạn đã có, các bạn! Bạn vừa học cách tạo và tùy chỉnh các yếu tố Chọn Form trong Bootstrap. Từ các menu thả xuống cơ bản đến các tùy chọn có kích thước và vô hiệu hóa, bạn bây giờ đã có các công cụ để tạo các biểu mẫu thân thiện với người dùng và trông đẹp mắt trên mọi thiết bị.

Nhớ rằng, thực hành là cách tốt nhất để thành thạo. Hãy thử tạo các biểu mẫu của riêng bạn, kết hợp các kích thước khác nhau và thử nghiệm các trạng thái vô hiệu hóa. Trước khi bạn biết, bạn sẽ thiết kế các biểu mẫu như một chuyên gia!

Chúc các bạn may mắn và mong rằng các chọn của bạn luôn tinh tế và功能性!

Credits: Image by storyset

Hướng Dẫn Trước:

Bootstrap - Điều khiển biểu mẫu

Hướng Dẫn Tiếp Theo:

Bootstrap - Checkbox & Radio