Form
Pengertian Form Form dalam web adalah satu sarana untuk memperoleh data dari pengunjung Form ibarat formulir dalam dunia nyata, berisi nama formulir, beberapa pertanyaan, bagian untuk mengisi jawaban, dengan satu tujuan tertentu. Data yang terkumpul digunakan oleh pembuat formulir untuk suatu kebutuhan si pembuat
Membuat FORM Form dibuat menggunakan elemen FORM dan elemen INPUT.
Atribut-atribut FORM Elemen FORM memiliki atribut : Action Method Name Elemen INPUT memiliki atribut : Type Size Maxlength
Contoh FORM <form action=“” method=“post” name=“form”> Nama : <input type=“text” name=“nm”> <input type=“submit” value=“OK” name=“proses”> </form>
3 Hal Penting FORM Method Method form menentukan bagaimana data inputan form dikirim dan diproses. Ada 2 macam method : POST dan GET Action Action form menentukan file pemroses data inputan form. Jika action ini dikosongkan (action=“”) maka dianggap pemrosesan data inputan form dilakukan di halaman yang sama. Jadi halaman form dan pemroses bisa dipisah atau dijadikan satu Submit button Tombol yang berfungsi sebagai trigger (pemicu) pengiriman data dari form ke pemroses.
Berbagai cara Penanganan FORM Menyatukan antara form dan pemroses Form inputan dan proses pengolahan form dilakukan di halaman yang sama. Dengan cara ini, atribut action dikosongkan (action=“”)
Contoh coding FORM <html> <head><title>Pengolahan form</title></head> <body> <form action=“” method=“post” name=“myform”> Nama : <input type=“text” name=“nm” size=“25”> <input type=“submit” value=“simpan” name=“spn”> </form> <?php //pemroses data inputan form If (isset($_POST[‘spn’])){ $nama=$_POST[‘nm’]; echo “Nama Anda : <b>$nama</b>”;} ?> </body> </html>
Berbagai cara Penanganan FORM Memisahkan form dan pemrosesnya Proses pengolahan form dilakukan di halaman yang terpisah dengan form inputannya. Jika memakai cara ini, atribut action diisi dengan nama file pemroses data inputan form
Contoh coding FORM File halaman form (form1.html): <html> <head><title>Pengolahan form</title></head> <body> <form action=“simpan.php” method=“post” name=“myform”> Nama : <input type=“text” name=“nama” size=“25”> <input type=“submit” value=“simpan” name=“simpan”> </form> </body> </html>
Contoh coding FORM <?php If (isset($_POST[‘simpan’])) { File halaman pemroses data inputan form (simpan.php) : <?php If (isset($_POST[‘simpan’])) { $nama=$_POST[‘nama’]; echo “Nama Anda : <b>$nama</b>”; } ?>
Method GET Metode GET digunakan bila data yang dikirim sedikit. Metode ini menggunakan $_GET untuk memproses data. Data yang dikirim dengan metode ini akan tampak pada URL di address bar browser shg tidak aman untuk data sensitif (misalnya password).
Contoh coding Method Get <html> <head><title>Pengolahan form</title></head> <body> <form action=“” method=“get” name=“myform”> Nama : <input type=“text” name=“nama” size=“25”> <input type=“submit” value=“simpan” name=“simpan”> </form> <?php If (isset($_GET[‘simpan’])) { $nama=$_GET[‘nama’]; echo “Nama Anda : <b>$nama</b>”; } ?> </body> </html>
/Form01.php?nama=Joko+Santosa&simpan=simpan Disebut QUERY STRING
Method POST Metode POST menggunakan variabel array $_POST Mampu menyimpan data dalam jumlah banyak Datanya disimpan dalam tempat tersendiri dan tidak tergantung pada suatu variabel
Elemen-elemen INPUT Text <form action=“” method=“post”> Usia : <input type=“text” name=“tgl” size=“3” maxlength=“5”> <input type=“submit” value=“OK” name=“tombol”> </form> Atribut type menentukan jenis elemen input yang akan dibuat. Atribut name memberi nama inputan tersebut. Size menentukan lebar kotak input. Maxlength menentukan maksimal karakter yang dapat diinputkan dalam kotak input
Elemen-elemen INPUT Password <form action=“” method=“post”> <input type=“password” name=“pswd” size=“15” maxlength=“20”> <input type=“submit” value=“send” name=“proses”> </form> Elemen input tipe password tidak akan menampilkan karakter yang diinputkan pada kotak input dan diganti dengan karakter “*”
Elemen-elemen INPUT Hidden <form action=“” method=“post”> Password : <input type=“hidden” name=“hdd” size=“15” maxlength=“20”> <input type=“submit” value=“send” name=“proses”> </form> Elemen input tipe hidden akan menyembunyikan karakter yang diinputkan pada kotak input.
Elemen-elemen INPUT Radio <form action=“” method=“post”> Jenis kelamin : <input type=“radio” name=“j_kel” value=“pria”>Pria <input type=“radio” name=“j_kel” value=“wanita”>Wanita <input type=“submit” value=“send” name=“proses”> </form> Nama elemen input tipe radio harus sama untuk satu inputan. Atribut value untuk menentukan nilai data yang akan dikirim ke pemroses
Elemen-elemen INPUT Checkbox <form action=“” method=“post”> Hoby : <input type=“checkbox” name=“hb1” value=“Catur”>Catur <input type=“checkbox” name=“hb2” value=“game”>Game <input type=“submit” value=“send” name=“proses”> </form> Nama elemen input tipe checkbox berbeda untuk satu inputan. Atribut value untuk menentukan nilai data yang akan dikirim ke pemroses
Elemen-elemen INPUT Select <form action=“” method=“post”> Band favorit : <select name=“band” size=3 multiple> <option value=“Dmasiv”>D’masiv <option value=“Peterpan” selected>Peterpan <option value=“Raja”>Raja </select> <input type=“submit” value=“send” name=“proses”> </form> Elemen option digunakan untuk membuat pilihan-pilihan pada inputan
Elemen-elemen INPUT Textarea <form action=“” method=“post”> Pesan : <textarea name=“psn” rows=“5” cols=“70”> </textarea> <input type=“submit” value=“send” name=“proses”> </form> Atribut rows untuk mengatur tinggi (jumlah baris yang tampak) dan cols mengatur lebar kotak inputan
Elemen-elemen INPUT Tombol Ada beberapa jenis tombol : tombol submit <input type=“submit” value=“OK”> Tombol reset <input type=“reset” value=“batal”> Tombol general <input type=“button” value=“hitung” onclick=“script()”> Tombol reset untuk membatalkan pengiriman data inputan form sedang tombol general dapat digunakan untuk bermacam-macam fungsi.
Latihan <form name=“login” action=“” method=“post> Password : <input type=“password” name=“psw” size=“15” maxlength=“10”> <input type=“submit” value=“login” name=“tlogin”> </form> <?php If (isset($_POST[‘tlogin’])){ if ($_POST[‘psw’]==“admin”){ echo “Login sukses”; }else{ echo “Anda tidak berhak menggunakan sistem”; } ?>