Form dan Input
Tanpa form, internet hanya akan menjadi tempat untuk membaca. Form memungkinkan pengguna untuk berinteraksi: mendaftar akun, login, mengirim pesan, atau melakukan pencarian. Mari kita pelajari cara membangun antarmuka interaktif ini.
📝 Struktur Dasar Form
Setiap form dibungkus dengan tag <form>.
Di dalamnya, kita meletakkan berbagai elemen input dan tombol submit.
<form action="/login" method="POST">
<!-- Label untuk input -->
<label for="username">Username:</label>
<!-- Input teks -->
<input type="text" id="username" name="username">
<!-- Tombol kirim -->
<button type="submit">Login</button>
</form>⚙️ Atribut <form>
action
URL tujuan ke mana data form akan dikirimkan saat di-submit (misal: "/proses-login").
method
Cara pengiriman data. Gunakan GET untuk pencarian dan POST untuk data sensitif/login.
🎛️ Berbagai Jenis Input
Tag <input> sangat canggih. Atribut
type dapat mengubah input dari sekadar
kotak teks menjadi kalender, pemilih warna, atau tombol radio.
type="text"
type="password"
type="email"
type="number"
type="date"
type="color"
type="radio"
Jenis Kelamin (Pilih Satu)
type="checkbox"
Hobi (Pilih Banyak)
📦 Textarea & Dropdown
<!-- Textarea untuk teks panjang (multi-line) -->
<label for="pesan">Pesan Anda:</label>
<textarea id="pesan" name="pesan" rows="4"></textarea>
<!-- Select Dropdown -->
<label for="kota">Pilih Kota:</label>
<select id="kota" name="kota">
<option value="jkt">Jakarta</option>
<option value="bdg">Bandung</option>
<option value="sby">Surabaya</option>
</select>Daftar pilihan drop-down menggunakan tag <select> dan <option>.
🏷️ Mengapa Label Penting?
Tag <label> memberitahu pengguna (dan screen reader)
apa fungsi dari sebuah input. Mengklik label juga akan otomatis mengaktifkan (focus) input terkait.
🛠️ Atribut Input Penting (Selain type)
name
Wajib ada jika dikirim! Ini adalah kunci data di sisi server (misal: "email_user").
id
Identitas unik untuk dihubungkan dengan for di label atau untuk JavaScript.
placeholder
Teks bayangan petunjuk di dalam kolom kosong.
required
Validasi otomatis browser. Input tidak boleh kosong sebelum submit.
disabled
Membuat input tidak bisa diisi atau diklik.
💻 Contoh Lengkap: Form Pendaftaran
<form action="/register" method="POST">
<!-- Fieldset untuk mengelompokkan input -->
<fieldset>
<legend>Informasi Pribadi</legend>
<div>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="full_name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="level">Pengalaman:</label>
<select id="level" name="level">
<option value="newbie">Pemula</option>
<option value="pro">Bisa Coding</option>
</select>
</div>
<div>
<label>
<input type="checkbox" name="terms" required>
Saya setuju dengan syarat & ketentuan.
</label>
</div>
<button type="submit">Daftar Sekarang</button>
</fieldset>
</form>📋 Ringkasan
<form>
membungkus grup input. Atribut action = alamat
tujuan. Atribut method = POST/GET.
<input> beragam: text, email, password,
number, radio, checkbox, date, color.
<textarea> untuk paragraf panjang & <select> untuk drop-down pilihan.
<label for="..."> dan atribut name="..." yang unik.
required untuk memaksa input agar diisi sebelum
submit.