Form biasanya digunakan untuk mengumpulkan data dari pengunjung website kita. Seperti form login, registrasi, komentar, testimonial, kontak kami, dsb.
Data dari form HTML ini nantinya akan diproses oleh bahasa pemrograman server side scripting (hanya diproses disisi server) seperti PHP, karena pada dasarnya HTML tidak bisa memproses atau menyimpan data, karena sifatnya yang client side scripting (hanya diproses disisi user/browser).
Catatan: Tutorial ini membutuhkan file proses.php, contohnya ada pada dibagian akhir tutorial.
1. Tag <form>
Tag form berguna untuk membatasi wilayah inputan yang akan diproses (dengan tag penutup </form>, jadi bisa saja dalam 1 halaman website terdapat lebih dari 1 form, misal halaman edit profile & edit password yang terdapat di halaman my account, masing-masing memiliki proses yang berbeda kan?
Contoh penggunaan tag form
<form action=”proses1.php” method=”post”> ..… isi inputan 1…. </form>
<form action=”proses2.php” method=”get”> ..… isi inputan 2…. </form>
Pada contoh diatas, terdapat attribute action & method, apa fungsi 2 attribute ini?
Action = lokasi file untuk memproses data yang diinputkan
Method = ada 2 jenis metode pengiriman data form, GET dan POST
GET, semua nilai dari inputan akan terlihat di alamat url browser, misal: http://localhost/proses1.php?nama=john&alamat=bandung&status=single
POST, nilai dari inputan tidak akan terlihat, karena diproses dibelakang dan alamat url tetap seperti contoh: http://localhost/proses1.php
2. Tag <input>
Tag input adalah tag yang paling banyak digunakan untuk isian seperti nama, password, email, no hp, dsb
Berikut contoh attribute dari tag input yang membedakan jenisnya:
a. <input type=”text” /> biasa digunakan untuk isian nama, ho hp, dll.
b. <input type=”password” /> untuk isian password, attribute ini tidak akan menampilkan tulisan, dan diganti dengan tanda bintang atau bulat2 hitam, bukan tahu bulat ya 😀
c. <input type=”checkbox” /> untuk isian berbentuk checklist, yang bisa dipilih lebih dari satu, dan jika disubmit nanti php akan mengenalnya sebagai variable berbentuk Array.
d. <input type=”radio” /> mirip dengan checkbox, tapi radio hanya bisa dipilih satu, misal penggunaannya untuk isian ya dan tidak, jenis kelamin, dll.
e. <input type=”submit” /> untuk membuat sebuah tombol untuk melakukan proses input data dari form, namun sekarang disarankan menggunakan tag <button type=”submit”> karena lebih mudah dikostumasi.
Untuk checkbox dan radio, ada attribute khusus checked=”checked”ini berfungsi untuk mencentang secara default pada tag yang diset, dan hanya boleh dipakai satu kali pada tag input dengan name yang sama, perhatikan contoh.
Tag input harus mempunyai attribute name contoh: <input name=”nama_inputan” />
Fungsinya adalah untuk memberi nama variable ketika nanti diproses oleh PHP nya, misal jika contoh tadi di php nya menjadi $_POST[‘nama_inputan’] jika method form nya POST, atau $_GET[‘nama_inputan’] jika method form nya GET.
Pengecualian: name untuk type checkbox & radio harus sama, perhatikan contoh dibawah dan coba langsung untuk mengetahui perbedaannya
Contoh penggunaan:
<form action=”proses.php” method=”post”>
<input type=”text” name=”nama” placeholder=”Nama Lengkap” /><br /> <input type=”text” name=”email” placeholder=”Email Anda” /><br /><input type=”text” name=”password” placeholder=”Password Anda”/>
Jenis Kelamin : <input type=”radio” name=”jenis_kelamin” value=”lakilaki” checked=”checked” /> Laki — Laki <input type=”radio” name=”jenis_kelamin” value=”perempuan” /> Perempuan <br />
Hobi: <input type=”checkbox” name=”hobi_baca” /> Membaca Buku <input type=”checkbox” name=”hobi_nulis” checked=”checked” /> Menulis <input type=”checkbox” name=”hobi_mancing” /> Memancing
<input type=”submit” name=”daftar” value=”Daftar” />
</form>
Pada contoh diatas terdapat attribute placeholder dan value, fungsinya:
Placeholder = ini adalah teks dimana jika kita belum mengisi data akan muncul tulisan dari nilai attribute placeholder ini
Value = digunakan untuk mengisi nilai default dari tag input, misal tulisan pada tombol, atau pada halaman edit untuk menampilkan data yang sudah tersimpan di database contoh: <input type=”text” name=”nama” value=”Wisnu” />
3. Tag <textarea>
Fungsinya sama seperti <input> hanya textarea biasa digunakan untuk data berupa teks yang panjang atau lebih dari satu baris, misal alamat, pesan, catatan, dll. Dan jangan lupa untuk menambahkan attribute name untuk nama variable untuk diproses oleh PHP nya jika disubmit.
Contoh penggunaan:
<form action=”proses.php” method=”post”> <textarea name=”nama” placeholder=”Masukan pesan Anda”></textarea> <input type=”submit” name=”kirim” value=”Kirim Pesan” /> </form>
4. Tag <select>
Tag select biasa disebut juga dropdown chooser, atau pilihan yang bisa kita pilih nilainya dari list data yang tersedia, contohnya untuk pilihan negara, provinsi, kota, pekerjaan, dll.
Contoh penggunaan:
<form action=”proses.php” method=”post”>
<select name=”provinsi”> <option value=””>- Pilih Provinsi -</option> <option value=”jawabarat”>Jawa Barat</option> <option value=”jawatengah”>Jawa Tengah</option> <option value=”jawatimur” selected=”selected”>Jawa Timur</option> </select>
<input type=”submit” name=”register” value=”Register” />
</form>
Berbeda dengan tag form lainnya, tag select mempunyai struktur html yang khusus seperti contoh diatas, dan untuk mendapatkan nilai dari tag select (yg dipilih user) , tag select mengambil nilai dari attribute value dari sub tag <option>
Karena tidak ada attribute placeholder di tag select, jadi kita buat manual seperti contoh diatas (pilih provinsi) dengan menset nilai value nya kosong, karena apabila kita tidak menuliskan value=”” misal jadi <option>- Pilih Provinsi -</option> nilai tag select provinsi ini menjadi “- Pilih Provinsi” jadi secara default teks yang berada diantara tag <option> dan </option> itu akan menjadi nilainya, sehingga lebih baik jika kita ingin mendapatkan nilai yang berbeda dengan tulisan yang tampil pada halaman website seperti contoh diatas.
Pada contoh juga terdapat attribute khusus selected=”selected” pada tag <option> ini mempunyai fungsi dan cara pemakaian yang mirip dengan attribute checked=”checked” pada checkbox dan radio, fungsi attribute ini yaitu untuk melakukan seleksi default pada pilihan yang diset, test contoh diatas pada browser untuk lebih jelasnya.
5. Test
Akhirnya kita mengenal para tag di form, HORE Alhamdulillah, sekarang saatnya kita gabungkan semuanya.
Contoh: Nama file latihanform.php
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form</title>
</head>
<body>
<form action="proses.php" method="post">
<input type="text" name="nama" placeholder="Nama Lengkap" />
<br />
<input type="text" name="email" placeholder="Email Anda" />
<br />
<input type="password" name="password" placeholder="Password Anda" />
<br />
Jenis Kelamin :
<input type="radio" name="jenis_kelamin" value="lakilaki" checked="checked" />
Laki - Laki
<input type="radio" name="jenis_kelamin" value="perempuan" />
Perempuan
<br />
Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku
<input type="checkbox" name="hobi_nulis" checked="checked" /> Menulis
<input type="checkbox" name="hobi_mancing" /> Memancing
<br />
Asal Kota:
<select name="asal_kota">
<option value="jakarta">Jakarta</option>
<option value="bandung">Bandung</option>
<option value="cirebon">Cirebon</option>
</select>
<br />
<textarea name="komentar" rows="5" cols="20" placeholder="Komentar Anda"></textarea>
<br />
<input type="submit" name="kirim" value="Kirim Data" />
</form>
</body>
</html>
Contoh: Nama file proses.php
<?php echo '<pre>'; var_dump($_POST); // ganti jadi $_GET sesuai tutorial echo '</pre>'; ?>
Di atas adalah contoh file PHP yang akan menampilkan variable-variable yang dikirim dari form html.
Latihan (gunakan contoh diatas)
1. Bandingkan form method GET dan POST
– Ganti method form menjadi GET di file latihanform.php
– ganti juga super global variable di file proses.php dari $_POST menjadi $_GET
– lihat perbedaannya, lihat address bar browser / alamat url browser
– setelah selesai membandingkan, rubah kembali menjadi $_POST sebelum lanjut ke latihan ke 2
2. 2 form dalam satu halaman
– Buat file baru misal namanya multiform.php
– Buat 2 form dalam satu halaman web di file multiform.php
– set action nya sama ke file proses.php (yg sudah dibalikin ke $_POST)
– pada form ke 1 kasih judul Ubah Data
– buat inputan untuk nama lengkap, no hp, email, alamat rumah, provinsi, kota, dan tombol submit Simpan Data
– kasih default nilai untuk masing-masing inputan tadi misal nama = wisnu
– pada form ke 2 kasih judul Ganti Password
– buat inputan untuk password lama, password baru, password baru (lagi) dan tombol submit Ganti Password
– setelah jadi, pada form ubah data, coba ganti salah satu data dan klik simpan data, lalu lihat hasil outputnya
lalu coba isi form ganti password dan lihat hasil outputnya
Technopreneur, founder of Webhade, PHP web programmer, designer, businessman, superdad & nice husband