Pertanyaan dan Pilihan

Kelompok kedua memuat tiga pertanyaan, dan tiap pertanyaan memilih kendaraan yang berbeda: frekuensi berkunjung memakai radio karena jawabannya tepat satu, menu favorit memakai checkbox karena jawabannya boleh berganda, dan sumber informasi memakai select karena pilihannya panjang dan lebih nyaman terlipat. Bagian ini mengisi fieldset Kebiasaan berkunjung dengan ketiganya.

Frekuensi Berkunjung: Radio #

Ganti komentar penanda di dalam fieldset Kebiasaan berkunjung dengan pertanyaan pertama — sama persis dengan baris 29-45 berkas final:

        <p>Berapa sering Anda makan di Dapur Siti?</p>
        <label>
          <input type="radio" name="frekuensi" value="setiap-pekan" required>
          Hampir setiap pekan
        </label>
        <label>
          <input type="radio" name="frekuensi" value="beberapa-sebulan">
          Dua sampai tiga kali sebulan
        </label>
        <label>
          <input type="radio" name="frekuensi" value="sebulan-sekali">
          Sekali sebulan atau lebih jarang
        </label>
        <label>
          <input type="radio" name="frekuensi" value="pertama-kali">
          Ini kunjungan pertama saya
        </label>

Mari kita bedah grup radio ini:

1. Pertanyaan sebagai paragraf (baris 1): pertanyaan ditulis sekali sebelum opsi; label tiap radio hanya memuat jawaban, bukan mengulang pertanyaan.
2. name="frekuensi" pada keempat radio (baris 3, 6, 9, 12): name yang sama membentuk satu grup — memilih satu otomatis melepas yang lain, persis mekanisme yang dibedah chapter Radio Button.
3. required pada radio pertama saja (baris 3): aturan grup radio dari chapter Atribut required — cukup satu anggota yang membawa required, karena pemeriksaannya menyangkut grup secara keseluruhan; memasangnya pada keempatnya sah namun mubazir.
4. value tiap opsi: pasangan frekuensi=setiap-pekan dan kawan-kawannya yang terkirim — nilai singkat tanpa spasi, memudahkan pengolahan di sisi server.
5. Label membungkus input (baris 2-4 dst.): input berada di dalam label — seluruh baris opsi menjadi wilayah klik yang lega, terutama di ponsel.

Tanpa checked di mana pun, grup dimulai kosong — keadaan sah yang sengaja dipilih: responden harus benar-benar menjawab, bukan menerima jawaban awal.

Menu Favorit: Checkbox #

Lanjutkan dengan pertanyaan kedua — sama persis dengan baris 46-66 berkas final:

        <p>Menu mana yang paling Anda sukai? Boleh memilih lebih dari satu.</p>
        <label>
          <input type="checkbox" name="menu[]" value="nasi-goreng">
          Nasi goreng kampung
        </label>
        <label>
          <input type="checkbox" name="menu[]" value="ayam-bakar">
          Ayam bakar madu
        </label>
        <label>
          <input type="checkbox" name="menu[]" value="sayur-asem">
          Sayur asem
        </label>
        <label>
          <input type="checkbox" name="menu[]" value="gulai-patin">
          Gulai ikan patin
        </label>
        <label>
          <input type="checkbox" name="menu[]" value="pisang-goreng">
          Pisang goreng keju
        </label>

Bedah potongan ini:

1. Instruksi di pertanyaan (baris 1): “Boleh memilih lebih dari satu” — instruksi eksplisit yang membedakan checkbox dari radio sebelum pengguna mencoba.
2. name="menu[]": tanda kurung siku di akhir nama adalah isyarat bagi skrip server bahwa nilai-nilai terpilih sebaiknya dikumpulkan sebagai satu daftar — kebiasaan yang lahir di PHP dan kini umum dibaca server mana pun.
3. Tanpa required: responden boleh tidak memilih menu apa pun — mungkin belum punya favorit. Kekosongan di sini sah, beda dengan radio frekuensi yang wajib.
4. Tidak dicentang berarti tidak terkirim: kotak yang dibiarkan tidak mengirim apa pun — bukan terkirim kosong, bukan terkirim “tidak”. Perilaku khas checkbox dari chapter Checkbox yang berakibat besar di sisi server.

Sumber Informasi: Select dengan Optgroup #

Tutup fieldset kedua dengan pertanyaan ketiga — sama persis dengan baris 67-80 berkas final:

        <label for="sumber">Dari mana Anda pertama kali mendengar Dapur Siti?</label>
        <select id="sumber" name="sumber">
          <option value="" disabled selected>Pilih salah satu</option>
          <optgroup label="Dari orang sekitar">
            <option value="teman">Rekomendasi teman</option>
            <option value="keluarga">Rekomendasi keluarga</option>
            <option value="rekan-kerja">Ajakan rekan kerja</option>
          </optgroup>
          <optgroup label="Dari internet">
            <option value="media-sosial">Media sosial Dapur Siti</option>
            <option value="ulasan-daring">Ulasan daring</option>
            <option value="mesin-pencari">Mesin pencari</option>
          </optgroup>
        </select>

Bedah daftar pilihannya:

1. Label for/id (baris 1-2): select memakai pengikatan label yang sama dengan kolom teks — pertanyaan panjang tetap satu label yang bisa diklik.
2. Opsi placeholder (baris 3): value="", disabled, dan selected — tampil sebagai pilihan awal, lalu tidak bisa dipilih kembali setelah pengguna memilih yang sungguhan. Tanpa placeholder, opsi pertama otomatis terkirim meski pengguna tak pernah membuka daftar.
3. Dua optgroup (baris 4-13): judul kelompok yang tercetak namun tak bisa diklik — memilah enam opsi menjadi “Dari orang sekitar” dan “Dari internet” supaya daftar terbaca dua bagian, bukan satu deretan.
4. Tanpa required: pertanyaan ini opsional karena tidak semua responden ingat. Konsekuensinya jujur kita terima: bila daftar tidak disentuh, pasangan sumber terkirim dengan nilai kosong dan server membacanya sebagai “tidak dijawab”.

Hasil pada Browser #

Empat radio tampil dengan pilihan awal kosong, disusul lima checkbox, lalu daftar terlipat “Pilih salah satu” — klik membukanya dengan dua judul kelompok tercetak tebal dan tak bisa dipilih. Isi identitas dan pilih satu frekuensi, lalu tekan Kirim Survei: pertanyaan wajib sudah terjawab, jadi browser mengirim dan membuka example.com — penahan terakhir menunggu fieldset ketiga pada Bagian 4.

Buka daftar pilihannya pada demo berikut — klik select untuk melihat kedua optgroup-nya, centang beberapa menu sekaligus, lalu pilih satu radio dan lihat bagaimana memilih satu melepas yang lain:

Ringkasan Bagian 3 #

• Frekuensi berkunjung memakai empat radio segrup name="frekuensi" dengan required pada satu anggota.
• Menu favorit memakai lima checkbox name="menu[]" — jawaban berganda, boleh kosong, tidak dicentang tidak terkirim.
• Sumber informasi memakai select ber-optgroup dengan opsi placeholder disabled — opsional, nilai kosong terkirim bila dilewatkan.

Bagian berikutnya mengisi fieldset Umpan balik sekaligus menguji seluruh atribut validasi form.