Form & Input

Form digunakan untuk mengumpulkan data dari pengguna, seperti login, registrasi, atau pencarian. Data yang diisi pengguna nantinya bisa dikirim ke server untuk diproses.

Struktur Dasar Form

Tag <form> membungkus semua elemen input. Atribut action menentukan ke mana data dikirim, dan method menentukan cara pengirimannya.

<form action="proses.php" method="POST">
    <!-- elemen input di sini -->
</form>

• method="GET" — Data dikirim lewat URL (cocok untuk pencarian)
• method="POST" — Data dikirim tersembunyi di body (cocok untuk login, registrasi)

Input Teks

Tag <input> adalah elemen form yang paling sering digunakan. Jenisnya ditentukan oleh atribut type.

<form>
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama kamu">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="contoh@email.com">

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

Jenis-Jenis Input

• type="text" — Input teks satu baris
• type="email" — Input email (validasi otomatis)
• type="password" — Input yang karakternya disembunyikan
• type="number" — Input angka
• type="date" — Input tanggal (tampil kalender)
• type="checkbox" — Pilihan centang (bisa lebih dari satu)
• type="radio" — Pilihan bulat (hanya satu yang bisa dipilih)
• type="file" — Upload file
• type="submit" — Tombol kirim form

Checkbox & Radio

<!-- Checkbox -->
<label><input type="checkbox" name="hobi" value="coding"> Coding</label>
<label><input type="checkbox" name="hobi" value="desain"> Desain</label>

<!-- Radio -->
<label><input type="radio" name="gender" value="l"> Laki-laki</label>
<label><input type="radio" name="gender" value="p"> Perempuan</label>

Textarea & Select

Untuk input teks panjang gunakan <textarea>, untuk pilihan dropdown gunakan <select>.

<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="4" placeholder="Tulis pesanmu..."></textarea>

<label for="kota">Kota:</label>
<select id="kota" name="kota">
    <option value="">-- Pilih Kota --</option>
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="surabaya">Surabaya</option>
</select>

Tombol Submit

Gunakan <button> atau <input type="submit"> untuk mengirim data form.

<button type="submit">Kirim</button>

<!-- atau -->
<input type="submit" value="Kirim">