Kontrol Pilihan

Elemen select, textarea, dan datalist beserta pengelompokan opsinya.

Daftar isi

Selain kolom teks, formulir menyediakan kontrol pilihan yang menyusun opsi terlebih dahulu, sehingga pengguna memilih alih-alih mengetik. Elemen select menawarkan daftar pilihan yang dapat dikelompokkan, textarea menerima teks panjang banyak baris, dan datalist menggabungkan kolom teks bebas dengan daftar saran. Topik ini membahas struktur ketiganya beserta atribut multiple, size, rows, cols, readonly, dan disabled. Setelah membacanya, setiap jenis data pilihan dapat dipadankan dengan kontrol yang paling sesuai.

select dengan option dan optgroup#

Elemen select membentuk daftar pilihan tertutup, dan setiap pilihannya ditulis sebagai satu elemen option. Nilai yang dikirim berasal dari atribut value pada option yang terpilih, sedangkan tanpa atribut itu nilai yang dikirim adalah teks option-nya. Atribut selected menetapkan pilihan awal, dan tanpa atribut tersebut opsi pertama yang menjadi pilihan bawaan. Elemen select memiliki perilaku yang berbeda dari input teks, karena nilainya selalu berasal dari daftar dan tidak mungkin berisi teks di luar opsi yang tersedia.

html Contoh: select dengan optgroup

<label for="mapel">Mata pelajaran utama</label>
<select id="mapel" name="mapel">
  <optgroup label="Bahasa dan sosial">
    <option value="sejarah">Sejarah</option>
    <option value="geografi">Geografi</option>
  </optgroup>
  <optgroup label="Eksak">
    <option value="fisika">Fisika</option>
    <option value="kimia">Kimia</option>
    <option value="biologi">Biologi</option>
  </optgroup>
</select>

Elemen optgroup mengelompokkan opsi yang berkaitan dengan label kepalanya, dan label itu ditampilkan browser sebagai judul yang tidak dapat dipilih. Pengelompokan ini berguna ketika daftar opsi panjang, misalnya daftar mata pelajaran yang terbagi dalam beberapa rumpun, karena pembaca menemukan kategori lebih dahulu sebelum menelusuri tiap opsinya. Elemen optgroup juga menerima atribut disabled untuk mematikan satu kelompok sekaligus tanpa menghapus markupnya.

Atribut multiple dan size#

Atribut multiple mengubah select menjadi daftar kotak yang mengizinkan lebih dari satu pilihan sekaligus, sedangkan tanpa atribut itu pilihannya tunggal dan tampil sebagai menu tarik-turun. Atribut size menetapkan berapa baris opsi yang terlihat sekaligus, dan nilainya menjadi bermakna ketika multiple aktif, karena pengguna perlu melihat cukup banyak opsi untuk memilih beberapa di antaranya. Pada pilihan berganda, pengguna menahan tombol Ctrl atau Cmd untuk memilih lebih dari satu butir pada browser komputer.

html Contoh: select berganda dengan size

<label for="ekstra">Ekstrakurikuler (pilih beberapa)</label>
<select id="ekstra" name="ekstra" multiple size="3">
  <option value="futsal">Futsal</option>
  <option value="paduan-suara">Paduan suara</option>
  <option value="robotik">Robotik</option>
  <option value="jurnalistik">Jurnalistik</option>
</select>

Satu select berganda mengirimkan beberapa pasangan dengan name yang sama, misalnya ekstra=futsal&ekstra=robotik pada method GET. Perilaku ini sama dengan kelompok kotak centang yang membawa satu nama, sehingga keduanya dapat saling menggantikan pada kasus pilihan berganda. Nilai size yang lebih besar dari jumlah opsinya tidak merusak apa pun, karena browser hanya menampilkan opsinya sebanyak yang ada.

textarea untuk teks panjang#

