Formulir 1: Dasar Form & Input
Membuat formulir dengan form, input berbagai tipe, label, dan tombol. Memahami atribut name, type, action, dan method.
Mengapa formulir?
Formulir adalah cara pengunjung mengirim data ke website: login, pendaftaran, pencarian, pesan kontak, checkout. Hampir semua website dinamis bergantung padanya.
Bentuk dasar
<form action="/kirim" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
<button type="submit">Kirim</button>
</form>| Bagian | Fungsi |
|---|---|
<form> | Pembungkus seluruh isian |
action | Alamat tujuan pengiriman data |
method | get (data tampil di URL, cocok untuk pencarian) atau post (data tersembunyi, cocok untuk login/pendaftaran) |
<label> | Keterangan isian. Atribut for harus sama dengan id input-nya |
<input> | Kolom isian; perilakunya ditentukan atribut type |
name | Nama data saat dikirim ke server. Tanpa name, data tidak terkirim. |
<button> | Tombol; type="submit" mengirim formulir |
Label itu wajib
Label membuat formulir lebih mudah dipakai: mengeklik teks label otomatis memfokuskan kolomnya (area klik jadi lebih besar, penting di ponsel) dan pembaca layar tahu fungsi kolom itu. Ada dua cara menulisnya:
<!-- cara 1: for dan id -->
<label for="email">Email</label>
<input type="email" id="email" name="email">
<!-- cara 2: membungkus input -->
<label>Email <input type="email" name="email"></label>Tipe-tipe input
| type | Fungsi |
|---|---|
text | Teks satu baris (bawaan) |
email | Alamat email (divalidasi, keyboard ponsel menyesuaikan) |
password | Teks disamarkan |
number | Angka dengan tombol naik-turun |
tel | Nomor telepon |
url | Alamat website |
date | Pemilih tanggal |
search | Kolom pencarian |
color | Pemilih warna |
range | Penggeser nilai |
Tombol
Elemen <button> punya tiga tipe: submit (mengirim, bawaan), reset (mengosongkan form), dan button (tidak melakukan apa-apa sendiri; dipakai bersama JavaScript).
Keamanan: kolom password memang menyamarkan tampilan, tetapi data tetap harus dikirim lewat method="post" dan koneksi HTTPS.