Tutorial Form HTML Part 10: Fungsi dan Cara Penggunaan Tag Select Form HTML
Halo Kawan-kawan,
Pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form) kita telah belajar menggunakan tag select, namun dalam tutorial kali ini saya akan membahasnya dengan lebih dalam beserta atribut-atribut tambahan yang bisa gunakan untuk tag select.
Fungsi Tag Select dalam pembuatan Form HTML
Tag select di dalam HTML digunakan untuk membuat objek form yang berupa list pilihan yang dapat dipilih oleh user. Biasanya tag select digunakan untuk “memaksa” user memilih salah satu dari pilihan yang tersedia. Pilihan ini telah didefenisikan pada saat form dibuat.
Pada penggunaan tag select ini, kita juga membutuhkan tag option sebagai “isi” dari tag select. Format dasar pembuatan select dalam HTML adalah sebagai berikut:
<select >
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
</select >
Anda tidak harus menggunakan tag select di dalam form HTML, namun bisa juga digunakan tanpa tag form. Akan tetapi jika digunakan diluar form, kita membutuhkan bantuan bahasa pemograman lain seperti javascript untuk memproses hasilnya.
Atribut name: Untuk Pemrosesan Tag Select
Atribut name untuk tag select digunakan sebagai identitas dari tag select tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di dalam tag select, bukan di dalam tag option. Berikut contoh penulisan atribut name untuk tag select:
<select name=”judul_pilihan”>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
</select >
Atribut value: Sebagai Nilai untuk Tag Option
Atribut value digunakan di dalam tag option. Nilai dari atribut inilah yang akan dikirimkan kedalam web server, sehingga disarankan menggunakan nilai yang mencerminkan pilihan user. Nilai dari value tidak harus sama dengan apa yang dilihat user. Berikut contoh penulisannya:
<select>
<option value="pil1">Pilihan 1</option>
<option value="pil2">Pilihan 2</option>
<option value="pil3">Pilihan 3</option>
</select>
Usahakan untuk memberi nilai value berupa nilai yang singkat namun bermakna sesuai dengan pilihan yang ditampilkan.
Atribut selected: Menampilkan Nilai Default dari Tag Select
Atribut selected digunakan pada tag option. Jika sebuah tag option mememiliki atribut selected, maka pada saat form ditampilkan, pilihan tag inilah yang akan tampil sebagai nilai awal dari select (nilai default). Nilai dari atribut ini adalah dirinya sendiri, sehingga penulisannya menjadi selected=“selected”. Berikut contoh penulisannya:
<select>
<option >Pilihan 1</option>
<option selected="selected">Pilihan 2</option>
<option>Pilihan 3</option>
</select>
Atribut Size: Menentukan Besar tampilan Select
Atribut size digunakan untuk menentukan besar dari tampilan tag select. Jika tidak ditulis, tag select memiliki nilai default size=”1″, sehingga hanya 1 pilihan yang “terlihat” ketika user memilih pilihan yang ada.
Namun jika anda menambahkan atribut size=”3″, maka pada saat form ditampilkan, tag select akan ditampilkan sebanyak 3 baris, bukan 1 baris seperti biasanya.
Atribut size ini umumnya digunakan apabila tag select dirancang untuk dapat dipilih dengan beberapa pilihan sekaligus. Untuk keperluan ini, atribut size biasanya di kombinasikan dengan atribut multiple yang akan kita bahas setelah ini.
Berikut contoh penulisan atribut size untuk tag select:
<select size="2">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
</select >
Pada saat penulisan artikel ini, saya mengunakan web browser mozilla firefox dan google chrome untuk pengujian. Untuk google chrome Versi 33 yang saya gunakan, jika kita membuat size=2, atau size=3, google chrome akan menampilkannya dengan 4 pilihan, bukan 2 atau 3 seperti yang seharusnya. Teteapi web browser mozilla firefox akan tetap menampilkannya secara normal. Perbedaan tampilan ini patut menjadi pertimbangan jika anda ingin menggunakan atribut size dalam membuat form.
Atribut Multiple: Untuk Memilih lebih dari 1 pilihan tag Select
Atribut multiple untuk tag select digunakan untuk memungkinkan user untuk dapat memilih lebih dari 1 nilai. Namun untuk dapat memilih lebih dari 1 nilai, user harus menekan tombol ctrl pada keyboard.
Atribut multiple akan lebih mudah digunakan jika ditambahkan atribut size. Satu-satunya nilai untuk atribut multiple ini adalah “multiple”. Berikut contoh penggunaan atribut multiple, dan dikombinasikan dengan atribut size:
<select size="3" multiple="multiple">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
</select >
penggunaan atribut multiple untuk memungkinkan user memilih lebih dari satu pilihan mungkin bukan ide yang buruk, tetapi tidak semua user paham cara men-klik sambil menahan tombol ctrl. Jika anda bermaksud membolehkan user memilih lebih dari 1 pilihan, pertimbangkan mengganti tag select dengan checkbox.
Atribut disabled: Menonaktifkan tag Select
Atribut disabled digunakan untuk membuat tag select tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal, misalkan sebuah pilihan select hanya dapat diisi ketika user telah mengisi form diatasnya.
Atribut disabled ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya atribut disabled untuk tag select HTML:
<select disabled="disabled">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
</select >
Selain digunakan untuk tag select, atribut disabled juga bisa digunakan untuk tag option. Ketika digunakan di dalam tag option, maka pilihan yang memiliki atribut disabled tidak akan bisa digunakan. berikut contoh penulisannya:
<select>
<option>Pilihan 1</option>
<option disabled="disabled">Pilihan 2</option>
<option>Pilihan 3</option>
</select>
Tag optgroup dan atribut label
Tag optgroup digunakan untuk membuat kelompok-kelompok pilihan. Jika list pilihan anda panjang, menggunakan tag optgroup akan memudahkan user dalam menentukan pilihan apabila telah dikelompokkan terlebih dahulu.
Atribut label diperlukan untuk menampilkan judul dari tag optgroup. Berikut contoh penulisan tag optgroup:
<select>
<optgroup label="Kelompok 1">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
<optgroup label="Kelompok 2">
<option>Pilihan 5</option>
<option>Pilihan 6</option>
<option>Pilihan 7</option>
</select>
Dalam penulisan tag optgroup, kita membutuhkan sebuah atribut, yakni atribut label yang berisi tulisan yang akan muncul untuk grup pilihan tersebut. Di dalam web browser, tag optgroup ini akan ditampilkan dalam huruf tebal (bold), namun user tidak dapat memilihnya karena fungsi tag ini memang hanya sebagai keterangan saja.
Atribut id dan class: CSS dan Javascript
Selain atribut name, value, selected, size, multipe dan disabled, anda juga bisa menggunakan atribut umum seperti id dan class dalam tag select. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.
Cara Penggunaan Tag Input select dalam Form HTML
Untuk merangkum seluruh contoh atribut dan tag select yang telah kita pelajari disini, saya akan membuat contoh cara penggunaannya di dalam form HTML:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Select HTML</title>
</head>
<body>
<h4>tag Select dengan atribut: name+value+selected:</h4>
<form name="form1" action="proses.php" method="get">
<select name="bulan_lahir">
<option value="jan">Januari</option>
<option value="feb">Februari</option>
<option value="mar" selected="selected">Maret</option>
<option value="apr">April</option>
<option value="mei">Mei</option>
<option value="jun">Juni</option>
<option value="jul">Juli</option>
</select>
</form>
<h4>tag Select dengan atribut: name+value+selected+size=3:</h4>
<form name="form2" action="proses.php" method="get">
<select name="bulan_lahir" size="3">
<option value="jan">Januari</option>
<option value="feb">Februari</option>
<option value="mar">Maret</option>
<option value="apr">April</option>
<option value="mei">Mei</option>
<option value="jun">Juni</option>
<option value="jul" selected="selected">Juli</option>
</select>
</form>
<h4>tag Select dengan atribut: name+value+selected+size=6+multiple:</h4>
Tahan tombol crtl pada saat memilih > 1 pilihan.
<br />
<form name="form2" action="proses.php" method="get">
<select name="bulan_lahir" size="6" multiple="multiple">
<option value="jan" selected="selected">Januari</option>
<option value="feb">Februari</option>
<option value="mar">Maret</option>
<option value="apr">April</option>
<option value="mei">Mei</option>
<option value="jun">Juni</option>
<option value="jul">Juli</option>
</select>
</form>
<h4>tag Select dengan atribut: name+value+selected+disabled</h4>
<form name="form2" action="proses.php" method="get">
<select name="bulan_lahir" disabled="disabled">
<option value="jan">Januari</option>
<option value="feb">Februari</option>
<option value="mar">Maret</option>
<option value="apr">April</option>
<option value="mei"selected="selected">Mei</option>
<option value="jun">Juni</option>
<option value="jul">Juli</option>
</select>
</form>
<h4>tag Select dengan atribut: name+value dan tag optgroup</h4>
<form name="form2" action="proses.php" method="get">
<select name="bulan_lahir">
<optgroup label="Triwulan 1">
<option value="jan">Januari</option>
<option value="feb">Februari</option>
<option value="mar">Maret</option>
</optgroup>
<optgroup label="Triwulan 2">
<option value="apr">April</option>
<option value="mei">Mei</option>
<option value="jun">Juni</option>
</optgroup>
<optgroup label="Triwulan 3">
<option value="jul">Juli</option>
</optgroup>
</select>
</form>
</body>
</html>
Hasil Code:
Contoh kode program HTML tag select yang saya tulis hanya merangkum apa yang telah kita pelajari pada tutorial kali ini. Selanjutnya kita akan mempelajari tentang tag textarea dalam Form HTML.