Rate this post

Trong HTML, thẻ <select> được sử dụng để tạo ra một danh sách thả xuống các tùy chọn mà người dùng có thể chọn. Các tùy chọn được xác định bằng thẻ <option>, nên được đặt trong thẻ <select>.

Các bài viết liên quan:

Ví dụ:

<select>
  <option value="option1">Tùy chọn 1</option>
  <option value="option2">Tùy chọn 2</option>
  <option value="option3">Tùy chọn 3</option>
</select>

Bạn cũng có thể thiết lập một tùy chọn mặc định bằng thuộc tính selected, ví dụ:

<select>
  <option value="option1">Tùy chọn 1</option>
  <option value="option2" selected>Tùy chọn 2</option>
  <option value="option3">Tùy chọn 3</option>
</select>

Bạn cũng có thể nhóm các tùy chọn lại với nhau bằng <optgroup>

<select>
  <optgroup label="Nhóm 1">
    <option value="option1">Tùy chọn 1</option>
    <option value="option2">Tùy chọn 2</option>
  </optgroup>
  <optgroup label="Nhóm 2">
    <option value="option3">Tùy chọn 3</option>
    <option value="option4">Tùy chọn 4</option>
  </optgroup>
</select>

Bạn có thể sử dụng CSS để chỉnh sửa giao diện của thẻ select và javascript để tương tác với nó.

Một số thuộc tính của select trong html

Một số thuộc tính quan trọng của thẻ <select> trong HTML:

name: thiết lập tên cho thẻ select, để gửi dữ liệu lên máy chủ
id: thiết lập một id duy nhất cho thẻ select, để tương tác với nó bằng javascript
size: thiết lập số lượng tùy chọn được hiển thị trong danh sách thả xuống
multiple: cho phép người dùng chọn nhiều tùy chọn cùng một lúc
disabled: vô hiệu hóa thẻ select, người dùng không thể chọn tùy chọn
required : yêu cầu người dùng phải chọn một tùy chọn

Các thuộc tính của từng option có thể là:

value: giá trị của tùy chọn được gửi lên máy chủ khi người dùng chọn nó
selected: đặt tùy chọn này là tùy chọn mặc định
disabled: vô hiệu hóa tùy chọn này, người dùng không thể chọn nó

Lưu ý thẻ <select> và thẻ <option> cần được đóng đúng với nhau để tránh lỗi.

Một số ví dụ về select trong html

Với các thuộc tính đã đề cập, chúng ta có thể tạo ra nhiều kiểu select khác nhau. Đây là một số ví dụ về sử dụng thẻ <select> trong HTML:

Tạo một danh sách chọn thức ăn:

<label for="food">Chọn món ăn:</label>
<select id="food" name="food">
  <option value="pizza">Pizza</option>
  <option value="sushi">Sushi</option>
  <option value="burger">Burger</option>
</select>

Tạo một danh sách chọn màu sắc:

<label for="color">Chọn màu sắc:</label>
<select id="color" name="color" required>
  <option value="red">Đỏ</option>
  <option value="green">Xanh lá</option>
  <option value="blue" selected>Xanh dương</option>
</select>

Tạo một danh sách chọn nhiều tùy chọn cùng một lúc:

<label for="fruits">Chọn các loại trái cây:</label>
<select id="fruits" name="fruits" multiple>
  <option value="apple">Táo</option>
  <option value="banana">Chuối</option>
  <option value="orange">Cam</option>
  <option value="mango">Xoài</option>
</select>

Tạo một danh sách chọn với nhóm tùy chọn:

<label for="cars">Chọn hãng xe:</label>
<select id="cars" name="cars">
  <optgroup label="Hãng xe ô tô">
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
    <option value="toyota">Toyota</option>
  </optgroup>
  <optgroup label="Hãng xe máy">
    <option value="honda">Honda</option>
    <option value="yamaha">Yamaha</option>
  </optgroup>
</select>

Các ví dụ trên chỉ là một số ví dụ cơ bản về sử dụng thẻ <select> trong HTML, bạn có thể tạo ra nhiều kiểu select khác nhau tùy thuộc vào nhu cầu của bạn. Ví dụ:

Tạo một danh sách chọn năm sinh
Tạo một danh sách chọn thành phố
Tạo một danh sách chọn giới tính
Tạo một danh sách chọn loại sản phẩm

Để tương tác với select bạn có thể sử dụng javascript hoặc các framework như jQuery để làm việc với select element.

Có thể sử dụng thuộc tính và sự kiện của javascript để tương tác với select element như lấy giá trị đã chọn, thay đổi giá trị, thay đổi trạng thái, v.v.

Tự học html

Select trong html

Một số thuộc tính của select trong html

Một số ví dụ về select trong html

Trả lời Hủy