Ketika membuat website atau aplikasi berbasis web, kita tidak bisa lepas dengan yang namanya form. Form ini digunakan untuk menerima input dari user untuk kemudian diolah sesuai keperluan.
Seperti kita ketahui, form HTML hanya digunakan untuk (1) menerima input dari user dan (2) mengirim data tersebut ke alamat tertentu, selesai, ya sampai disitu saja fungsi dari form HTML ini, tentang bagaimana data tersebut diolah, bukan menjadi tanggung jawab form lagi.
I. Elemen Form HTML
Elemen form <form..> memiliki beberapa atribut penting yang akan menentukan kemana data dikirim dan dengan cara apa data dikirim, atribut tersebut adalah action dan method, misal kita buat file //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 dan //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 yang kita letakkan didalam folder htdocs
Isikan kode berikut ke dalam file form.php
<h1>Form HTML Dengan PHP</h1> <form action="proses.php" method="post"> <div> <label>Nama</label><input type="text" name="nama"/> </div> <div> <label>Email</label><input type="text" name="email"/> </div> <input type="submit" value="Simpan"/> </form>DEMO
Klik DEMO untuk langsung melihat hasil
1  Atribut Action
Atribut action berisi alamat url kemana data form tersebut akan dikirim. Pada contoh script diatas, kita isi atribut action dengan //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 sehingga, ketika tombol submit di klik, maka data form tersebut dikirim ke //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com3
URL Relative VS URL Absolute
Jika alamat url ( termasuk pada atribut action pada form) ditulis tanpa menggunakan //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com4 atau //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com5, maka alamat tersebut disebut relative url.
Misal pada contoh diatas, atribut action pada elemen //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com6 yang ada di dalam file //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 bernilai: //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1, artinya alamat tersebut relative (mengacu) pada posisi file //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 (path url //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 adalah <?php echo 'Nama : ' . $_GET['nama'] . '<br/>'; echo 'Email : ' . $_GET['email'];1)
Dengan demikian, karena file //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 berada satu folder dengan file //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 maka url untuk file //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 adalah <?php echo 'Nama : ' . $_GET['nama'] . '<br/>'; echo 'Email : ' . $_GET['email'];5
Jika atribut action kita isi <?php echo 'Nama : ' . $_GET['nama'] . '<br/>'; echo 'Email : ' . $_GET['email'];6 maka form akan dikirim ke <?php echo 'Nama : ' . $_GET['nama'] . '<br/>'; echo 'Email : ' . $_GET['email'];7
Selain url relative, kita juga dapat mengisi atribut action dengan url absolute, url absolute berarti alamat url ditulis penuh. misal //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com3
2 Atribut Method
Atribut method digunakan untuk menentukan dengan cara apa data dikirim. Atribut ini memiliki dua nilai, yaitu GET dan POST.
Method GET
Pada method GET, data pada form akan dikirim melalui url. Misal, pada form yang telah kita buat sebelumnya, kita beri atribut method dengan nilai <?php echo 'Nama : ' . $_GET['nama'] . '<br/>'; echo 'Email : ' . $_GET['email'];9, selanjutnya, kita isi isian nama, misal: Agus Prawoto Hadi dan email: prawoto.hadi@gmail.com, ketika kita klik tombol simpan, maka url akan berubah menjadi:
Pada gambar tersebut terlihat bahwa alamat url berubah menjadi:
//localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.comPada url diatas, bagian parameter yang berisi data form dimulai dengan tanda tanya, selanjutnya diikuti parameter dengan format  echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */0, antar parameter dipisah dengan tanda ampersand ( echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */1 )
Pada gambar diatas, terlihat bahwa echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */2 berubah menjadi echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */3 dan echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */4 berubah menjadi echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */5, hal ini dikarenakan ketika data dikirim via url, data tersebut akan diencode (URL encode).
Dalam URL Encode beberapa karakter akan diubah dengan karakter tertentu, namun tidak perlu khawatir, ketika data ditangkap oleh PHP, data tersebut akan di decode, sehingga kembali ke bentuk aslinya.
echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */6 berasal dari atribut echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */7 dari tiap-tiap elemen input, sedangkan echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */8 merupakan nilai yang kita isikan pada elemen input. Perhatikan ilustrasi berikut:
Method POST
Pada method POST, data pada form akan dikirim melalui http request header, sehingga tidak terlihat oleh user. Misal, pada form sebelumnya kita isi atribut action dengan nilai POST, selanjutnya, ketika kita klik simpan, maka alamat URL akan berubah menjadi:
Pada gambar diatas, terlihat bahwa tidak ada data yang dikirim melalui URL. Jika kita ingin melihat data yang dikirim, kita dapat menggunakan addon developer tools pada Chrome atau firebug pada Firefox, kemudian pilih bagian tab Network.
Method GET vs Method POST
Method GET dan POST memiliki beberapa perbedaan mendasar, diantaranya:
Method GET
- Kurang aman karena data terekspose, selain itu, karena dikirim melalui url, data tersebut akan tersimpan pada history browser
- Panjang data terbatas antara 2kb – 8kb tergantung jenis browser.
- Hanya dapat mengirim data teks, tidak dapat mengirim file
- Oleh browser tidak diperlakukan sebagai data sensitif, sehingga halaman tersebut dapat direfresh dengan mudah
Method POST
- Lebih aman, karena data tidak terekspose, selain itu, data yang dikirim tidak tersimpan pada history browser
- Dapat mengirim data berukuran besar.
- Dapat mengirim berbagai jenis data termasuk file
- Oleh browser diperlakukan sebagai data sensitif, sehingga ketika direfresh, browser akan meminta konfirmasi pengiriman ulang data.
Lebih jauh tentang kedua metode ini, termasuk kelebihan dan kekurangan, kapan digunakan, dan proses pengirimannya dibahas lengkap di: Memahami GET dan POST Pada PHP dan HTTP
II. Menangkap Data Dari Form HTML Dengan PHP
Setelah data dikirim oleh form HTML, maka data tersebut siap untuk diolah.
Menangkap Data GET
Untuk menangkap data yang dikirim dengan method GET, kita gunakan variabel echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */9, variabel ini berbentuk array dengan index berupa nilai atribut echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */7 pada elemen input.
Misal: isikan file //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 dengan script berikut:
<?php echo 'Nama : ' . $_GET['nama'] . '<br/>'; echo 'Email : ' . $_GET['email'];Selanjutnya, ubah atribut action pada file //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 dengan nilai //localhost/form/proses.php?nama=JagoWebDev&email=jagowebdev@gmail.com3. Buka form dan isikan Agus Prawoto Hadi pada field nama dan prawoto.hadi@gmail.com pada email, kemudian klik submit. Hasil yang kita peroleh:
Untuk melihat semua data yang dikirim, gunakan fungsi //localhost/form/proses.php?nama=JagoWebDev&email=jagowebdev@gmail.com4, misal:
echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */Karena data dikirim melalui URL, maka kita dapat mengubah data tersebut dengan mengubah url, misal ubah URL menjadi:
//localhost/form/proses.php?nama=JagoWebDev&email=jagowebdev@gmail.commaka hasil yang kita peroleh:
Menangkap Data POST
Sedangkan untuk method //localhost/form/proses.php?nama=JagoWebDev&email=jagowebdev@gmail.com5, kita gunakan variabel //localhost/form/proses.php?nama=JagoWebDev&email=jagowebdev@gmail.com6. Sama seperti echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */9, variabel //localhost/form/proses.php?nama=JagoWebDev&email=jagowebdev@gmail.com6 juga berbentuk array dengan index berupa nilai atribut echo '<pre>'; print_r($_GET); /* Hasil: Array ( [nama] => Agus Prawoto Hadi [email] => prawoto.hadi@gmail.com [submit] => Simpan ) */7 pada elemen input.
Misal kita ubah nilai atribut action pada elemen form menjadi post, selanjutnya dan kita ubah isi file //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 menjadi:
<?php echo 'Nama : ' . $_POST['nama'] . '<br/>'; echo 'Email : ' . $_POST['email']; echo '<pre>'; print_r($_POST);Ketika kita klik tombol submit, maka hasil yang kita peroleh adalah:
III. Mengirim dan Menangkap Data Dengan File Yang Sama
Sejauh ini, kita mengirim dan menangkap data pada dua file yang berbeda, yaitu //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 untuk mengirim data, dan //localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 untuk menangkap data.
Dalam praktek, untuk mengirim dan menangkap data seringnya kita gunakan file yang sama, sehingga lebih praktis. Untuk mengirim dan menangkap data form denga file yang sama, caranya, kosongkan nilai pada atribut action, misal <?php echo 'Nama : ' . $_POST['nama'] . '<br/>'; echo 'Email : ' . $_POST['email']; echo '<pre>'; print_r($_POST);3
Misal, pada folder form, kita buat file <?php echo 'Nama : ' . $_POST['nama'] . '<br/>'; echo 'Email : ' . $_POST['email']; echo '<pre>'; print_r($_POST);4 dengan script sebagai berikut:
<h1>Form HTML Dengan PHP</h1> <form action="" method="get"> <div> <label>Nama</label><input type="text" name="nama" value="<?=isset($_POST['nama']) ? $_POST['nama'] : ''?>"/> </div> <div> <label>Email</label><input type="text" name="email" value="<?=isset($_POST['email']) ? $_POST['email'] : ''?>"/> </div> <input type="submit" name="submit" value="Simpan"/> </form> <?php if (isset($_POST['submit'])) { echo 'Nama Anda : ' . $_POST['nama'] . '<br/>'; echo 'Email Anda : ' . $_POST['email']; }?>DEMO
Penjelasan:
- Pada baris 4, kita buat ternary operator <?php echo 'Nama : ' . $_POST['nama'] . '<br/>'; echo 'Email : ' . $_POST['email']; echo '<pre>'; print_r($_POST);5 jika di klik submit, statemen ini akan mencetak nama yang diisikan user, hal yang sama berlaku pada email (baris 7)
- Selanjutnya, pada baris 12, kita tes apakah variabel post memiliki index <?php echo 'Nama : ' . $_POST['nama'] . '<br/>'; echo 'Email : ' . $_POST['email']; echo '<pre>'; print_r($_POST);6, jika ya, artinya ada data yang dikirim, selanjutnya kita cetak nama dan email yang diinput oleh user
IV. Menampilkan Hasil Input Form HTML dengan PHP
Terdapat berbagai jenis elemen untuk mengirim data menggunakan Form HTML, diantaranya elemen <?php echo 'Nama : ' . $_POST['nama'] . '<br/>'; echo 'Email : ' . $_POST['email']; echo '<pre>'; print_r($_POST);7, <?php echo 'Nama : ' . $_POST['nama'] . '<br/>'; echo 'Email : ' . $_POST['email']; echo '<pre>'; print_r($_POST);8, dan <?php echo 'Nama : ' . $_POST['nama'] . '<br/>'; echo 'Email : ' . $_POST['email']; echo '<pre>'; print_r($_POST);9.
Elemen input memiliki beberapa type, diantaranya <h1>Form HTML Dengan PHP</h1> <form action="" method="get"> <div> <label>Nama</label><input type="text" name="nama" value="<?=isset($_POST['nama']) ? $_POST['nama'] : ''?>"/> </div> <div> <label>Email</label><input type="text" name="email" value="<?=isset($_POST['email']) ? $_POST['email'] : ''?>"/> </div> <input type="submit" name="submit" value="Simpan"/> </form> <?php if (isset($_POST['submit'])) { echo 'Nama Anda : ' . $_POST['nama'] . '<br/>'; echo 'Email Anda : ' . $_POST['email']; }?>0, <h1>Form HTML Dengan PHP</h1> <form action="" method="get"> <div> <label>Nama</label><input type="text" name="nama" value="<?=isset($_POST['nama']) ? $_POST['nama'] : ''?>"/> </div> <div> <label>Email</label><input type="text" name="email" value="<?=isset($_POST['email']) ? $_POST['email'] : ''?>"/> </div> <input type="submit" name="submit" value="Simpan"/> </form> <?php if (isset($_POST['submit'])) { echo 'Nama Anda : ' . $_POST['nama'] . '<br/>'; echo 'Email Anda : ' . $_POST['email']; }?>1, dan <h1>Form HTML Dengan PHP</h1> <form action="" method="get"> <div> <label>Nama</label><input type="text" name="nama" value="<?=isset($_POST['nama']) ? $_POST['nama'] : ''?>"/> </div> <div> <label>Email</label><input type="text" name="email" value="<?=isset($_POST['email']) ? $_POST['email'] : ''?>"/> </div> <input type="submit" name="submit" value="Simpan"/> </form> <?php if (isset($_POST['submit'])) { echo 'Nama Anda : ' . $_POST['nama'] . '<br/>'; echo 'Email Anda : ' . $_POST['email']; }?>2 masing masing type ini berbeda cara penanganannya.
Agar pembahasan tidak terlalu panjang, tutorial tentang bagaimana cara menampilkan hasil input form HTML dengan PHP dapat diikuti pada artikel:
Pada artikel terebut kita akan membahas cara membuat form beserta penanganan data POST. Output yang dihasilkan seperti tampak pada gambar berikut:
Pada gambar diatas:
- Ketika disubmit, elemen input akan tetap berisi data yang telah diinput, dipilih, dan dicentang oleh user.
- Kita uji apakah elemen input, terutama elemen checkbox ada yang dicentang atau tidak, karena untuk mengetahui apakah checkbox dicentang atau tidak, teknik pengujiannya agak berbeda.
Demo Form: Form HTML Pada PHP
Download Source Code: View Source Code
Demikian pembahasan mengenai cara menghubungkan form HTML dengan PHP, semoga bermanfaat.
Lebih dalam mengenai GET dan POST: Memahami GET dan POST dan HTTP
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com
Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.