Form merupakan elemen yang digunakan untuk membuat struktur input untuk pengguna layaknya sebuah formulir. Elemen form dimulai dengan tag <form> dan diakhir dengan tag penutup </form>. Elemen - elemen yang digunakan untuk menerima input dari user diletakkan di dalam elemen form. Secara struktur, elemen form mirip dengan elemen list atau table yang mana digunakan untuk membungkus elemen - elemen lainnya yang digunakan untuk kebutuhan menerima input dari user.
Syntax dasar :
<form>
........
........
</form>Di dalam elemen form anda dapat meletakkan elemen apa saja, namun yang paling utama adalah elemen - elemen input yang digunakan untuk menerima input dari user. Berikut contoh penggunaan sederhana dari form :
<form action="./proses.php" enctype="application/x-www-form-urlencoded"
method="get">
<p>Silahkan isi kolom berikut :</p>
<label for="nama">Nama</label><br />
<input name="nama" type="text" placeholder="Isi Nama" /><br />
<label for="hobi">Hobi</label><br />
<input name="hobi" type="text" placeholder="Input Hobi" /><br />
<input type="submit" value="Kirim" />
</form>
Pada contoh kode diatas, dapat dilihat beberapa atribut umum yang sering digunakan pada elemen form seperti action, method, name, dan enctype. Atribut action memberi tahu browser kemana tujuan data dari form akan dikirim. Atribut action biasanya menuju kepada script yang ada di server agar data dari form dapat di proses seperti penyimpanan di database, pemeriksaan input atau hanya sekedar mencetak kembali input yang diberikan oleh pengguna. Pada contoh kode diatas, atribut action berisikan "./proses.php". Nilai atribut ini menunjukkan bahwa target data dari form adalah script proses.php yang berada pada alamat "./proses.php". Tanda "./" menandakan lokasi relatif yang artinya lokasi script proses.php sama dengan lokasi script pemanggil dimana form berada. Lokasi relatif akan dibahas pada artikel yang lain.
Atribut action dapat berupa file script PHP atau ASP yang merupakan file script web server. Atribut action juga dapat berisi nilai "#" yang artinya data akan dikirimkan kembali ke script dimana form berada. Atribut lainnya adalah method, method menentukan metode pengiriman data yang dilakukan. Apakah data dikirimkan dalam bentuk variabel pada URL (get) atau dikirim dalam bentuk post. Method get akan mengirimkan nilai dari form dalam bentuk variabel URL yang mana nilai yang dikirimkan akan terlihat pada alamat URL di browser. Sedangkan method post akan mengirimkan nilai dalam bentuk transaksi post yang tidak akan terlihat pada halaman url pada browser.
Atribut enctype menentukan bagaimana data yang dikirimkan dari form di encoding. Untuk keterangan detail tentang atribut ini akan kita bahas di bagian selanjutnya. Di dalam elemen form dapat anda lihat terdapat elemen input. Elemen input merupakan elemen yang secara visual akan tampil di halaman web yang dapat menerima input dari pengguna seperti input text biasa, input pilihan dan input - input lainnya.
Form Atribute
Secara umum terdapat beberapa atribut dari form yang sangat sering digunakan yaitu sebagai berikut :
| Atribut | Keterangan |
| action | menentukan alamat atau script penerima data yang akan dikirimkan oleh form. |
| method | menentukan metode pengiriman (GET / POST). |
| name | menspesifikasikan nama dari form untuk pengenal jika anda memiliki form lebih dari satu pada satu halaman web. |
| enctype | menentukan tipe encoding data pada saat akan dikirimkan. |
| target | sama seperti link, menentukan bagaimana browser akan mengirimkan data, apakah dengan membuka tab baru, atau menimpa window saat ini. |
| rel | sama seperti link, menentukan tipe hubungan antara dokumen dimana form berada dengan alamat atau script tujuan. |
| novalidate | memberitahu browser bahwa tidak perlu ada validasi data pada saat data dikirimkan. Browser biasanya melakukan validasi sederhana terhadap data seperti format email jika menggunakan input type="email" dan validasi lainnya. Dengan novalidate browser tidak akan melakukan validasi apapun dan langsung mengirimkan data. contoh : novalidate="true" atau novalidate="false" |
| autocomplete | menspesifikasikan form mengizinkan autocomplete atau tidak berdasarkan history atau save password dari browser. contoh autocomplete="on" atau autocomplete="off" |
| accept-charset | menentukan charset yang digunakan oleh form. |
Enctype
Enctype menentukan jenis encoding dari data yang akan dikirimkan. Pada Form, tersedia tiga pilihan nilai yaitu :
- application/x-www-form-urlencoded, merupakan nilai default dimana semua karakter di encoding menggunakan urlencoded dan spasi akan dirubah menjadi tanda "+". Gunakan enctype ini untuk form biasa.
- multipart/form-data, merupakan nilai atribut yang akan membagi data menjadi beberapa bagian dan mengirimkannya ke alamat tujuan. Gunakan enctype ini jika ingin melakukan file upload menggunakan input type="file".
- text/plain, mengirimkan data tanpa proses encoding apapun, tidak direkomendasikan.
Method
Kita telah membahas sebelumnya mengenai atribut method yang mana terdiri dari dua nilai yaitu get atau post. Nah ada beberapa catatan yang harus diperhatikan dalam pemilihan method :
- Method GET atau get, menambahkan data dari form pada alamat URL, sehingga jangan menggunakan method ini pada form yang bersifat sensitif seperti login, registrasi, dsb.
- Method GET atau get sangat baik untuk proses query yang informasinya tidak sensitif dan dapat di bookmark.
- Method POST atau post tidak memiliki batasan panjang data dan tidak dapat di bookmark. Data dari post akan dibungkus di dalam body HTTP request sehingga tidak akan kelihatan pada alamat URL.
Baiklah sekian dulu artikel mengenai Form pada HTML, di lain artikel kita akan membahas elemen - elemen input yang dapat digunakan pada elemen form. Semoga artikel ini bermanfaat, stay tuned... 😉
Source :
