Tutorial HTML <optgroup>
HTML optgroup Tag - belajar html optgroup. Element
optgroup mempunyai definisi sebagai option grup, jadi element html <optgroup> ini mempunyai fungsi sebagai pembungkus dari element <option>.
Contoh HTML <optgroup>
<select>
<optgroup label="Font-size pixel">
<option value="13px">13px</option>
<option value="14px">14px</option>
<option value="15px">15px</option>
</optgroup>
<optgroup label="Font-size Percent">
<option value="100%">100%</option>
<option value="150%">150%</option>
<option value="200%">200%</option>
</optgroup>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<select>
<optgroup label="Font-size pixel">
<option value="13px">13px</option>
<option value="14px">14px</option>
<option value="15px">15px</option>
</optgroup>
<optgroup label="Font-size Percent">
<option value="100%">100%</option>
<option value="150%">150%</option>
<option value="200%">200%</option>
</optgroup>
</select>
</body>
</html>
Attribute HTML <optgroup>
labelAttribut label dalam penggunaannya pada html
<optgroup> berfungsi sebagai label atau judul dari element yang berada didalam element <optgroup> itu sendiri.Contoh :
<select>
<optgroup label="Hoby Anda">
<option value="music">Musik</option>
<option value="olahraga">Olahraga</option>
<option value="membaca">Membaca</option>
</optgroup>
<optgroup label="Jumlah Saudara">
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
<option value="3-15">Lebih dari Tiga</option>
</optgroup>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<select>
<optgroup label="Hoby Anda">
<option value="music">Musik</option>
<option value="olahraga">Olahraga</option>
<option value="membaca">Membaca</option>
</optgroup>
<optgroup label="Jumlah Saudara">
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
<option value="3-15">Lebih dari Tiga</option>
</optgroup>
</select>
</body>
</html>
disabledAttribute
disabled jika digunakan pada html <optgroup> maka element yang berada didalamnya akan menjadi tidak berfungsiAttribute ini bersifat boolean, yang artinya nilai atau value dari attribute ini bisa disebutkan maupun tidak
Contoh :
<select>
<optgroup label="Hoby Anda">
<option value="music">Musik</option>
<option value="olahraga">Olahraga</option>
<option value="membaca">Membaca</option>
</optgroup>
<optgroup label="Jumlah Saudara" disabled="disabled">
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
<option value="3-15">Lebih dari Tiga</option>
</optgroup>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<select>
<optgroup label="Hoby Anda">
<option value="music">Musik</option>
<option value="olahraga">Olahraga</option>
<option value="membaca">Membaca</option>
</optgroup>
<optgroup label="Jumlah Saudara" disabled="disabled">
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
<option value="3-15">Lebih dari Tiga</option>
</optgroup>
</select>
<p>
Pilihan untuk jumlah saudara, mempunyai sifat disabled
</p>
</body>
</html>
Global Attributes:
Element
<optgroup> mencakup Global Attributes HTML.
Event Attributes:
Element
<optgroup> mencakup Event Attributes HTML.
Browser Support :
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Default CSS :
Browser yang support dengan element
<optgroup>, mempunyai nilai default :/* tidak ada */
Maksudnya tidak ada adalah tiap tiap browser akan membawa gaya tampilan sendiri-sendiri untuk element ini