PENGENALAN TAG SELECT FORM HTML

Fungsi Tag Select Dalam Pembuatan Form HTML

image selection form HTML

Tag select di dalam HTML digunakan untuk membuat objek form yang berupa list/daftar 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="kategori_pilihan">

<option>Pilihan 1</option>

<option>Pilihan 2</option>

<option>Pilihan 3</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="daftar1">Pilihan 1</option>

<option value="daftar2">Pilihan 2</option>

<option value="daftar3">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="2", maka pada saat form ditampilkan, tag select akan ditampilkan sebanyak 2 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 pada postingan selanjutnya.

Berikut contoh penulisan atribut size untuk tag select:

<select size="3">

<option>Pilihan 1</option>

<option>Pilihan 2</option>

<option>Pilihan 3</option>

</select>

Info : Setiap browser menampilkan dengan perbedaan dalam tampilan daftar.

Terima Kasih

#ADMIN