Formulir dan Input Pengguna
Membuat formulir interaktif, jenis-jenis input, dan validasi sederhana.
Formulir: Interaksi dengan Pengguna
Formulir adalah cara utama pengguna mengirim data ke server. Mulai dari login, registrasi, pencarian, hingga komentar—semuanya menggunakan <form>.
Struktur Dasar Form
<form action="/proses" method="post">
<!-- elemen input diletakkan di sini -->
<button type="submit">Kirim</button>
</form>
action: URL tujuan pengiriman data.method: metode HTTP, biasanyaget(data di URL) ataupost(data di body).
Gunakan
post untuk data sensitif (password) atau yang mengubah keadaan. Gunakan get untuk pencarian agar hasilnya bisa di-bookmark.Macam-macam Elemen Input
<input> — Si Serbaguna
Atribut type menentukan bentuk input.
<form>
<!-- Text biasa -->
<label>Nama: <input type="text" name="nama"></label><br>
<!-- Email (validasi otomatis browser) -->
<label>Email: <input type="email" name="email"></label><br>
<!-- Password (karakter tersembunyi) -->
<label>Password: <input type="password" name="password"></label><br>
<!-- Number (dengan tombol panah) -->
<label>Umur: <input type="number" name="umur" min="1" max="120"></label><br>
<!-- Tanggal -->
<label>Lahir: <input type="date" name="tanggal"></label><br>
<!-- Checkbox -->
<label><input type="checkbox" name="setuju" value="ya"> Saya setuju</label><br>
<!-- Radio (pilih satu) -->
<label><input type="radio" name="jenis_kelamin" value="laki"> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan"> Perempuan</label><br>
<!-- File upload -->
<label>Upload CV: <input type="file" name="cv"></label><br>
<button type="submit">Kirim</button>
</form>
Atribut
name sangat penting. Dialah yang menjadi kunci data saat dikirim ke server.<textarea> — Input Banyak Baris
Untuk teks panjang seperti komentar atau pesan.
<label>Pesan:<br>
<textarea name="pesan" rows="4" cols="40" placeholder="Tulis pesan di sini..."></textarea>
</label>
<select> — Dropdown
Pilihan dalam bentuk menu tarik turun.
<label>Kota:
<select name="kota">
<option value="jkt">Jakarta</option>
<option value="bdg">Bandung</option>
<option value="sby">Surabaya</option>
</select>
</label>
Gunakan <optgroup> untuk mengelompokkan pilihan.
Tombol
<button type="submit">mengirim formulir.<button type="reset">mengembalikan ke nilai awal.<button type="button">tidak melakukan apa-apa, biasa untuk JavaScript.
<button type="submit">Simpan</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Halo!')">Klik Saya</button>
Validasi Sederhana (HTML5)
HTML5 menyediakan validasi bawaan tanpa JavaScript.
| Atribut | Fungsi |
|---|---|
required | Input wajib diisi. |
minlength / maxlength | Batas panjang karakter. |
min / max | Batas angka atau tanggal. |
pattern | Cocokkan dengan regex (contoh: pattern="[A-Za-z]{3}"). |
type="email" / type="url" | Memastikan format email/URL valid. |
<form>
<label>Nama lengkap (wajib): <input type="text" name="nama" required minlength="3"></label><br>
<label>Kode pos (5 digit): <input type="text" name="kodepos" pattern="[0-9]{5}" title="Harus 5 angka"></label><br>
<label>Email valid: <input type="email" name="email" required></label><br>
<button type="submit">Cek</button>
</form>
Validasi HTML5 hanya di sisi klien. Untuk keamanan, validasi juga harus dilakukan di server karena pengguna bisa mematikan JavaScript atau mengirim request langsung.
Latihan: Formulir Pendaftaran Sederhana
Buat formulir dengan:
- Nama (text, required)
- Email (email, required)
- Password (password, minlength 6)
- Jenis kelamin (radio)
- Setuju syarat & ketentuan (checkbox, required)
- Tombol Daftar
<form action="/daftar" method="post">
<label>Nama lengkap: <input type="text" name="nama" required minlength="2"></label><br>
<label>Email: <input type="email" name="email" required></label><br>
<label>Password: <input type="password" name="password" required minlength="6"></label><br>
<label>Jenis kelamin:</label><br>
<label><input type="radio" name="gender" value="L" required> Laki-laki</label>
<label><input type="radio" name="gender" value="P"> Perempuan</label><br>
<label><input type="checkbox" name="setuju" required> Saya menyetujui syarat dan ketentuan</label><br>
<button type="submit">Daftar</button>
</form>
MDN menyediakan dokumentasi semua atribut dan tipe input.