Setelah Anda memahami
input type pada artikel sebelumnya, selanjutnya belajar memahami form pada html. Form digunakan untuk mengontrol elemen-elemen form yang berisi informasi dan di kirim ke web server. Contoh sederhananya, ketika Anda login, Anda mengisikan username dan password. Ketika Anda klik Login (Masuk), username dan password dikirimkan ke web server melalui bantuan kode PHP. Data login Anda tadi ditampung dan dikirim melalui form.
Tag form memiliki beberapa atribut yaitu;
-
method, yaitu cara informasi dikirimkan ke server. Terdiri dari dua;
post dan
get. Metode post; data yang dikirimkan mengikut (tergabung) dalam form. Metode get; data yang dikirimkan dipisahkan dengan tanda ? dan & serta data yang terkirim ditampilkan di address bar browser.
Lihat perbedaannya: Misalnya ada form yang meminta 2 data, username dan password. Untuk memproses kedua data ini dibutuhkan file php bernama check.php. Jika memakai metode post, maka url dibrowser menjadi
namawebsite.com/check.php. Dan bila memakai metode get, maka url di browser menjadi
namawebsite.com/check.php?username=nama&pass=password.
Sehingga, metode post cocok digunakan untuk data-data yang bersifat rahasia seperti username dan password, data yang dikirimkan tidak ditampilkan di address bar browser. Sedangkan untuk proses data yang tidak rahasia, gunakan metode get. Misalnya untuk mengedit artikel.
-
action, yaitu url (alamat) file php yang akan menjadi eksekutor pemrosesan data-data yang dikirimkan. Dalam contoh di atas, yaitu
check.php
-
enctype, mengindikasikan jenis data yang dikirimkan ke web server. Terdiri tiga macam;
application/x-www-form-urlencoded, ini merupakan nilai default dari enctype form (standar). Kedua,
multipart/form-data, ini digunakan jika form diizinkan untuk mengupload file (seperti dokumen dan gambar).
-
target, yaitu bagaimana perilaku browser ketika form melakukan pemrosesan. Apakah di muat dalam tab baru pada browser atau masih di halaman yang sama. Nilai defaultnya
_self (di halaman yang sama). Jika ingin dimuat dalam tab baru, gunakan
_blank.
Tag form diawali dengan
<form> dan diakhiri dengan
</form>.
Berikut contoh penulisan form dalam file html:
method.html dengan file aksinya
proses.php. Untuk memastikan proses.php bekerja, Anda butuh web server seperti Wamp, Xamp, atau AppServ yang terinstal di laptop Anda dan letakkan file method.html dan proses.php di folder WWW.
method.html
<!DOCTYPE HTML>
<html>
<head>
<title>Belajar form html</title>
<!-- Css ini hanya tambahan, hanya untuk mempercantik tampilan
elemen form, tidak menjadi syarat.
-->
<style type="text/css">
body{background-color:#F5F5F5;font-family:georgia, tahoma;}
input{border:1px solid #BFBFBF;padding:6px;margin-bottom:5px;}
input.sz{width:300px;}
input:focus{border:1px solid #000;}
.bt{padding:6px;font-weight:bold;-moz-border-radius:2px;
-webkit-border-radius:2px;border-radius:2px;border:1px solid #2D6066;
width:100px;background-color:#03B9D0;color:#fff;
}
.bt:hover{
background-color :#02AABF;-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
border:1px solid #2E3131;
}
textarea{width:500px;height:300px;font-family:Tahoma, Verdana; font-size:12px;}
</style>
</head>
<body>
<form action="proses.php" method="post" enctype="application/x-www-form-urlencoded" target="_self">
<table>
<tr>
<td>Username</td>
<td>
<input type="text" maxlength="40" name="nama" class="sz" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" maxlength="20" class="sz" name="mypass" />
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="Login" class="bt"/>
</td>
</tr>
</table>
</form>
</body>
</html>
proses.php
<?php
$username=$_POST["nama"];
$pass=$_POST["mypass"];
echo "Ini nama Anda: $username<br />
Ini password Anda: $pass
";
?>
Galeri:
Simpan file method.html dan proses.php di folder www.
Akses method.html dari localhost (nama host ketika menginstal web server).
Setelak di klik tombol Login, akses proses.php dan tampilkan hasilnya.
Coba ganti dengan metode get.
Hasilnya, data login (username dan password) 'dibawa' lewat url di address bar.
.jpg)
