Thẻ HTML <select> được sử dụng để tạo danh sách tùy chọn thả xuống, xuất hiện khi người dùng nhấp vào phần tử biểu mẫu và nó cho phép chọn một trong các tùy chọn.
Thẻ <option> được sử dụng để xác định các tùy chọn có thể có để chọn. Thẻ được đưa vào thẻ <select> .
Tùy chọn đầu tiên từ danh sách các tùy chọn được chọn theo mặc định. Để thay đổi một tùy chọn được xác định trước, thuộc tính đã chọn (selected) được sử dụng.
Thẻ <optgroup> được sử dụng để nhóm một số tùy chọn thành một nhóm. Nội dung của <optgroup> trông giống như tiêu đề được in đậm.
Hình thức danh sách phụ thuộc vào thuộc tính size , thuộc tính này chỉ định chiều cao của danh sách. Chiều rộng của danh sách phụ thuộc vào chiều dài của văn bản bên trong <option>. Chiều rộng cũng có thể được điều chỉnh bằng các kiểu CSS .
Thẻ <select> khó tạo kiểu với CSS hiệu quả . Nếu bạn cố gắng sửa chúng có thể làm ảnh hưởng đến các phần nhất định của một phần tử. Và các thuộc tính của <select> không cho kết quả ổn định trên các trình duyệt. Cấu trúc bên trong của thẻ <select> rất phức tạp và khó kiểm soát. Để có được toàn quyền kiểm soát, bạn cần một thư viện với các widget biểu mẫu tạo kiểu tốt hơn hoặc một menu thả xuống sử dụng các phần tử.
1. Cú pháp
Thẻ <select> đi theo từng cặp. Nội dung được viết giữa thẻ mở (<select>) và thẻ đóng (</select>).
Ví dụ về thẻ <seclect>:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ seclect với thẻ optgruop trong HTML</title>
</head>
<body>
<select aria-label="Books nad Snippets">
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”wvGomKr” default_tab=”html,result” user=”davidkhai”]See the PenwvGomKrby DavidKhai (@davidkhai) on
CodePen
.[/codepen_embed]
Ví dụ về thẻ seclect với thẻ optgruop
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ seclect với thẻ optgruop trong HTML</title>
</head>
<body>
<select aria-label="Books nad Snippets">
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”WNwozrz” default_tab=”html,result” user=”davidkhai”]See the PenWNwozrz by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
Trong ví dụ này, thẻ được sử dụng để tập hợp các tùy chọn thành các nhóm
Ví dụ về thẻ select với thẻ form
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ select với thẻ form</title>
</head>
<body>
<p>Máy bay khởi hành:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports">
<datalist id="airports">
<option value="Berlin">
<option value="Los Angeles">
<option value="Moscow">
<option value="Paris">
</datalist>
<input type="submit" value="Xác nhận">
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”mdPOxzq” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/mdPOxzq’>mdPOxzq</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
2. Các thuộc tính
| Thuộc tính | Giá trị | Sự miêu tả |
|---|---|---|
| autofocus | autofocus | Xác định rằng danh sách phải được tập trung sau khi tải trang. |
| disabled | disabled | Cho biết danh sách bị vô hiệu hóa, người dùng không thể tương tác với nó. |
| form | form_id | Xác định dạng mà phần tử được kết nối với. Không được hỗ trợ trong Firefox. |
| multiple | multiple | Cho biết có thể chọn nhiều tùy chọn. Phương pháp chọn nhiều hơn một tùy chọn phụ thuộc vào hệ điều hành. Trong Windows, bạn cần nhấn nút CTRL, trong Mac nút CMD. |
| name | name | Xác định tên cho menu thả xuống. Nó có thể được sử dụng để truy cập dữ liệu của biểu mẫu sau khi nó đã được gửi đi hoặc để liên kết đến phần tử JavaScript. |
| required | required | Chỉ ra rằng việc lựa chọn một tùy chọn là bắt buộc. |
| size | number | Cho biết số lượng các tùy chọn trong danh sách thả xuống. Nếu giá trị của thuộc tính “size” lớn hơn 1 và nhỏ hơn tổng số tùy chọn trong danh sách, trình duyệt sẽ tự động thêm cuộn để cho biết rằng có nhiều tùy chọn hơn để xem. |
3. Làm cách nào để tạo kiểu cho thẻ <select>
Các thuộc tính phổ biến để thay đổi trực quan văn bản trong thẻ <select>:
- Thuộc tính CSS font-style thiết lập kiểu phông chữ. bình thường | chữ nghiêng | xiên xiên | ban đầu | thừa kế.
- Thuộc tính CSS font-family chỉ định danh sách ưu tiên gồm một hoặc nhiều phông chữ hoặc chung cho phần tử đã chọn.
- Thuộc tính CSS font-size đặt kích thước của phông chữ.
- Thuộc tính CSS font-weight xác định xem phông chữ nên đậm hay dày.
- Thuộc tính CSS text-transform kiểm soát cách viết hoa và viết thường cho văn bản.
- Thuộc tính CSS text-decoration chỉ định trang trí được thêm vào văn bản và là thuộc tính viết tắt text-decoration-line, text-decoration-color, text-decoration-style…
Tô màu văn bản trong thẻ <select>:
- Thuộc tính CSS color mô tả màu của nội dung văn bản và trang trí văn bản.
- Thuộc tính CSS background-color đặt màu nền của một phần tử.
Các kiểu bố cục văn bản cho thẻ <select>:
- Thuộc tính CSS text-indent chỉ định thụt lề của dòng đầu tiên trong một khối văn bản.
- Thuộc tính CSS text-overflow chỉ định cách báo hiệu nội dung bị tràn không được hiển thị cho người dùng.
- Thuộc tính CSS white-space chỉ định cách xử lý khoảng trắng bên trong một phần tử.
- Thuộc tính CSS word-break chỉ định vị trí các dòng sẽ được ngắt.
Các thuộc tính khác đáng xem xét cho thẻ <select>:
- Thuộc tính CSS text-shadow thêm bóng vào văn bản.
- Thuộc tính CSS text-align-last đặt căn chỉnh của dòng cuối cùng của văn bản.
- Thuộc tính CSS line-height chỉ định chiều cao của một dòng.
- Thuộc tính CSS letter-spacing xác định khoảng cách giữa các chữ cái / ký tự trong một văn bản.
- Thuộc tính CSS word-spacing đặt khoảng cách giữa các từ.