Elemen textarea menerima teks bebas banyak baris dan berbeda dari input dalam dua hal mendasar. Isinya ditulis di antara tag pembuka dan penutup, bukan pada atribut value, sehingga teks awalnya ditulis sebagai isi elemen tersebut. Ukurannya diatur atribut rows untuk jumlah baris dan cols untuk lebar dalam karakter, dan keduanya menjadi ukuran awal yang tetap dapat diubah pengguna melalui gagang pengubah ukuran pada sebagian browser.

html Contoh: textarea readonly dan disabled

<label for="catatan">Catatan tambahan</label>
<textarea id="catatan" name="catatan" rows="4" cols="40"></textarea>

<label for="konselor">Konselor yang menangani</label>
<textarea id="konselor" name="konselor" rows="1" cols="40" readonly>Budi Santoso</textarea>

Atribut readonly membuat isi tidak dapat diubah tetapi tetap ikut terkirim, sedangkan disabled mematikan kontrol sepenuhnya dan nilainya tidak pernah terkirim. Pembedaan ini penting saat kontrol menampilkan nilai dari sistem, misalnya nama konselor yang ditetapkan otomatis, karena disabled tidak boleh digunakan pada kontrol yang datanya harus sampai ke server. Kedua atribut juga berlaku pada input, dan aturan pengirimannya sama persis. Gagang pengubah ukuran pada sebagian browser juga hilang pada kontrol yang disabled, sehingga wujudnya memang benar-benar pasif.

datalist menggabungkan teks bebas dengan saran#

Elemen datalist menyediakan daftar saran untuk sebuah kolom teks, dan hubungannya dibentuk atribut list pada input yang menunjuk id dari datalist. Pengguna tetap dapat mengetik apa pun, tetapi browser menampilkan saran yang cocok selagi mengetik, sehingga kontrolnya berperilaku seperti gabungan kolom teks dan menu tarik-turun. Pola ini tepat untuk data yang lazim tetapi tidak tertutup, misalnya nama kota yang daftar lengkapnya mustahil disiapkan.

html Contoh: input dengan datalist

<label for="kota">Kota sekolah tujuan</label>
<input id="kota" name="kota" type="text" list="daftar-kota">
<datalist id="daftar-kota">
  <option value="Bandung"></option>
  <option value="Bogor"></option>
  <option value="Semarang"></option>
  <option value="Yogyakarta"></option>
</datalist>

Perbedaan datalist dan select perlu dipahami agar pilihannya tepat. select menutup kemungkinan nilai karena pengiriman pasti berasal dari daftar, sedangkan datalist hanya memberi saran dan nilai bebas tetap lolos. Karena itu data yang menuntut konsistensi, misalnya kode kategori yang diproses sistem, lebih aman pada select, sedangkan datalist cocok untuk kolom yang isinya memang bervariasi. Apabila browser tidak mendukung datalist, kolom teksnya tetap berfungsi normal, sehingga halaman tetap dapat digunakan seperti biasa.

Berkas utuh kontrol pilihan#

Berkas berikut menyatukan keempat pola topik ini dalam satu formulir perencanaan studi, yaitu select berkelompok, select berganda, textarea bebas dan readonly, serta kolom dengan datalist. Semua kontrol diberi label yang berasosiasi, dan formulirnya dapat dibuka langsung di browser untuk menguji perilaku setiap kontrol.

