Kita sebelumnya sudah mempelajari input pilihan. HTML memiliki 2 jenis input pilihan. Kita sudah mempelajari 1 jenis sebelumnya, yaitu: radio/pilihan. Kita hari ini akan menambahkan pengetahuan mengenai input pilihan berupa menu. Jenis pilihan menggunakan radio dan menu, keduanya dapat digunakan dengan fungsi yang sama. Namun, tampilan kedua jenis input ini berbeda. Untuk mengenal lebih jauh mengenai input menu, mari kita mulai tutorial HTML – input menu

Tutorial HTML – Input Menu – Bagian 15 – 7 (Bahasa Indonesia)

Pada tutorial ini kita akan kembali mempelajari tag baru. Dalam tutorial ini tidak akan menggunakan tag input. Kita akan menggunakan tag select dan tag option. Tag select digunakan untuk memulai sebuah menu. Tag option digunakan untuk menyatakan setiap nilai dan tampilan opsi.

Sekarang kita akan menambahkan sebuah kolom isian untuk mengisi kuesioner di dalam form registrasi. Kita anggap saja kita ingin mengetahui bagaimana pengunjung website kita mengetahui keberadaan webiste kita. Dalam hal ini, kita harus memberikan sebuah input pilihan kepada pengunjung website kita dan kita ingin menampilkan pilihan dalam bentuk menu. Sekarang kita harus menambahkan tag select ke dalam dokumen HTML untuk menampilkan menu. Silahkan perhatikan kode berikut ini:

 

Silahkan perhatikan hasil tampilan dari kode di atas.

Tutorial HTML - Input Menu - Select - 1

Kode di atas akan menambahkan menu “cara Anda mengetahui website ini”. Namun, kode di atas masih tidak cukup karena kode di atas hanya akan menampilkan menu kosong tanpa opsi pilihan di dalamnya.

Opsi Pilihan

Seperti yang saya jelaskan sebelumnya, kita akan menggunakan tag select dan tag option. Kita sudah menggunakan tag select sebelumnya dan kita belum menggunakan tag option. Sekarang kita akan menggunakan tag option untuk menambahkan opsi pilihan di dalamnya. Tag option memiliki atribut value untuk menampung nilai di dalamnya. Namun, tag option tidak dapat menampilkan value seperti input tulisan. Kita tetap harus menuliskan tulisan yang akan ditampilkan di dalam tag option tersebut. Berikut ini adalah contoh kode HTML penggunaan tag option.

 

Saya telah menambahkan beberapa tag option ke dalam tag select. Tambahan tag option akan menambahkan opsi pilihan pada menu tersebut seperti tampilan berikut ini:

Tutorial HTML - Input Menu - Select - 2

Pilihan Awal

Sama seperti input pilihan, kita dapat menetapkan sebuah pilihan awal untuk ditampilkan pada input menu. Tapi, kita tidak bisa memberikan atribut checked seperti pada input pilihan karena input menu tidak menggunakan tag input melainkan tag select.

Pada input menu, kita harus menyisipkan sebuah atribut selected pada tag option pilihan yang ingin kita tetapkan sebagai pilihan awal. Bila kita memberikan banyak atribut selected pada option pilihan maka pilihan yang terpilih adalah pilihan yang terakhir yang diberikan atribut selected. Sebaiknya, kita hanya memberikan atribut selected pada salah satu pilihan yang ingin kita tampilkan pada awal halaman dibuka. Saya akan berikan contoh dalam kode HTML berikut ini:

 

Kode HTML di atas akan menampilkan pilihan ke-2 sebagai pilihan awal. Saya hanya meletakkan atribut selected pada tag option ke-2. Berikut ini adalah contoh tampilannya:

Tutorial HTML - Input Menu - Select - 3

Penggunaan tag select dan option terlihat lebih susah dibandingkan tag input karena harus menggunakan 2 buah tag. Namun, bila Anda sudah terbiasa hal ini akan terlihat mudah. Tutorial input menu cukup sampai di sini dan kita akan berlanjut ke tutorial input tombol.

Tutorial HTML – Input Tombol – Bagian 15 – 8 (Bahasa Indonesia)