Định nghĩa và sử dụng
- Tag <optgroup> dùng để nhóm các tùy chọn (option) trong danh sách chọn lựa select (danh sách thả xuống).
- Nếu có một danh sách tùy chọn dài, việc nhóm các tùy chọn cùng loại sẽ dễ dàng quản lý và sử dụng hơn.
- Sử dụng thuộc tính bắt buộc "label" để đặt tiêu đề cho các nhóm tùy chọn.
Sự khác nhau giữa HTML và XHTML
| HTML4.01 | XHTML1.0 | XHTML1.1 |
|---|---|---|
| Không có sự khác biệt | ||
Cấu trúc
Tag <optgroup> được viết bên trong tag <select> và bao ngoài các tag <option>.
<select>
<optgroup>
<option></option>
<option></option>
<option></option>
</optgroup>
</select>
Ví dụ
Html viết:
<select>
<optgroup label="Danh sách số">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 03</option>
</optgroup>
<optgroup label="Danh sách chữ">
<option>Danh sách A</option>
<option>Danh sách B</option>
<option>Danh sách C</option>
</optgroup>
</select>
Hiển thị trình duyệt:
Trình duyệt hỗ trợ
<optgroup> được hỗ trợ trong đa số các trình duyệt.
Thuộc tính
Cách sử dụng: <optgroup thuoctinh="giatri"></optgroup>
Thuộc tính bắt buộc
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| label | Text | label="optLabel" | tiêu đề mô tả cho nhóm tùy chọn. |
Thuộc tính tùy chọn
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| disabled | disabled | disabled="disabled" | Xác định danh sách thả xuống không hiển thị. |
Thuộc tính tổng quát (xem thêm)
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| class | Tên class | class="section" | Tên class |
| dir | rtl ltr |
dir="rtl" | Xác định hướng văn bản cho các nội dung trong một thành phần. |
| id | Tên id | id="layout" | Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML |
| lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần. |
| style | Kiểu định dạng | style="color: red" | Xác định một định dạng cho một thành phần. |
| title | Text | title="Đây là title" | Xác định thêm thông tin cho thành phần. |
| xml:lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML. |
Thuộc tính sự kiện
Không được hỗ trợ trong DTD Strict
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| onclick | Code script | onclick="code" | Script chạy khi click chuột. |
| ondblclick | Code script | ondblclick="code" | Script chạy khi double click chuột. |
| onmousedown | Code script | onmousedown="code" | Script chạy khi button chuột được nhấn. |
| onmousemove | Code script | onmousemove="code" | Script chạy khi di chuyển con trỏ chuột. |
| onmouseout | Code script | onmouseout="code" | Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần. |
| onmouseover | Code script | onmouseover="code" | Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần. |
| onmouseup | Code script | onmouseup="code" | Script chạy khi button chuột được thả ra. |
| onkeydown | Code script | onkeydown="code" | Script chạy khi nút trên bàn phím được nhấn. |
| onkeypress | Code script | onkeypress="code" | Script chạy khi nút trên bàn phím được nhấn và thả ra. |
| onkeyup | Code script | onkeyup="code" | Script chạy khi nút trên bàn phím được thả ra. |