Kita langsung mulai praktek coding ya. Saya telah membuat file baru dengan nama dropdown.html. Pertama kita tambahkan dahulu kode boilerplate. Lalu kita tambahkan judul Belajar Form.

Pada bagian body, kita tambahkan header satu dengan judul Belajar Form. Lalu kita tambahkan tag form. Di dalam tag form, kita tambahkan label dengan konten warna favorit. Kemudian kita tambahkan dua buah tag br. Dan kita tambahkan input dengan tipe submit.

Pertama kita akan mempelajari mengenai cara membuat dropdown. Dropdown bisa kita buat dengan menggunakan tag select. Sebagai contoh saya ketikan tag select dibawah label. Tag select harus dilengkapi dengan tag penutupnya ya.

Kita coba lihat hasilnya di browser. Sekarang kita sudah memiliki sebuah dropdown, namun belum ada isinya. Untuk menambahkan isi, kita bisa menggunakan tag option untuk setiap pilihan yang akan tersedia di dalam dropdown. Sebagai contoh, saya akan tambahkan option Merah, option Kuning, option Hijau.

Kita lihat hasilnya di browser. Sekarang kalau kita klik dropdownnya, sudah ada 3 buah pilihan merah, kuning, hijau. Namun kalau kita tekan tombol submit, masih belum ada nilai yang dikirim ke server ya. Karena kita masih perlu menglengkapi attribute dari tag Select. Sekarang kita tambahkan attribute ID=”warna” dan Name=”warna”. Lalu pada label diatasnya kita tambahkan for=”warna”.

Kita tes lagi di browser. Sekarang kalau teks Warna Favorit kita klik, maka browser akan memindahkan fokus ke dropdown disampingnya. Kemudian kalau kita coba pilih warna Kuning, dan menekan tombol submit. Maka kita bisa melihat bahwa browser mengirimkan nilai warna=Kuning ke server.

Jadi nilai yang dikirimkan ke server akan sama persis dengan konten yang berada di dalam tag option tersebut. Ada kalanya kita ingin mengatur agar nilai yang dikirim ke server berbeda dari nilai pada konten tag option. Misalnya kita ingin agar nilai merah adalah 1, nilai kuning adalah 2 dan nilai hijau adalah 3. Maka kita bisa mengaturnya dengan cara menambahkan attribute value pada masing-masing option. Misalnya pada option merah, kita tambahkan attribute value=”1”. Lalu kita tambahkan juga attribute value ini ke kuning dan hijau, lalu kita atur nilainya.

Dan sekarang kita cobakan lagi di browser. Kita pilih warna Kuning. Dan kita lihat nilai yang dikirimkan ke server adalah 2. Jadi apabila kita menggunakan attribute value pada option, maka nilai yang akan dikirimkan ke server adalah nilai pada value.

Apabila terdapat banyak pilihan di dalam dropdown, maka ada baiknya kita melakukan grouping agar pengunjung situs kita lebih mudah untuk memilih. Sebagai contoh, kita akan menanyakan pengunjung menu apakah yang menjadi favoritnya, dengan pilihan nasi goreng, kwetiaw goreng, bihun goreng, jus jeruk, teh manis, dan air mineral. Dari keenam pilihan ini, kita akan membuat 2 buah group, yaitu makanan dan minuman.

Kita tambahkan dahulu label baru setelah form, dengan attribute for=”menu” dan kontennya Menu Favorit. Lalu kita buat tag select baru, kita tambahkan attribute id=”menu” dan name=”menu”. Kita tambahkan option, misalnya nilai 1 adalah Nasi Goreng. Selanjutnya 2 Kwetiaw Goreng, 3 Bihun Goreng, 4 Jus Jeruk, 5 Teh Manis dan terakhir 6 Air Mineral. Lalu kita tambahkan 2 buah tag br setelah tag penutup select.

Kita lihat hasilnya di browser. Kita sudah mendapatkan sebuah dropdown baru, yang isinya ada 6 buah pilihan. Nah, sekarang kita akan melakukan grouping, dimana 3 pilihan pertama adalah Makanan, sedangkan 3 pilihan berikutnya adalah Minuman.

Caranya adalah dengan menggunakan tag optgroup, singkatan dari option group. Setelah tag select, kita tambahkan optgroup pertama dengan attribute label=”Makanan”. Lalu kita pindahkan 3 option pertama ke dalam tag optgroup. Lalu kita buat lagi optgroup kedua dengan attribute label=”Minuman”, dan kita pindahkan lagi 3 option terakhir ke dalam tag optgroup kedua.

Kita lihat hasilnya di browser. Apabila dropdown kita klik, maka sekarang pilihannya sudah ada grouping menjadi Makanan dan Minuman. Perhatikan disini bahwa tag optgroup, dalam hal ini tulisan Makanan dan Minumannya, tidak bisa dipilih ya. Jadi pengunjung kita hanya bisa memilih dari tag option.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.