HTML optgroup tag | belajar <optgroup> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML optgroup tag. Tutorial dan panduan mengenai element <optgroup>...</optgroup> yang digunakan untuk meng-grup beberapa opsi dari daftar pilihan yang akan diberikan. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <optgroup>.

Deskripsi
Penjelasan HTML optgroup

HTML <optgroup> element digunakan untuk mengelompokkan beberapa item (option) didalam daftar pilihan (<select> element). Kelompok (group) dapat diberi label tertentu dengan menggunakan attribute label.

Penulisan element <optgroup> harus terletak secara langsung didalam element <select>, dan element <option> terletak langsung didalam element <optgroup>.

Attributes
Atribut HTML Tag <optgroup>

disabled

Menunjukkan bahwa grup opsi (option-group) tersebut tidak difungsikan (tidak dapat diseleksi).

Value: disabled

label

Digunakan untuk penamaan grup, melabeli setiap grup dengan nama tertentu.

Value: teks

Global Attributes
Atribut Secara Global (Keseluruhan)

<optgroup> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<optgroup> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <optgroup> element

Contoh 1
HTML 
<select>
  <optgroup label="Ikan Air Tawar">
    <option>Lele</option>
    <option>Mas</option>
  </optgroup>
  <optgroup label="Ikan Air Asin">
    <option>Teri</option>
    <option>Tongkol</option>
  </optgroup>
</select>
Contoh 2

Contoh <optgroup> dalam sebuah form.

HTML 
<form action="voting_ikan.php" method="get">
  <p>Ikan apa yang menurut Anda paling enak dimakan?</p>
  <label>Ikan Favorit:
    <select name="ikan">
      <optgroup label="Ikan Air Tawar">
        <option value="lele">Ikan Lele</option>
        <option value="mas">Ikan Mas</option>
      </optgroup>
      <optgroup label="Ikan Air Asin">
        <option value="teri">Ikan Teri</option>
        <option value="tongkol">Ikan Tongkol</option>
      </optgroup>
    </select>
  </label>
</form>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML optgroup tag</title>
    <style>

    </style>
  </head>
  <body>
    <form action="voting_ikan.php" method="get">
      <p>Ikan apa yang menurut Anda paling enak dimakan?</p>
      <label>Ikan Favorit:
        <select name="ikan">
          <optgroup label="Ikan Air Tawar">
            <option value="lele">Ikan Lele</option>
            <option value="mas">Ikan Mas</option>
          </optgroup>
          <optgroup label="Ikan Air Asin">
            <option value="teri">Ikan Teri</option>
            <option value="tongkol">Ikan Tongkol</option>
          </optgroup>
        </select>
      </label>
    </form>
  </body>
</html>
SHARE
Previous Article Next Article