Cara Membuat Form di HTML (tag form)
Elemen <form>
Elemen HTML <form> mendefinisikan bentuk yang digunakan untuk mengumpulkan masukan pengguna:
<form>
.
form elements
.
</form>
form HTML berisi elemen formulir.
Elemen formulir adalah berbagai jenis elemen masukan, seperti bidang teks, kotak centang, tombol radio, tombol kirim, dan banyak lagi.
Elemen <input>
Elemen <input> adalah elemen bentuk yang paling penting.
Elemen <input> dapat ditampilkan dalam beberapa cara, tergantung pada atribut tipe.
Berikut adalah beberapa contohnya:
| Type | Description |
|---|---|
| <input type="text"> | Mendefinisikan field input teks satu baris |
| <input type="radio"> | Mendefinisikan sebuah tombol radio (untuk memilih salah satu dari banyak pilihan) |
| <input type="submit"> | Mendefinisikan tombol kirim (untuk mengirimkan formulir) |
Anda akan belajar lebih banyak tentang jenis masukan nanti di tutorial ini.
Input Teks
<input type = "text"> mendefinisikan field input satu baris untuk input teks:
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Catatan: form itu sendiri tidak terlihat. Perhatikan juga bahwa lebar default bidang teks adalah 20 karakter.
Masukan Tombol Radio
<input type = "radio"> mendefinisikan sebuah tombol radio.
Tombol radio membiarkan pengguna memilih SATU dari sejumlah pilihan terbatas:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Submit kirim
<input type = "submit"> mendefinisikan sebuah tombol untuk mengirimkan data formulir ke form-handler.
Form-handler biasanya adalah halaman server dengan script untuk memproses data masukan.
Form-handler ditentukan dalam atribut action:
<form action="/action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Atribut Action
Atribut Action mendefinisikan tindakan yang akan dilakukan saat formulir dikirimkan.
Biasanya, form data dikirim ke halaman web di server saat pengguna mengklik tombol submit.
Pada contoh di atas, form data dikirim ke halaman di server yang bernama "/action_page.php". Laman ini berisi skrip sisi server yang menangani data formulir:
<form action="/action_page.php">
Jika atribut action dihilangkan, tindakan diatur ke halaman ini.
Atribut Target
Atribut target menentukan apakah hasil yang diajukan akan terbuka di tab browser baru, bingkai, atau di jendela aktif.
Nilai defaultnya adalah "_self" yang berarti form akan diserahkan di jendela saat ini.
Agar hasil form terbuka di tab browser baru, gunakan nilai "_blank":
<form action="/action_page.php"
target="_blank">
Nilai lainnya adalah "_parent", "_top", atau nama yang mewakili nama iframe.
Atribut Metode
Atribut metode menentukan metode HTTP (GET atau POST) yang akan digunakan saat mengirimkan data formulir:
<form action="/action_page.php" method="get">
atau
<form action="/action_page.php" method="post">
Kapan Menggunakan GET?
Metode default saat mengirimkan data form adalah GET.
Namun, saat GET digunakan, data formulir yang diajukan akan terlihat di kolom alamat halaman:
/action_page.php?firstname=Mickey&lastname=Mouse
Catatan tentang GET:
- Tambahkan data formulir ke dalam URL pada pasangan nama / nilai
- Panjang URL terbatas (sekitar 3000 karakter)
- Jangan pernah menggunakan GET untuk mengirim data sensitif! (akan terlihat di URL)
- Berguna untuk pengiriman form dimana pengguna ingin membookmark hasilnya
- GET lebih baik untuk data yang tidak aman, seperti string kueri di Google
Kapan Menggunakan POST?
Selalu gunakan POST jika data form berisi informasi sensitif atau personal. Metode POST tidak menampilkan data formulir yang diajukan di kolom alamat halaman.
Catatan tentang POST:
- POST tidak memiliki batasan ukuran, dan dapat digunakan untuk mengirim sejumlah besar data.
- Form pengiriman dengan POST tidak bisa di bookmark
Atribut Name
Setiap field masukan harus memiliki atribut Name untuk disampaikan.
Jika atribut Name dihilangkan, data field masukan itu tidak akan dikirim sama sekali.
Contoh ini hanya akan mengirimkan kolom masukan "Nama belakang":
<form action="/action_page.php">
First name:<br>
<input type="text"
value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Pengelompokkan Data Form dengan <fieldset>
Elemen <fieldset> digunakan untuk mengelompokkan data terkait dalam suatu formulir.
Elemen <legend> mendefinisikan caption untuk elemen <fieldset>.
<form action="/action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
HTML Tag Reference
Berikut adalah daftar atribut <form>:
| Attribute | Description |
|---|---|
| accept-charset | Menentukan charset yang digunakan dalam form yang dikirimkan (default: charset halaman). |
| action | Menentukan sebuah alamat (url) dimana untuk mengirimkan form (default: the submitting page). |
| autocomplete | Menentukan apakah browser harus melengkapi otomatis formulir (default: on). |
| enctype | Menentukan pengkodean data yang dikirimkan (default: adalah url-encoded). |
| method | Menentukan metode HTTP yang digunakan saat mengirimkan formulir (default: GET). |
| name | Menentukan nama yang digunakan untuk mengidentifikasi formulir (untuk penggunaan DOM: document.forms.name). |
| novalidate | Menentukan bahwa browser tidak boleh memvalidasi formulir. |
| target | Menentukan target alamat di atribut tindakan (default: _self). |
Anda akan belajar lebih banyak tentang atribut form di bab-bab berikutnya.
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2