Praktikum HTML Forms

Mengumpulkan Input dari Pengguna

Pengertian

HTML Form adalah salah satu bagian paling interaktif dari sebuah website. Form digunakan untuk mengumpulkan input dari pengguna, seperti data registrasi, pesan kontak, atau kueri pencarian. Form dibangun menggunakan tag <form> sebagai pembungkus dan berbagai macam elemen input di dalamnya.

Analogi

Analogi: Formulir Kertas
Bayangkan sebuah form HTML sebagai formulir pendaftaran kertas. Tag <form> adalah kertasnya itu sendiri. Elemen-elemen seperti <input type="text"> adalah baris kosong untuk mengisi nama, <input type="radio"> adalah kotak pilihan jenis kelamin yang hanya bisa dipilih satu, dan <button type="submit"> adalah tombol "Kumpulkan" yang akan Anda serahkan ke panitia (server).

Elemen-elemen Form

1. Input Teks (text, password, email)

<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">

<label for="pass">Password:</label>
<input type="password" id="pass" name="pass">

Penjelasan: <label> memberikan deskripsi. Atribut for pada label terhubung dengan id pada input, ini penting untuk aksesibilitas. Atribut name digunakan untuk identifikasi data saat dikirim ke server.

2. Pilihan (radio & checkbox)

Jenis Kelamin:


Hobi:


<input type="radio" id="lk" name="gender">
<label for="lk">Laki-laki</label>

<input type="checkbox" id="hobi1">
<label for="hobi1">Membaca</label>

Penjelasan: Untuk radio, semua pilihan yang berhubungan harus memiliki atribut name yang sama agar hanya satu yang bisa dipilih. Untuk checkbox, pengguna bisa memilih lebih dari satu.

3. Area Teks (<textarea>)

<label for="alamat">Alamat:</label>
<textarea id="alamat" name="alamat" rows="4"></textarea>

Penjelasan: Digunakan untuk input teks yang panjang atau multi-baris. Atribut rows menentukan tinggi awal area teks.

4. Daftar Pilihan (<select>)

<label for="jurusan">Jurusan:</label>
<select name="jurusan" id="jurusan">
  <option value="tjkt">TJKT</option>
  <option value="pplg">PPLG</option>
</select>

Penjelasan: <select> membuat menu dropdown. Setiap pilihan di dalamnya didefinisikan dengan tag <option>. Atribut value pada option adalah nilai yang akan dikirim ke server.

5. Tombol (button, submit, reset)

<button type="submit">Kirim</button>
<button type="reset">Reset</button>
<button type="button">Tombol Biasa</button>

Penjelasan: type="submit" akan mengirimkan form. type="reset" akan mengembalikan semua isian ke nilai awal. type="button" adalah tombol biasa yang umumnya diberi fungsi dengan JavaScript.

Latihan Mandiri

Tugas: Membuat Form Pendaftaran Lengkap

  1. Buat sebuah file HTML dengan struktur form lengkap (<form>).
  2. Buat field untuk "Nama Lengkap" (text).
  3. Buat field untuk "Email" (email).
  4. Buat pilihan "Jenis Kelamin" (radio button).
  5. Buat pilihan "Kelas" menggunakan dropdown (select) dengan opsi "Kelas X", "Kelas XI", "Kelas XII".
  6. Buat area teks (textarea) untuk "Alamat".
  7. Buat checkbox untuk persetujuan "Saya setuju dengan syarat dan ketentuan".
  8. Terakhir, tambahkan tombol "Daftar" (submit).

Kesimpulan

Form adalah jembatan antara pengguna dan aplikasi web. Dengan menguasai berbagai elemen form, kita dapat membuat antarmuka yang efektif untuk mengumpulkan data. Menggunakan elemen yang tepat (misalnya type="email" untuk email) dan selalu menyertakan <label> adalah praktik terbaik yang meningkatkan kegunaan dan aksesibilitas form Anda.