Blog Belajar HTML: Form pada HTML

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>
            
            <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: