8. Form HTML

Form pada website biasanya digunakan untuk mengirimkan data dari pengunjung yang selanjutnya disimpan di server.

Maka dari itu untuk pemrosesan penyimpanan data, diperlukan bahasa pemrograman server side, seperti PHP, ASP, dll.

Contoh penggunaan form adalah, kontak kami, kirim komentar, form login, register, dan lain sebagainya.

Untuk membuat form, tag HTML yang digunakan adalah:

<form method="GET|POST" action="fileproses" enctype="mutlipart/form-data">
   form element seperti, input, password, textarea, file, image, dll.
</form>

Atribut method="GET" artinya data dikirimkan dengan metode GET, misal saat disubmit akan menjadi fileproses.php?param1=value1&param2=value2 dst.

Atribut method="POST" artinya data dikirimkan dengan metode POST, penanganan data dengan GET ataupun POST akan dijelaskan saat materi PHP. Mohon sabar...

Atribut action="fileproses.php" jika kita pakai bahasa PHP untuk backend.

Atribut enctype="mutlipart/form-data", digunakan jika form berisi file upload, jika tidak ada maka atribut enctype tidak perlu ditulis.

Oke, langsung saja kita desain form yang berisi semua elemen umum dalam form. silahkan ketikkan kode dibawah ini dengan editor sublime.

Beri nama file form_input.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Belajar form HTML</title>
    </head>
    <body>
        <h1>Contoh FORM dalam HTML</h1>
        <form method="GET" action="" enctype="mutlipart/form-data">
            <table border="1" cellspacing="1" cellpadding="10" style="width:500px;">
                <tr>
                    <td style="width:120px;">Nama Lengkap</td>
                    <td><input type="text" name="nama_lengkap" value=""></td>
                </tr>
                <tr>
                    <td>Negara</td>
                    <td><input type="text" name="negara" value="Indonesia"></td>
                </tr>
                <tr>
                    <td>Nama Panggilan</td>
                    <td><input type="text" name="nama_panggilan" value="" placeholder="Ketik nama panggilan"></td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td><input type="password" name="passwd" value="" placeholder="Ketik password"></td>
                </tr>
                <tr>
                    <td>Jenis Kelamin</td>
                    <td>
                        <label><input type = "radio" name = "jns_kel[]" value = "lakilaki"> Laki-laki</label>
                        <label><input type = "radio" name = "jns_kel[]" value = "perempuan"> Perempuan</label>
                    </td>
                </tr>
                <tr>
                    <td>Hobi</td>
                    <td>
                        <label><input type="checkbox" name="hobi[]" value="baca" /> Membaca</label><br />
                        <label><input type="checkbox" name="hobi[]" value="menulis" /> Menulis</label><br />
                        <label><input type="checkbox" name="hobi[]" value="mancing" /> Memancing</label><br />
                        <label><input type="checkbox" name="hobi[]" value="makan" checked="true" /> Makan</label><br />
                    </td>
                </tr>
                <tr>
                    <td>Tempat Lahir</td>
                    <td>
                        <select name="kotalahir" >
                            <option value="kota_kediri"> Kota Kediri</option>
                            <option value="kab_kediri"> Kabupaten Kediri</option>
                            <option value="kab_bandung" selected="selected"> Kabupaten Bandung</option>
                            <option value="jakarta">Jakarta</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td valign="top">Tentang kamu</td>
                    <td>
                        <textarea name="tentangsaya" rows="5" cols="20" placeholder="isi tentang anda"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>Upload CV</td>
                    <td><input type="file" name="file_cv"></td>
                </tr>
                <tr>
                    <td>Upload Foto</td>
                    <td><input type="file" name="file_foto" accept = "image/*"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="hidden" name="rahasia" value="abcdef"> 
                        <input type="reset" value="Reset"> 
                        <input type="submit" value="Submit">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Hasilnya seperti dibawah ini:

Gimana, susah ga?

Kalau hanya dibaca pasti susah, tapi kalau langsung anda ketik, pasti akan tahu tag <input xxxx /> itu untuk apa dan jadinya bagaimana.

Ayo, semangat... lanjutkan ya...