Categories HTML

Thực hành với thẻ select và option trong HTML

Thẻ select dùng để lựa chọn, ở khía cạnh nào đó nó giống với radio button, nhưng điểm khác biệt là select có kiểu dáng dạng drop-down menu (xổ xuống).

Code mẫu:

<select>
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

Kết quả:


1. Thuộc tính name

Đây là thành phần không thể thiếu của các thẻ nằm trong form, trong đó phải kể đến các thẻ input, textarea. Thẻ select cũng vậy, thuộc tính name cho phép JavaScript và các ngôn ngữ lập trình web như PHP lấy được dữ liệu mà người dùng nhập sau khi họ nhấn nút submit. Code mẫu:

<select name="gianha">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

2. Thuộc tính disabled

Dùng để làm cả danh sách thả xuống hoặc một lựa chọn nào đó không khả dụng, ví dụ:


Code mẫu:

<select disabled name="gianha">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

Giờ giả dụ các nhà có giá từ 300 – 400 triệu đã hết, bạn sẽ ngăn không cho người dùng chọn giá đó, các nhà có giá khác vẫn select được:


Code mẫu:

<select name="gianha">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option disabled value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

3. Thuộc tính size

Với size, bạn sẽ quy định xem có bao nhiêu lựa chọn được hiển thị ra ngoài. Như ở trên có 4 giá nhà, và hiển thị ra ngoài ngay cái nhìn đầu tiên chỉ là 1 (khi đã nhấn vào rồi thì sẽ hiện hết). Giờ nếu bạn có 9 lựa chọn và muốn hiển thị ra ngoài 4 lựa chọn. Ví dụ:


Code mẫu:

<select name="gianha" size="4">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ</option>
   <option value="812">Từ 1.2 tỷ đến 1.5 tỷ</option>
   <option value="812">Từ 1.5 tỷ triệu đến 2 tỷ</option>
   <option value="812">Từ 2 tỷ triệu đến 3 tỷ</option>
   <option value="812">Từ 3 tỷ triệu đến 5 tỷ</option>
</select>

Có một số chú ý:

  • Khi bạn sử dụng size lớn hơn 1, theo mặc định có ít nhất 4 lựa chọn sẽ hiện ra, tức là nếu bạn chọn size là 2, 3 hoặc 4 thì đều ra 4 lựa chọn hết. Từ 4 trở lên thì mới chính xác hoàn toàn, giả dụ để 5 thì có 5 lựa chọn, để 7 thì có 7 lựa chọn.
  • Nếu size lớn hơn 1 nhưng nhỏ hơn số khả năng lựa chọn thì sẽ xuất hiện thanh cuộn dọc để bạn kéo lên kéo xuống.

4. Thuộc tính multiple

Với multiple, bạn sẽ cho phép người dùng có nhiều lựa chọn cùng lúc thay vì chỉ một lựa chọn như mặc định:


Giữ phím Ctrl và tick nhiều cái, với giả định là bạn có thể mua nhà từ giá thấp nhất đến gần cao nhất 🙂

Code mẫu:

<select multiple name="gianha">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

Rõ ràng multiple làm cho select giống với checkbox hơn. Tuy nhiên cũng dễ thấy checkbox thì chuyên nghiệp hơn trong việc thiết kế ứng dụng đa lựa chọn.


5. Nhóm các lựa chọn liên quan bằng optgroup

Nếu bạn có một danh sách khá dài các chọn lựa, bạn có thể muốn nhóm các chọn lựa lại với nhau để người dùng dễ dàng quan sát và thao tác. Khi ấy bạn nên dùng thẻ optgroup. Code mẫu:

<select name="gianha">
<optgroup label="Dưới 500 triệu">
<option value="499">499 triệu – 60m2</option>
<option value="350">350 triệu – 40m2</option>

<option value="250">250 triệu – 25m2</option>
</optgroup>

<optgroup label="Trên 500 triệu">
<option value="700">700 triệu – 85m2</option>
<option value="900">350 triệu – 100m2</option>
<option value="1200">1.2 tỷ – 150m2</option>
</optgroup>
</select>

Kết quả:


Bạn có thể thấy các nhà có giá dưới 500 triệu được nhóm lại dưới nhãn được bôi đậm. Thẻ optgroup có 2 thuộc tính, ngoài thuộc tính label bạn đã thấy trong code ở trên, nó còn thuộc tính disabled dùng để vô hiệu hóa một nhóm lựa chọn, giả dụ, tất cả các nhà có giá dưới 500 triệu đã được bán hết, ta sẽ không cho người dùng có chọn lựa này, code mẫu:

<select name="gianha">
<optgroup label="Dưới 500 triệu" disabled>
<option value="499">499 triệu – 60m2</option>
<option value="350">350 triệu – 40m2</option>

<option value="250">250 triệu – 25m2</option>
</optgroup>

<optgroup label="Trên 500 triệu">
<option value="700">700 triệu – 85m2</option>
<option value="900">350 triệu – 100m2</option>
<option value="1200">1.2 tỷ – 150m2</option>
</optgroup>
</select>

Như vậy là cả nhóm dưới 500 triệu đã không thể chọn lựa được.

Comments are closed.

Back to Top