Menu
CoddyTech

Menu Dropdown

Termasuk bagian Dasar-Dasar dalam perjalanan HTML di Coddy. Pelajaran 43 dari 60.

Dalam HTML, menu tarik-turun adalah daftar item yang muncul saat pengguna mengeklik atau mengarahkan kursor ke suatu elemen. Menu tarik-turun umum digunakan untuk menampilkan daftar pilihan dengan cara yang ringkas. Untuk membuat menu tarik-turun, kamu menggunakan tag <select> bersama tag <option> untuk setiap item.

Berikut sintaks dasar untuk membuat dropdown di HTML:

<select name="dropdown">
	<option value="value1">Option 1</option>
	<option value="value2">Option 2</option>
	<option value="value3">Option 3</option>
</select>
  • <select>: Tag yang mendefinisikan menu tarik-turun.
  • name: Atribut yang memberi nama pada dropdown, yang digunakan untuk mengidentifikasi nilai yang dipilih saat formulir dikirim.
  • <option>: Tag yang mendefinisikan item dalam list dropdown.
  • value: Atribut yang menentukan nilai yang terkait dengan opsi. Nilai ini dikirim ke server saat formulir dikirim.
  • Option text: Teks yang terlihat di daftar dropdown untuk setiap opsi.

Berikut contoh cara membuat dropdown dengan tiga opsi:

<select name="colors">
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
</select>

Dalam contoh ini, kita memiliki menu tarik-turun dengan nama "colors" dan tiga opsi: Merah, Hijau, dan Biru. 

challenge icon

Tantangan

Mudah

Buat dokumen HTML yang menyertakan form dengan menu dropdown. Form tersebut harus memiliki elemen berikut:

  1. Dropdown dengan nama "fruits".
  2. Dropdown harus memiliki empat opsi dengan nilai dan teks berikut:
  • Nilai: "apple", Teks: "Apple"
  • Nilai: "banana", Teks: "Banana"
  • Nilai: "orange", Teks: "Orange"
  • Nilai: "grape", Teks: "Grape"

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <!-- Tulis kodemu di sini -->
    </body>
</html>
quiz iconUji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Dasar-Dasar

Latihan sendiri: Playground Web