Pinned

Home / html / Membuat Menu Dropdown HTML Menggunakan Tag Optgroup

Membuat Menu Dropdown HTML Menggunakan Tag Optgroup

6/24/2021 09:21:00 PM
Tag optgroup pada HTML digunakan untuk menciptakan kelompok dari kategori opsional yang sama dalam drop down list. Tag ini dibutuhkan ketikan terdapat daftar panjang dari sekumpulan item yang tersedia.


2 Contoh Program Penggunaan Tag Optgroup pada HTML
Ilustrasi Tag Optgroup HTML

Sebelum memahami lebih dalam materi tentang Membuat Menu Dropdown HTML Menggunakan Tag Optgroup, terlebih dahulu pelajari materi tentang: Menampilkan Video dan Audio HTML Menggunakan Tag Object [klik], Menonaktifkan Script Kode HTML Menggunakan Tag Noscript [klik], dan Membuat Meta Deskripsi HTML Menggunakan Tag META [klik].

Sintak:
<optgroup>
<option>..</option>
...
</optgroup>

Atribut:
  • label: digunakan untuk menentukan label dari optgroup.
  • disabled: digunakan untuk mendisabled daftar option-group.


Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

HTML Tag Optgroup

</h2>

 

<select>

 

<optgroup 

label="Programming Languages">

 

<option value="C">

C

</option>

 

<option value="C++">

C++

</option>

 

<option value="Java">

Java

</option>

 

</optgroup>

 

<optgroup 

label="Scripting Language">

 

<option value="JavaScript">

JavaScript

</option>

 

<option value="PHP">

PHP

</option>

 

<option value="Shell">

Shell

</option>

 

</optgroup>

 

</select>

 

</body>

 

</html>

Output:

Blog Elfan

HTML Tag Optgroup



Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

HTML Tag Optgroup

</h2>

 

<select>

 

<optgroup 

label="Programming Languages">

 

<option value="C">

C

</option>

 

<option value="C++">

C++

</option>

 

<option value="Java">

Java

</option>

 

</optgroup>

 

<optgroup 

label="Scripting Language"

disabled>

 

<option value="JavaScript">

JavaScript

</option>

 

<option value="PHP">

PHP

</option>

 

<option value="Shell">

Shell

</option>

 

</optgroup>

 

</select>

 

</body>

 

</html> 

Output:

Blog Elfan

HTML Tag Optgroup


Artikel ini didedikasikan kepada: Hibatullah Nabil Gustiananda, Indah Fiyanti Putri, Laila Nur Janah, Lilik Dwi Setiyawan, dan Mohammad Faesal Febriandyono.

6 komentar:

  1. AnonimMinggu, 20 Juni 2021 pukul 16.43.00 WIB

    Apa yang dimaksud dengan optgroup pada html?

    BalasHapus
    Balasan
    1. AnonimMinggu, 20 Juni 2021 pukul 16.44.00 WIB

      Tag optgroup pada html digunakan untuk mengelompokkan opsi terkait dalam elemen select. Jika user memiliki daftar opsi yang panjang, maka dengan menggunakan optgroup maka penanganannya akan menjadi lebih mudah.

      Hapus
  2. AnonimMinggu, 20 Juni 2021 pukul 16.46.00 WIB

    Apakah optgroup dapat dibuat selectable?

    BalasHapus
    Balasan
    1. AnonimMinggu, 20 Juni 2021 pukul 16.46.00 WIB

      Elemen optgroup pada html tidak dapat dibuat menjadi selectable. Ini merupakan batasan spesifikasi HTML dan bukan batasan yang dapat diatasi oleh elemen tersebut. Jika user ingin membuat hirarki sebenarnya dari opsi yang dapat di-select, maka dapat menggunakan tag < option > atau juga bisa menggunakan kode style CSS.

      Hapus
  3. AnonimMinggu, 20 Juni 2021 pukul 16.49.00 WIB

    Bagaimana cara menyembunyikan pilihan seleksi pada html?

    BalasHapus
    Balasan
    1. AnonimMinggu, 20 Juni 2021 pukul 16.49.00 WIB

      Dapat dilakukan dengan menggunakan style atau modifikasi kode CSS pada html.

      Hapus

Hubungi admin melalui Wa : +62-896-2514-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -

Langganan: Posting Komentar ( Atom )