Tutorial Form HTML Part 10: Fungsi dan Cara Penggunaan Tag Select Form HTML

Di panduan Belajar HTML Dasar: Cara Membuat Form di HTML (tag form) kita telah belajar menggunakan tag select, namun pada panduan kali ini saya akan membahasnya dengan lebih pada dan juga atribut-atribut tambahan yang dapat gunakan bagi tag select.


Manfaat Tag Select pada penyusunan Form HTML

Tag select di pada HTML digunakan bagi membangun objek form yang berupa list alternatif yang dapat dipilih oleh user. Biasanya tag select digunakan bagi “memaksa” user memilih diantara dari alternatif yang terdapat. Alternatif ini telah didefenisikan di dikala form dikerjakan.

Di pemakaian tag select ini, kita pun membutuhkan tag option selaku “isi” dari tag select. Format mendasar penyusunan select pada HTML ialah selaku berikut:

Sahabat tak mesti menggunakan tag select di pada form HTML, namun dapat pun digunakan tanpa tag form. Akan tetapi kalau digunakan diluar form, kita membutuhkan bantuan bahasa pemograman lain seperti javascript bagi memproses hasilnya.


Atribut name: Bagi Pemrosesan Tag Select

Atribut name bagi tag select digunakan selaku identitas dari tag select tersebut. Identitas ini diperlukan di dikala pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di pada tag select, bukan di pada tag option. Berikut contoh penulisan atribut name bagi tag select:


Atribut value: Selaku Nilai bagi Tag Option

Atribut value digunakan di pada tag option. Nilai dari atribut inilah yang akan dikirimkan kedalam web server, sehingga disarankan menggunakan nilai yang mencerminkan alternatif user. Nilai dari value tak mesti sama dengan apa yang dilihat user. Berikut contoh penulisannya:

Usahakan bagi memberi nilai value berupa nilai yang singkat namun bermakna sesuai dengan alternatif yang ditampilkan.


Atribut selected: Menampilkan Nilai Default dari Tag Select

Atribut selected digunakan di tag option. Bila sebuah tag option mememiliki atribut selected, karenanya di dikala form ditampilkan, alternatif tag inilah yang akan tampil selaku nilai awal dari select (nilai default). Nilai dari atribut ini ialah dirinya sendiri, sehingga penulisannya menjadi selected=“selected”. Berikut contoh penulisannya:


Atribut Size: Menentukan Besar tampilan Select

Atribut size digunakan bagi menentukan besar dari tampilan tag select. Bila tak ditulis, tag select mempunyai nilai default size=”1″, sehingga hanya 1 alternatif yang “terlihat” ketika user memilih alternatif yang terdapat.

Namun kalau sahabat menambahkan atribut size=”3″, karenanya di dikala form ditampilkan, tag select akan ditampilkan sebanyak 3 baris, bukan 1 baris seperti biasanya.

Atribut size ini umumnya digunakan apabila tag select dirancang bagi dapat dipilih dengan beberapa alternatif sekaligus. Bagi kebutuhan ini, atribut size biasanya di kombinasikan dengan atribut multiple yang akan kita bahas setelah ini.

Berikut contoh penulisan atribut size bagi tag select:

Di dikala penulisan artikel ini, saya mengunakan web browser mozilla firefox dan google chrome bagi pengujian. Bagi google chrome Versi 33 yang saya gunakan, kalau kita membangun size=2, atau size=3, google chrome akan menampilkannya dengan 4 alternatif, bukan 2 atau 3 seperti yang seharusnya. Teteapi web browser mozilla firefox akan tetap menampilkannya secara normal. Perbedaan tampilan ini patut menjadi pertimbangan kalau sahabat ingin menggunakan atribut size pada membangun form.


Atribut Multiple: Bagi Memilih lebih dari 1 alternatif tag Select

Atribut multiple bagi tag select digunakan bagi memungkinkan user bagi dapat memilih lebih dari 1 nilai. Namun bagi dapat memilih lebih dari 1 nilai, user mesti menekan tombol ctrl di keyboard.

Atribut multiple akan lebih gampang digunakan kalau ditambahkan atribut size. Satu-satunya nilai bagi atribut multiple ini ialah “multiple”. Berikut contoh pemakaian atribut multiple, dan dikombinasikan dengan atribut size:

pemakaian atribut multiple bagi memungkinkan user memilih lebih dari satu alternatif mungkin bukan ide yang buruk, tetapi tak seluruh user paham cara men-klik sambil menahan tombol ctrl. Bila sahabat bermaksud membolehkan user memilih lebih dari 1 alternatif, pertimbangkan mengganti tag select dengan checkbox.


Atribut disabled: Menonaktifkan tag Select

Atribut disabled digunakan bagi membangun tag select tak dapat digunakan. Pemakaian atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal, misalkan sebuah alternatif select hanya dapat diisi ketika user telah mengisi form diatasnya.

Atribut disabled ini hanya mempunyai 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya atribut disabled bagi tag select HTML:

Selain digunakan bagi tag select, atribut disabled pun dapat digunakan bagi tag option.  Ketika digunakan di pada tag option, karenanya alternatif yang mempunyai atribut disabled tak akan dapat digunakan. berikut contoh penulisannya:


Tag optgroup dan atribut label

Tag optgroup digunakan bagi membangun kelompok-kelompok alternatif. Bila list alternatif sahabat panjang, menggunakan tag optgroup akan mempermudah user pada menentukan alternatif apabila telah dikelompokkan terlebih dahulu.

Atribut label diperlukan bagi menampilkan judul dari tag optgroup. Berikut contoh penulisan tag optgroup:

Pada penulisan tag optgroup, kita membutuhkan sebuah atribut, yakni atribut label yang berisi tulisan yang akan muncul bagi grup alternatif tersebut. Di pada web browser, tag optgroup ini akan ditampilkan pada huruf tebal (bold), namun user tak dapat memilihnya karena kegunaan tag ini memang hanya selaku keterangan saja.


Atribut id dan class: CSS dan Javascript

Selain atribut name, value, selected, size, multipe dan disabled, sahabat pun dapat menggunakan atribut umum seperti id dan class pada tag select. Tag id dan class akan dibutuhkan bagi pemograman HTML menggunakan Javascript dan CSS.


Cara Pemakaian Tag Input select pada Form HTML

Bagi merangkum seluruh contoh atribut dan tag select yang telah kita pelajari disini, saya akan membangun contoh cara penggunaannya di pada form HTML:

Contoh kode program HTML tag select yang saya tulis hanya merangkum apa yang telah kita pelajari di panduan kali ini. Selnajutnya kita akan mempelajari mengenai tag textarea dalam Form HTML.


Sumber https://www.duniailkom.com/

Share

You may also like...