Form & Input HTML
Membuat Form Interaktif
Formulir (Form) digunakan untuk mengumpulkan masukan/data dari pengguna, seperti pendaftaran akun, form pencarian, pesan kontak, atau login.
1. Elemen Pembungkus <form>
Seluruh elemen input ditempatkan di dalam tag <form>.
Atribut penting pada <form>:
-
action: URL atau endpoint yang menerima data form saat dikirim. -
method: Metode pengiriman data, umumnyaGET(dikirim via URL) atauPOST(dikirim di dalam request body secara tersembunyi).
<form action="/proses-login" method="POST">
<!-- Elemen-elemen input berada di sini -->
</form>
2. Elemen Teks & Label (<label> & <input>)
Tag <label> digunakan untuk memberikan petunjuk/nama pada elemen input. Atribut for pada label dihubungkan dengan atribut id pada input.
<!-- Input Teks Biasa -->
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Masukkan username Anda">
</div>
<!-- Input Password -->
<div>
<label for="password">Kata Sandi:</label>
<input type="password" id="password" name="password">
</div>
3. Pilihan (Radio Button & Checkbox)
Radio Button (type="radio")
Digunakan jika pengguna hanya boleh memilih 1 pilihan dari beberapa opsi. Semua opsi radio yang berada dalam satu grup harus memiliki nama (name) yang sama.
<p>Pilih Jenis Kelamin:</p>
<input type="radio" id="pria" name="gender" value="pria">
<label for="pria">Laki-laki</label>
<input type="radio" id="wanita" name="gender" value="wanita">
<label for="wanita">Perempuan</label>
Checkbox (type="checkbox")
Digunakan jika pengguna boleh memilih lebih dari 1 pilihan.
<p>Pilih Hobi Anda:</p>
<input type="checkbox" id="hobi1" name="hobi" value="koding">
<label for="hobi1">Koding</label>
<input type="checkbox" id="hobi2" name="hobi" value="gaming">
<label for="hobi2">Gaming</label>
4. Dropdown List (<select> & <option>)
Digunakan untuk menyajikan daftar pilihan dalam bentuk menu gantung (dropdown).
<label for="kota">Pilih Kota Asal:</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>
5. Textarea (Teks Multi-Baris)
Digunakan untuk menerima masukan teks panjang seperti pesan, alamat, atau komentar.
<label for="pesan">Pesan Anda:</label><br>
<textarea id="pesan" name="pesan" rows="4" cols="50" placeholder="Tuliskan pesan Anda..."></textarea>
6. Tombol Submit & Reset
Untuk mengirimkan form ke server atau mengosongkan seluruh field form.
<!-- Mengirim Form -->
<button type="submit">Kirim Data</button>
<!-- Mengosongkan Form -->
<button type="reset">Batal</button>