html kontrol.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh kontrol pilihan</title>
  <style>
    body { font-family: sans-serif; max-width: 34rem; margin: 0 auto; padding: 0 1rem; }
    .baris { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
    input, select, textarea { padding: 0.3rem 0.5rem; font-size: 1rem; }
  </style>
</head>
<body>
  <h1>Perencanaan studi siswa</h1>

  <form action="/rencana" method="post">
    <p class="baris">
      <label for="mapel">Mata pelajaran utama</label>
      <select id="mapel" name="mapel">
        <optgroup label="Bahasa dan sosial">
          <option value="sejarah">Sejarah</option>
          <option value="geografi">Geografi</option>
        </optgroup>
        <optgroup label="Eksak">
          <option value="fisika">Fisika</option>
          <option value="kimia">Kimia</option>
          <option value="biologi">Biologi</option>
        </optgroup>
      </select>
    </p>
    <p class="baris">
      <label for="ekstra">Ekstrakurikuler (pilih beberapa)</label>
      <select id="ekstra" name="ekstra" multiple size="3">
        <option value="futsal">Futsal</option>
        <option value="paduan-suara">Paduan suara</option>
        <option value="robotik">Robotik</option>
        <option value="jurnalistik">Jurnalistik</option>
      </select>
    </p>
    <p class="baris">
      <label for="catatan">Catatan tambahan</label>
      <textarea id="catatan" name="catatan" rows="4" cols="40"></textarea>
    </p>
    <p class="baris">
      <label for="konselor">Konselor yang menangani</label>
      <textarea id="konselor" name="konselor" rows="1" cols="40" readonly>Budi Santoso</textarea>
    </p>
    <p class="baris">
      <label for="kota">Kota sekolah tujuan</label>
      <input id="kota" name="kota" type="text" list="daftar-kota">
      <datalist id="daftar-kota">
        <option value="Bandung"></option>
        <option value="Bogor"></option>
        <option value="Semarang"></option>
        <option value="Yogyakarta"></option>
      </datalist>
    </p>
    <p><button type="submit">Simpan rencana</button></p>
  </form>
</body>
</html>

Coba ketik Bog pada kolom kota, dan saran dari datalist muncul untuk disorot atau diabaikan. Ganti pilihan mata pelajaran, pilih beberapa ekstrakurikuler, lalu amati bahwa kontrol yang tampilannya berbeda mengirimkan bentuk pasangan name=value yang sama, sehingga sisi server memperlakukannya secara seragam. Textarea konselor yang readonly tetap menyumbangkan nilainya, dan perbedaannya dengan kolom lain baru terlihat ketika isinya dicoba diubah tanpa hasil.

Kesalahan umum#

Menulis nilai awal select sebagai atribut value pada elemen select. Atribut itu tidak berpengaruh di sana, karena pilihan awal ditetapkan atribut selected pada option-nya.
Menggunakan disabled untuk nilai yang harus terkirim, misalnya kolom hasil perhitungan. Kontrol yang disabled tidak pernah menyumbang pasangan data, sehingga gunakan readonly atau kontrol hidden.
Menulis teks option yang tidak konsisten dengan atribut value-nya. Nilai yang terkirim dan teks yang terbaca menjadi berbeda tanpa sengaja, sehingga tetapkan value yang eksplisit untuk setiap opsi.
Mengganti select yang datanya wajib konsisten dengan datalist. Saran dapat diabaikan pengguna, sehingga nilai bebas lolos dan konsistensi data hilang.

Ringkasan#

select menyusun opsi dalam option, mengelompokkannya dengan optgroup, dan mengirim nilai dari atribut value opsi yang terpilih.
Atribut multiple mengubah select menjadi pilihan berganda dengan beberapa pasangan bernama sama, sedangkan size menetapkan jumlah baris yang terlihat.
textarea menerima teks banyak baris dengan ukuran rows dan cols, di mana readonly tetap terkirim sedangkan disabled tidak.
datalist menambahkan saran pada kolom teks lewat pasangan list dan id, dan pilihannya tepat untuk data yang lazim tetapi tidak tertutup.

Referensi#

Elemen select — MDN — Dokumentasi select beserta multiple, size, dan optgroup.
Elemen optgroup — MDN — Pengelompokan opsi beserta label dan disabled.
Elemen textarea — MDN — Atribut rows, cols, readonly, dan disabled beserta perilakunya.
Elemen datalist — MDN — Kombinasi input dan datalist untuk saran nilai.