Membuat Form Pada Website dengan HTML #1

Apa Itu Form HTML?

Form HTML diperlukan, ketika kita ingin mengumpulkan data dari pengunjung website kita. Dengan formulir kita dapat mengumpulkan data pengunjung berupa nama, alamat, nomor telpon, alamat email dan sebagainya.

Suatu formulir akan menangkap input dari pengunjung website dan kemudian mempostingnya ke aplikasi back-end seperti PHP. Aplikasi back-end akan melakukan pemrosesan yang diperlukan pada data yang dikirimkan berdasarkan pada logika bisnis yang ditentukan di dalam aplikasi.

Ada berbagai elemen yang tersedia dalam form, seperti text fields, textarea fields, drop-down menus, radio buttons, checkboxes, dll.

Membuat Form HTML

Untuk membuat Formulir pada website menggunakan HTML, kalian dapat menggunakan Tag HTML <form> untuk membuat formulir HTML.

Contoh Kode HTML untuk membuat Formulir (form):

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Membuat Form HTML Bersama SolusiLain.Com</title>
</head>
<body>
	<h3>Form Login</h3>
	<form method="POST" action="">
		Nama Depan <input type="text" name="nama_depan"> <br>
		Nama Belakang <input type="text" name="nama_belakang"> <br>
		<input type="submit" name="proses" value="Kirim">
	</form>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Belajar Membuat Form HTML Bersama SolusiLain.Com</title>

</head>

<body>

<h3>Form Login</h3>

Nama Depan <input type="text" name="nama_depan"> <br>

Nama Belakang <input type="text" name="nama_belakang"> <br>

</form>

</body>

</html>

Hasil tampilan dari kode HTML Form di atas adalah seperti gambar berikut ini.

Atribut Form

Berikut ini adalah daftar atribut yang sering digunakan dalam form HTML.

No.	Atribut & Deskripsi
1	action Atribut action mendefinisikan tindakan yang akan dilakukan ketika formulir dikirimkan.
2	method Atribut method digunakan untuk menentukan metode HTTP (GET atau POST) yang akan digunakan ketika mengirimkan data formulir.
3	target Atribut target digunakan untuk menentukan apakah proses form akan ditampilkan di tab browser baru, frame, atau di window/jendela saat ini. Nilainya dapat berupa _blank, _self, _parent dll.
4	enctype Kita dapat menggunakan atribut enctype untuk menentukan bagaimana browser melakukan encode data sebelum mengirimkannya ke server. Nilai yang digunakan adalah: application/x-www-form-urlencoded – Ini adalah metode standar yang paling banyak digunakan dalam skenario yang sederhana. mutlipart / form-data – Ini digunakan ketika kita ingin mengunggah data biner dalam bentuk file seperti gambar, file word, pdf dll.

Atribut Action Form HTML

Atribut action mendefinisikan tindakan yang akan dilakukan ketika formulir dikirimkan. Biasanya, data formulir dikirim ke sebuah halaman di server ketika pengguna mengklik tombol kirim/submit.

Contoh:

<form action="proses_data.php">

1	<form action="proses_data.php">

Dalam contoh di atas, data inputan pada formulir akan dikirim ke halaman “proses_data.php“. Halaman ini berisi script back-end yang akan menangani data dari formulir. Jika proses form dilakukan di halaman yang sama dengan form, maka nilai atribut action dapat dikosongkan.

Contoh:

<form action="">

1	<form action="">

Atribut Target pada Form HTML

Atribut target digunakan untuk menentukan apakah proses form akan ditampilkan di tab browser baru, frame, atau di window/jendela saat ini. Nilai default atribut target adalah “_self” yang berarti formulir akan dikirimkan di jendela saat ini. Untuk membuat hasil formulir terbuka di tab browser baru, gunakan nilai “_blank“.

Contoh :

<form target="_blank">

1	<form target="_blank">

Atribut Method pada Form HTML

Atribut method digunakan untuk menentukan metode HTTP (GET atau POST) yang akan digunakan ketika mengirimkan data formulir.

Contoh Penggunaan GET

<form action="proses_data.php" method="GET">

1	<form action="proses_data.php" method="GET">

Contoh Penggunaan POST

<form action="proses_dagta.php" method="POST">

1	<form action="proses_dagta.php" method="POST">

Perbedaan Method GET dan POST pada Form HTML

GET adalah method default pengiriman form. Saat menggunakan GET, maka data formulir akan ditampilkan pada URL dan dapat dilihat di address bar Web Browser.

Contoh :

<form method="GET" action="proses_data.php" target="">
	Nama Depan <input type="text" name="nama_depan"> <br>
	Nama Belakang <input type="text" name="nama_belakang"> <br>
	<input type="submit" name="proses" value="Kirim">
</form>

Nama Depan <input type="text" name="nama_depan"> <br>

Nama Belakang <input type="text" name="nama_belakang"> <br>

</form>

Ketika tombol Kirim di klik maka address bar akan terlihat seperti gambar berikut ini.

Sedangkan jika menggunakan method POST, data formulir tidak ditampilkan pada url, sehingga tidak dapat dilihat di address bar Web Browser.

Gunakan GET untuk mengirimkan data yang tidak membutuhkan keamanan. Jangan Gunakan GET untuk mengirimkan data yang sensitif karena berbahaya jika data dapat dilihat di histori penelusuran Web Browser.

Selalu gunakan POST jika data formulir berisi informasi sensitif atau pribadi. Metode POST tidak menampilkan data formulir di address bar Web Browser.

Demikian Tutorial Cara Membuat Form Pada Website dengan HTML. Setelah kalian mempelajari tutorial ini, untuk penggunaan method GET dan POST silahkan ditentukan sendiri sesuai dengan penjelasan di atas, tentu kalian lebih tau terhadap data atau informasi yang penting milik kalian atau data pada aplikasi web yang sedang kalian kembangkan.