Identitas Responden

Kerangka sudah berdiri; kita isi kelompok pertama. Fieldset Identitas memuat tiga kontrol — nama, email, usia — dan tiap kontrol datang sebagai satu paket: label, type, atribut validasi, dan bantuan pengisian. Seluruh kebiasaan dari Section Forms dan Form Validation terpakai sekaligus pada enam baris berikut.

Tiga Kontrol Identitas #

Ganti komentar penanda di dalam fieldset Identitas dengan kontrol berikut — sama persis dengan baris 20-25 berkas final:

        <label for="nama">Nama lengkap</label>
        <input type="text" id="nama" name="nama" required autocomplete="name">
        <label for="email">Alamat email</label>
        <input type="email" id="email" name="email" required autocomplete="email">
        <label for="usia">Usia (tahun)</label>
        <input type="number" id="usia" name="usia" min="13" max="100" required>

Mari kita bedah tiap kontrol:

1. label for dan id (baris 1, 3, 5): tiap label terikat ke kontrolnya lewat pasangan for/id yang sama — klik pada label memfokuskan kolomnya, dan pembaca layar mengumumkan nama kolom sebelum nilai di dalamnya. Pola pengikatan dari chapter Label.
2. required pada ketiganya (baris 2, 4, 6): identitas adalah data inti survei — satu saja kosong, submit ditahan lengkap dengan pesan bawaan browser.
3. autocomplete="name" dan autocomplete="email" (baris 2, 4): token baku dari spesifikasi HTML, bukan teks bebas. Browser yang menyimpan identitas penggunanya menawarkan isian itu — satu ketukan mengisi nama dan email tanpa mengetik ulang. Bantuan dari chapter Autocomplete.
4. type="email" (baris 4): sekali pasang, dua hasil — papan ketik ponsel menyesuaikan (tombol @ dan . siap), dan pemeriksaan format email aktif tanpa JavaScript, materi chapter Validasi Berdasarkan Type.
5. type="number" dengan min dan max (baris 6): kolom usia hanya menerima angka pada rentang 13-100; nilai di luar rentang ditahan saat submit — materi chapter Min dan Max yang dibedah di bagian bawah.
6. Satuan di label (baris 5): “Usia (tahun)” — satuan ditulis pada label, bukan ditebak pengguna. Kebiasaan instruksi format dari chapter Label dan Instruksi Form.

Ringkasnya, tiga kontrol pertama membawa beban berbeda:

Rentang Usia 13-100 #

Dua angka pada kolom usia adalah keputusan, bukan formalitas. Angka 13 mengikuti kebiasaan layanan daring yang mengumpulkan data penggunanya: banyak layanan menetapkan usia minimum di angka itu, dan survei warung tidak punya alasan menampung responden yang lebih muda. Angka 100 menjadi plafon yang realistis, bukan batas mutlak — tugasnya menahan nilai yang tergambar di luar kewajaran, misalnya usia yang diketik berlipat karena salah menekan tombol.

Rentang ini juga contoh nyata pembagian kerja yang dibedah chapter Min dan Max: browser menolak nilai di luar rentang sebelum data berangkat, sementara kolom tetap menerima jawaban sah apa pun di dalamnya tanpa daftar pilihan yang mengikat.

Hasil pada Browser #

Tiga kolom tampil dengan labelnya di atas. Di ponsel, kolom email membuka papan ketik dengan tombol @, dan kolom usia membuka papan ketik angka — pemilihan type mengubah perangkat ketik sebelum satu karakter diketik. Isi nama lalu tekan Kirim Survei: submit sekarang ditahan di kolom email yang masih kosong, lengkap dengan pesan bawaan — perilaku menahan yang dijanjikan pada Bagian 1 sudah aktif.

Kirim kosong pada demo berikut dan lihat penahannya — fokus jatuh di kolom Nama lengkap lengkap dengan pesan bawaannya; isi nama, tekan lagi, dan giliran kolom email yang menahan:

Ringkasan Bagian 2 #

• Tiga kontrol identitas memakai label for/id, required, dan autocomplete token baku.
• type="email" dan type="number" membawa validasi format serta papan ketik ponsel yang sesuai.
• Usia dibatasi rentang 13-100 lewat min/max — menahan nilai di luar kewajaran tanpa membatasi jawaban sah.

Bagian berikutnya mengisi fieldset Kebiasaan berkunjung dengan tiga jenis kontrol pilihan.