HTML element tag <optgroup> (option group) merupakan tag pada HTML yang digunakan untuk mengelompokkan butir pilihan (option) di dalam suatu daftar pilihan agar menjadi lebih teratur. HTML element tag <optgroup> akan memudahkan pengguna untuk memilih pilihan jika pilihan yang disajikan memiliki jumlah yang banyak. Element <optgroup> tidak memiliki pengaruh terhadap nilai data yang akan dikirimkan menuju server. Elemen tag ini lebih berperan dalam menata pilihan yang ada agar terlihat lebih rapi dan teroganisir.
HTML element tag <optgroup> menginduk pada element tag <select>. Element tag ini tidak dapat berdiri sendiri di dalam suatu formulir.
HTML element tag <optgroup> akan memecah kelompok butir-butir pilihan menjadi seksi-seksi pilihan yang lebih kecil. Di dalam seksi ini diberikan nilai label yang akan muncul sebagai nilai pertama dari opsi namun pengguna tidak akan dapat melakukan seleksi terhadap opsi tersebut.
Penggunaan Element Tag <optgroup>
Penggunaan element tag <optgroup> dilakukan setelah HTML element tag <select> diciptakan. Di dalam <optgroup> akan diisi dengan option sesuai dengan kategori dan kriterianya.
Berikut contoh membuat pilihan propinsi dengan dua buah <optgroup> dalam mengelompokkan butir pilihan (opsi) :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag OPTGROUP</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag OPTGROUP</h1>
<form action="#" method="post">
<label for="propinsi">Pilih Propinsi :</label>
<select name="propinsi" id="propinsi">
<optgroup label="Pulau Jawa">
<option value="banten">Banten</option>
<option value="dki jakarta">DKI Jakarta</option>
<option value="jawa barat">Jawa Barat</option>
<option value="jawa tengah">Jawa Tengah</option>
<option value="jawa timur">JawaTimur</option>
<option value="yogyakarta">Yogyakarta</option>
</optgroup>
<optgroup label="Pulau Sumatera">
<option value="lampung">Lampung</option>
<option value="sumatera utara">Sumatera Utara</option>
<option value="sumatera barat">Sumatera Barat</option>
<option value="jambi">Jambi</option>
<option value="riau">Riau</option>
<option value="aceh">Aceh</option>
</optgroup>
</select>
</form>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan sebagai berikut :
Berikut contoh lengkap penggunaan elemen <optgroup> pada HTML :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag OPTGROUP</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag OPTGROUP</h1>
<form action="#" method="post">
<p>
<label for="negara">Pilih Negara :</label>
<select name="negara" id="negara">
<optgroup label="Asia">
<option value="china">China</option>
<option value="jepang">Jepang</option>
<option value="korea">Korea</option>
<option value="indonesia">Indonesia</option>
<option value="thailand">Thailand</option>
<option value="singapura">Singapura</option>
</optgroup>
<optgroup label="Amerika">
<option value="amerika serikat">Amerika Serikat</option>
<option value="kanada">Kanada</option>
<option value="meksiko">Meksiko</option>
<option value="chili">Chili</option>
<option value="brasil">Brasil</option>
<option value="paraguay">Paraguay</option>
<option value="uruguay">Uruguay</option>
</optgroup>
<optgroup label="Afrika">
<option value="mesir">Mesir</option>
<option value="somalia">Somalia</option>
<option value="uganda">Uganda</option>
<option value="sudan">Sudan</option>
<option value="kenya">Kenya</option>
<option value="nigeria">Nigeria</option>
<option value="kongo">Kongo</option>
</optgroup>
<optgroup label="Afrika">
<option value="inggris">Inggris</option>
<option value="denmark">Denmark</option>
<option value="belanda">Belanda</option>
<option value="austria">Austria</option>
<option value="italia">Italia</option>
<option value="jerman">Jerman</option>
<option value="portugal">Portugal</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" value="Kirim">
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan :
Atribut Khusus
Elemen <optgroup> mempunyai atribut penting yaitu atribut label yang merupakan nilai yang harus disertakan (required) untuk memberi label pada setiap kelompok butir-butir pilihan.
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <optgroup> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <optgroup> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <optgroup> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <optgroup> pada HTML :
CSS
1
/* Tidak ada */
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
