HTML select: Dropdown, Pilihan Jamak, dan Nilai Formulir

HTML <select> adalah kontrol formulir untuk memilih nilai dari opsi yang ditentukan oleh option. Secara default hanya satu opsi dapat dipilih; multiple memungkinkan beberapa opsi. Atribut name pada select menentukan nama bidang yang dikirim, sedangkan value pada option yang dipilih menentukan nilainya.

Bedakan nama bidang, label yang terlihat, dan nilai yang dikirim

Samakan nilai atribut for pada elemen label dengan nilai atribut id pada elemen select untuk menghubungkan deskripsi dengan kontrol. id mengidentifikasi elemen dalam dokumen, sedangkan name menjadi kunci data yang dikirim. Teks opsi dapat berbeda dari value: memilih Pengembangan web dapat mengirim web. Jika value dihilangkan, teks opsi digunakan sebagai nilainya.

Dalam kontrol pemilihan tunggal biasa, mengabaikan selected umumnya menjadikan opsi pertama yang tersedia sebagai pilihan awal. Untuk memerlukan pilihan secara eksplisit, berikan opsi pertama value kosong dan tambahkan required, seperti di bawah. Instruksi yang terlihat tidak memenuhi syarat pemilihan yang diperlukan ketika nilainya kosong.

Contoh lengkap: pemilihan wajib dan banyak pilihan

Simpan kode sebagai select-demo.html dan buka di browser. JavaScript mencegah pengiriman dan menampilkan data formulir saat ini di halaman. Latihan ini tidak mengirim data ke server atau situs eksternal.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Memeriksa nilai select</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    label, select { display: block; margin-bottom: 0.5rem; }
    select, button { font: inherit; max-width: 100%; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Memeriksa nilai yang dipilih</h1>
  <form id="demo">
    <label for="topic">Topik minat (wajib)</label>
    <select id="topic" name="topic" required>
      <option value="" selected>Pilih topik</option>
      <optgroup label="Pengembangan">
        <option value="web">Pengembangan web</option>
        <option value="data">Pemrosesan data</option>
      </optgroup>
    </select>
    <label for="skills">Teknologi yang dipelajari (boleh memilih beberapa)</label>
    <select id="skills" name="skills" multiple size="3">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="javascript">JavaScript</option>
    </select>
    <label for="locked">Bidang dinonaktifkan</label>
    <select id="locked" name="locked" disabled>
      <option value="sample">Tidak dapat diubah</option>
    </select>
    <button type="submit">Tampilkan nilai</button>
    <button type="reset">Atur ulang</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = new FormData(form);
      result.textContent = JSON.stringify(Array.from(data.entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Tekan Tampilkan nilai tanpa memilih topik. Validasi kolom wajib di browser mencegah pengiriman.
2. Pilih Pengembangan web dan tekan Tampilkan nilai. Keluaran berisi topic dengan web, dan dua entri skills dengan html dan css. Kolom locked yang dinonaktifkan tidak disertakan.
3. Ubah pilihan keterampilan dan periksa lagi. Setiap opsi yang dipilih menghasilkan entri lain bernama skills. Jika Anda membatalkan pilihan semua opsi, mungkin tidak ada entri skills.
4. Tekan Atur ulang. Topik kembali ke opsi instruksi kosong, keterampilan kembali ke HTML dan CSS, dan keluaran dibersihkan.

multiple dan size adalah atribut yang berbeda

multiple memungkinkan beberapa nilai, sementara size menentukan jumlah baris yang terlihat. Meningkatkan size tidak secara otomatis mengaktifkan pilihan ganda. Kombinasi keyboard tergantung pada sistem operasi. Kontrol desktop mungkin mendukung Ctrl atau Command dengan klik, atau Shift untuk seleksi rentang; perangkat seluler mungkin menyediakan layar seleksi terpisah.

Saat membaca beberapa pilihan di JavaScript, select.value hanya memberikan nilai yang pertama dipilih. Iterasi melalui selectedOptions atau panggil getAll('skills') pada instance FormData, misalnya new FormData(form).getAll('skills'), untuk mendapatkan setiap nilai. Di server, ikuti aturan parsing kerangka kerja Anda untuk bidang yang berulang dengan nama yang sama.

Gunakan disabled, required, dan selected dengan hati-hati

disabled mencegah interaksi dan mengecualikan bidang dari data yang dikirim. select tidak memiliki padanan native dari atribut readonly elemen input, jadi menambahkan readonly tidak menguncinya. Menonaktifkan kontrol di browser juga tidak menggantikan pemeriksaan otorisasi di server.

required, disabled, multiple, dan selected adalah atribut boolean. Bahkan selected="false" membiarkan atribut tetap ada, sehingga opsi tersebut masih dapat dianggap sebagai yang dipilih awalnya. Hapus atribut atau atur properti JavaScript yang sesuai menjadi false agar nilainya menjadi false. Reset mengembalikan pilihan awal yang dinyatakan dalam HTML; itu tidak selalu menghapus setiap pilihan.

autofocus dapat memfokuskan kontrol secara otomatis, tetapi gunakan hanya bila diperlukan, dengan mempertimbangkan posisi pembaca dan perilaku keyboard seluler. Kontrol asli dan popup berbeda-beda tergantung browser dan sistem operasi, sehingga mempertahankan asosiasi label dan interaksi keyboard standar bermanfaat untuk formulir biasa. Referensi select di MDN dan option di MDN menjelaskan aturan secara rinci.