Thẻ optgroup trong HTML
Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ optgroup trong HTML, thẻ optgroup có chức năng nhóm các tùy chọn( option) có liên quan trong danh sách tùy chọn.
Nếu bạn có một dách sách bao gồm rất nhiều option thì việc nhóm các option có liên quan sẽ giúp cho người dùng dễ dàng xử lý hơn. Đó chính là công dụng của thẻ optgroup.
1. Cách sử dụng thẻ optgroup trong HTML
Ví dụ: Sử dụng thẻ optgroup để nhóm các framework của cùng một ngôn ngữ.
<select> <optgroup label="PHP Framework"> <option>Laravel</option> <option>Zend 2</option> </optgroup> <optgroup label="js Framework"> <option>Jquery</option> <option>Nodejs</option> </optgroup> </select>
Các Framework của php đã được nhóm vào PHP Framework, của javascript được nhóm vào js Framework. VIệc nhóm các tùy chọn này giúp cho việc lựa chọn dễ dàng hơn đối với người dùng.
Bài viết này được đăng tại [free tuts .net]
2. Các thuộc tính của thẻ optgroup
Sau đây là 2 thuộc tính thường được sử dụng nhất.
- disabled - vô hiệu hóa các tùy chọn nằm trong cặp thẻ optgroup.
- label - định rõ label cho nhóm optgroup.
Ví dụ: sử dụng thuộc tính disabled để vô hiệu nhóm js Framework.
<!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại freetuts.net</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại freetuts.net</h1> <select> <optgroup label="PHP Framework"> <option>Laravel</option> <option>Zend 2</option> </optgroup> <optgroup label="js Framework" disabled="disabled"> <option>Jquery</option> <option>Nodejs</option> </optgroup> </select> </body> </html>
Người dùng sẽ không thể chọn được các tùy chọn trong nhóm js Framework.
Trình duyệt hỗ trợ:
- Chrome
- Firefox
- IE
- Safari
- Opera
Trên là cách dùng cơ bản của thẻ optgroup trong HTML.