06/04/2021, 14:49
hẻ optgroup trong HTML - Các thẻ HTML
Code RUN <select> <optgroup label="PHP Framework"> <option>Laravel</option> <option>Zend 2</option> </optgroup> <optgroup label="js Framework"> <option>Jquery</option> <option>Nodejs</opti ...
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.
Cách sử dụng thẻ optgroup
Ví dụ: sử dụng thẻ optgroup để nhóm các framework của cùng một ngôn ngữ.
Code
RUN
<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.
Các thuộc tính của thẻ optgroup
- 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 disableb để vô hiệu nhóm js Framework.
Code
RUN
<!DOCTYPE html>
<html>
<head>
<title>Học lập trình miễn phí tại Zaidap.com.net</title>
<meta charset="utf-8">
</head>
<body>
<h1>Học lập trình miễn phí tại Zaidap.com.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
Tham khảo: w3schools.com
Nguồn: Zaidap.com.net
