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

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>

Tutorial Pembuatan Form HTML - Contoh Cara Penggunaan Tag Select

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


Tutorial Terkait:

31 Comments

  1. Ael Irsal
    08 May 14
    • Andre
      08 May 14
  2. Ael Irsal
    10 May 14
    • Andre
      30 Aug 14
  3. wsc biolo
    13 Aug 15
  4. jamkho
    13 Aug 15
  5. William
    22 Sep 15
    • Andre
      22 Sep 15
      • William
        23 Sep 15
  6. faisal
    09 Oct 15
    • Andre
      09 Oct 15
  7. Tresna Nuryandi
    26 Feb 16
    • Andre
      27 Feb 16
  8. wafa
    08 Mar 16
  9. Arie
    31 May 16
    • Andre
      01 Jun 16
  10. yanto
    05 Aug 16
    • Andre
      06 Aug 16
  11. Busairi
    22 Nov 16
    • Andre
      23 Nov 16
      • ajo
        04 May 17
        • Andre
          05 May 17
  12. Satriyo
    17 Mar 17
    • Andre
      18 Mar 17
  13. Anonymous
    24 May 17
  14. ibnu
    13 Jun 17
    • Andre
      14 Jun 17
  15. lilik yuliantara
    02 Oct 17
    • Andre
      04 Oct 17
      • lilik yuliantara
        06 Oct 17
        • Andre
          09 Oct 17

Add Comment