tRikSonic
Tema

HTML optgroup Tag

Terakhir diperbarui : 23 Mei 2018 - 09.15

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>.
background html

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>

label
Attribut 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>
disabled
Attribute disabled jika digunakan pada html <optgroup> maka element yang berada didalamnya akan menjadi tidak berfungsi
Attribute 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 :

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

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
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.