Form, Label, dan Input
Bangun form sederhana dan hubungkan label dengan input agar field mudah dipahami.
Tujuan belajar
- Memahami fungsi form, label, dan input
- Menghubungkan label ke input dengan for dan id
- Membuat field email sederhana yang lebih jelas dibaca
Isi lesson
6 blok- 1.Form mengumpulkan input dari userBelum selesaiWajib
- 2.Form email sederhanaBelum selesaiWajib
- 3.Label harus benar-benar terhubungBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Coding practiceBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Form mengumpulkan input dari user
WajibForm dipakai ketika halaman perlu menerima data dari user. Label menjelaskan nama atau instruksi sebuah field. Input adalah tempat user mengetik atau memilih nilai. Label bukan sekadar teks yang kebetulan berada di dekat input. Untuk form yang lebih jelas dan lebih accessible, label sebaiknya terhubung ke input.
Bagian ini memengaruhi progres lesson.
Form email sederhana
Wajib<form>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
<button type="submit">Daftar</button>
</form>form mengelompokkan field. label for="email" menunjuk ke input id="email". name membantu mengenali nilai saat form dikirim. type="email" memberi tahu browser bahwa field ini berisi email. Button submit dipakai untuk mengirim form.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibLabel harus benar-benar terhubung
Menaruh teks Email di dekat input belum cukup. Nilai for pada label harus cocok dengan id pada input. Koneksi ini membantu browser dan assistive technology memahami field dengan lebih jelas.
Bagian ini memengaruhi progres lesson.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Agar label 'Email' terhubung ke input, pasangan mana yang harus cocok?
Progres lesson naik setelah jawaban benar.
Coding practice
WajibDibuka di workspace khususMembuat form email sederhana
Latihan membuat form email dengan label yang terhubung ke input.
Tujuan awal: Buat form sederhana untuk email.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- form mengelompokkan field yang diisi user.
- label menjelaskan field.
- input menerima data dari user.
- for dan id menghubungkan label ke input.
- Berikutnya, kamu akan menambah field textarea, select, dan required.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Form mengumpulkan input dari user.