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

belajar HTML dan CSS untuk pemula

Dalam tutorial Cara Membuat Form di HTML dengan tag form kita sudah belajar memakai tag select, tetapi dalam tutorial saat ini saya akan mendiskusikannya dengan lebih dalam bersama atribut-atribut tambahan yang dapat pakai untuk tag select.

Fungsi Tag Select dalam pembuatan Form HTML

Tag select di dalam HTML dipakai untuk membuat objek form yang berupa daftar pilihan yang bisa dipilih oleh user. Pada umumnya tag select dipakai untuk “memaksa” user memilih salah satu dari pilihan yang disediakan. Pilihan ini sudah didefenisikan di waktu form dibuat.

Pada pemakaian tag select ini, kita juga memerlukan tag option sebagai “isi” dari tag select. Format dasar pembuatan select dalam HTML yaitu sebagai berikut:

<select >
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
</select >

Kamu tidak mesti memakai tag select di dalam form HTML, tetapi dapat pula dipakai tanpa tag form. Namun bila dipakai diluar form, kita memerlukan bantuan bahasa pemograman lain seperti javascript untuk memproses hasilnya.

Atribut name

Atribut name untuk tag select dipakai sebagai identitas dari tag select itu. Identitas ini dibutuhkan di waktu pemrosesan di sisi server (contohnya memakai PHP). Atribut name inilah yang akan jadi varibel penampung nilai yang dipilih oleh user. Atribut name ditaruh 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

Atribut value dipakai di dalam tag option. Nilai dari atribut inilah yang akan dikirimkan kedalam web server, sehingga dianjurkan memakai nilai yang mencerminkan pilihan user. Nilai dari value tidak mesti 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>

Upayakan untuk memberi nilai value berupa nilai yang singkat tetapi berarti sesuai dengan pilihan yang ditampilkan.

Atribut selected

Atribut selected dipakai pada tag option. Bila sebuah tag option mememiliki atribut selected, maka di waktu form ditampilkan, pilihan tag inilah yang akan tampil sebagai nilai awal dari select (nilai default). Nilai dari atribut ini merupakan dirinya sendiri, sehingga penulisannya jadi selected=“selected”. Berikut contoh penulisannya:

<select>
<option >Pilihan 1</option>
<option selected="selected">Pilihan 2</option>
<option>Pilihan 3</option>
</select>

Atribut Size

Atribut size dipakai untuk menentukan besar dari tampilan tag select. Bila tidak ditulis, tag select mempunyai nilai default size=”1″, sehingga cuma 1 pilihan yang “tampak” saat user memilih pilihan yang ada.

Tetapi bila kamu menambahkan atribut size=”3″, maka di waktu form ditampilkan, tag select akan ditampilkan sebanyak 3 baris, bukan 1 baris seperti pada umumnya.

Atribut size ini umumnya dipakai jika tag select dirancang untuk bisa dipilih dengan beberapa opsi sekalian. Untuk kebutuhan ini, atribut size pada umumnya di kombinasikan dengan atribut multiple yang akan kita bahas sesudah ini.

Berikut contoh penulisan atribut size untuk tag select:

<select size="2">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
</select >
Di waktu penulisan artikel ini, saya mengunakan web browser mozilla firefox dan google chrome untuk pengujian. Untuk google chrome Versi 33 yang saya pakai, bila kita membuat size=2, atau size=3, google chrome akan menampilkannya dengan 4 pilihan, bukan 2 atau 3 seperti yang semestinya. Teteapi web browser mozilla firefox akan tetap menampilkannya secara normal. Perbedaan tampilan ini layak jadi pertimbangan bila kamu mau memakai atribut size dalam membuat form.

Atribut Multiple

Atribut multiple untuk tag select dipakai untuk memungkinkan user untuk bisa memilih lebih dari 1 nilai. Tetapi untuk bisa memilih lebih dari 1 nilai, user harus menekan tombol ctrl pada keyboard.

Atribut multiple bakal lebih mudah dipakai bila ditambahkan atribut size. Satu-satunya nilai untuk atribut multiple ini merupakan “multiple”. Berikut contoh pemakaian 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 >
pemakaian atribut multiple untuk memungkinkan user memilih lebih dari satu pilihan mungkin bukan ide yang buruk, namun tidak seluruh user paham cara men-klik sambil menahan tombol ctrl. Bila kamu bermaksud membolehkan user memilih lebih dari 1 pilihan, pertimbangkan mengganti tag select dengan checkbox.

Atribut disabled

Atribut disabled dipakai untuk membuat tag select tidak dapat dipakai. Pemakaian atribut ini pada umumnya di kombinasikan dengan javascript supaya berfungsi maksimum, misalnya sebuah pilihan select cuma bisa diisi saat user sudah mengisi form diatasnya.

Atribut disabled ini cuma mempunyai 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 dipakai untuk tag select, atribut disabled juga dapat dipakai untuk tag option.  Saat dipakai di dalam tag option, maka pilihan yang mempunyai atribut disabled tidak akan dapat dipakai. 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 dipakai untuk membuat kelompok-kelompok pilihan. Bila daftar pilihan kamu panjang, memakai tag optgroup akan mempermudah user dalam menentukan pilihan jika sudah digolongkan terlebih dulu.

Atribut label dibutuhkan 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 memerlukan sebuah atribut, yaitu atribut label yang berisi tulisan yang akan timbul untuk grup pilihan itu. Di dalam web browser, tag optgroup ini akan ditampilkan dalam huruf tebal (bold), tetapi user tidak bisa memilihnya sebab fungsi tag ini memang cuma sebagai keterangan saja.

Atribut id dan class: CSS dan Javascript

Selain atribut name, value, selected, size, multipe dan disabled, kamu juga dapat memakai atribut umum seperti id dan class dalam tag select. Tag id dan class akan diperlukan untuk pemograman HTML memakai Javascript dan CSS.

Cara Pemakaian Tag Input select dalam Form HTML

Untuk merangkum semua contoh atribut dan tag select yang sudah 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 di waktu 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="Kuartal 1">
<option value="jan">Januari</option>
<option value="feb">Februari</option>
<option value="mar">Maret</option>
</optgroup>
<optgroup label="Kuartal 2">
<option value="apr">April</option>
<option value="mei">Mei</option>
<option value="jun">Juni</option>
</optgroup>
<optgroup label="Kuartal 3">
<option value="jul">Juli</option>
</optgroup>
</select>
</form>
</body>
</html>

Contoh kode program HTML tag select yang saya tulis cuma merangkum apa yang sudah kita pelajari pada tutorial saat ini. Selnajutnya kita akan mempelajari mengenai tag textarea dalam Form HTML.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *