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.
Tantangan
MudahBuat dokumen HTML yang menyertakan form dengan menu dropdown. Form tersebut harus memiliki elemen berikut:
- Dropdown dengan nama "fruits".
- 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>Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar
1Dasar-Dasar HTML
Apa itu HTML?Struktur Dasar HTMLTag dan ElemenTag Bersarang dan Tag PenutupKomentar dalam HTML7Halaman Profil Pribadi
Gambaran Umum ProyekBagian Header2Teks dan Pemformatan
JudulParagrafPindah BarisTeks Tebal dan MiringTeks Tebal dan Miring LagiRangkuman: Pemformatan8Formulir dan Input Bagian 1
Dasar FormulirInput TeksAtribut InputKolom Kata SandiLabel untuk InputUlasan, Formulir Dasar11Halaman Pendaftaran Acara
Gambaran Umum ProyekBagian Header9Formulir dan Input Bagian 2
Tombol RadioKotak CentangMenu DropdownTombolTombol dalam FormulirRangkuman, Formulir #1Rangkuman, Formulir #2Latihan sendiri: Playground Web