📝 Form Sederhana

Formulir atau form itu penting banget di web, apalagi kalau websitenya interaktif. Lewat form, pengguna bisa ngisi data, mulai dari nama, email, sampai upload file atau kasih komentar. Kamu pasti sering lihat form di halaman pendaftaran, login, kontak, atau kolom pencarian kan? Nah, semua itu dibuat pakai tag HTML yang udah disediakan khusus untuk bikin form.
HTML punya banyak jenis input yang bisa kamu pakai, seperti <input> buat teks atau password, <textarea> buat kolom isi panjang, dan <select> buat pilihan dropdown. Semuanya dibungkus dalam tag <form> supaya bisa dikirim ke server atau diproses pakai JavaScript.
Intinya, kalau kamu mau bikin halaman web yang bisa nerima data dari pengguna, form adalah kuncinya. Di materi berikutnya, kamu akan kenalan lebih dekat sama tag-tag penting dalam form HTML dan gimana cara pakainya.

✉️ Struktur Umum Form

<form>
  <label for="nama">Nama:</label><br>
  <input type="text" id="nama" name="nama"><br>
  
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br><br>
  
  <button type="submit">Kirim</button>
</form>

Penjelasan dari masing-masing tag di atas sebagai berikut:

<form>, ini tag utama buat bungkus semua bagian form. Semua input harus ada di dalam tag ini supaya bisa dikirim bareng-bareng.
<label>, dipakai buat kasih nama atau keterangan ke input. Kalau for di label-nya sama kayak id di input, klik label-nya juga bisa langsung fokus ke input-nya.
<input>, ini tag paling sering dipakai buat form. Bisa disetel jadi teks, email, password, checkbox, radio, dan lainnya lewat atribut type.
<textarea>, cocok buat input yang panjang kayak komentar atau pesan. Bedanya, ini bisa nulis lebih dari satu baris.
<button> atau <input type="submit">, ini tombol buat ngirim form. Setelah diklik, data yang udah diisi bakal dikirim ke server.

💻 Contoh Kode:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Formulir Kontak</title>
  </head>
  <body>
    <h1>Hubungi Kami</h1>

    <form>
      <p>
        <label for="nama_lengkap">Nama Lengkap:</label><br />
        <input type="text" id="nama_lengkap" name="nama_lengkap" required />
      </p>

      <p>
        <label for="alamat_email">Alamat Email:</label><br />
        <input type="email" id="alamat_email" name="alamat_email" required />
      </p>

      <p>
        <label for="pesan">Pesan Anda:</label><br />
        <textarea id="pesan" name="pesan" rows="5" cols="30"></textarea>
      </p>
      
      <button type="submit">Kirim Pesan</button>
    </form>
  </body>
</html>

⚙️ Demo Interaktif:

💡 Tips: Selalu gunakan tag <label> untuk setiap input. Mengklik label akan otomatis mengarahkan kursor ke dalam kotak input yang terhubung.