HTML 06: Dasar Form, Label, dan Input

Form memungkinkan pengguna mengirim informasi, misalnya saat mencari produk, masuk ke akun, atau mengisi formulir kontak.

Tujuan Belajar

• Membuat struktur form sederhana.
• Menghubungkan label dengan input.
• Memahami fungsi name, type, dan button.
• Menggunakan textarea serta select.

1. Form Pertama

action menentukan tujuan pengiriman data. method="post" biasanya digunakan ketika data dikirim untuk diproses atau disimpan. Pada latihan lokal, tombol belum benar-benar menyimpan apa pun karena kita belum membuat server.

2. Hubungan Label dan Input

Nilai for pada label harus sama dengan id input.

Pengguna dapat mengklik label untuk memfokuskan input. Hubungan ini juga penting bagi pembaca layar. Placeholder bukan pengganti label karena menghilang ketika pengguna mulai mengetik.

3. Mengapa name Penting?

Saat form dikirim, browser mengirim pasangan nama dan nilai. Jika pengguna mengisi “Ayu”, data sederhananya menyerupai nama=Ayu. Input tanpa name biasanya tidak ikut terkirim.

4. Pilihan dan Pesan Panjang

Teks yang terlihat pada option boleh berbeda dari value yang dikirim.

5. Radio dan Checkbox

Radio dalam satu kelompok menggunakan name yang sama.

fieldset dan legend menjelaskan hubungan beberapa kontrol.

Kesalahan Umum

• Menggunakan placeholder tanpa label.
• Memberikan id yang sama pada beberapa input.
• Lupa atribut name.
• Menganggap form HTML otomatis menyimpan data tanpa server.

Latihan

Buat form kontak berisi nama, email, topik, pesan, pilihan newsletter, dan tombol kirim. Pastikan semua kontrol memiliki label.

Rangkuman

Form mengumpulkan data melalui kontrol yang memiliki label dan name. HTML mendefinisikan struktur dan perilaku dasar; validasi lebih lanjut dibahas pada HTML 06B.