Wednesday, November 26, 2014

Tag optgroup HTML

Tag <optgroup> digunakan untuk mengelompokkan jenis data per grup di dalam tag <select>. Tag select digunakan untuk membuat daftar pilihan dalam combox box, namun tidak per grup. Tag optgroup membuat data tampil per jenis. Misalnya, nama buah, nama sayur, nama kacang-kacangan.

Atribut tag optgroup:
label = nama (jenis) grup.
option = nama (nilai) data daftar grup.
disabled = pilihan tidak diaktifkan.

Contoh: optgroup.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag optgroup html</title>
        </head>
    <body>
    <select>
      <optgroup label="Sayuran">
        <option>Bayam</option>
        <option>Daun ubi</option>
        <option>Kol</option>
      </optgroup>
      <optgroup label="Buah">
        <option>Pisang</option>
        <option>Mangga</option>
        <option>Pepaya</option>
      </optgroup>
      <optgroup label="Kacang-kacangan">
        <option>Kacang hijau</option>
        <option>Kacang tanah</option>
        <option>Kacang kedelai</option>
      </optgroup>
      <optgroup label="Lainnya" disabled>
        <option>Lainnya 1</option>
        <option>Lainnya 2</option>
        <option>Lainnya 3</option>
      </optgroup>
    </select>
    </body>
</html>

Output:

Pilihan Lainnya dinonaktifkan.
Ket: Kode html di atas menggunakan 4 grup dengan masing-masing 3 nilai per grup. Jika ingin suatu grup dinonaktifkan, maka tambahan disabled setelah nama grup. Perhatikan potongan kode <optgroup label="Lainnya" disabled>. Selamat mencoba!

Referensi tulisan:
  1. <optgroup>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 27 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)