Tips membuat Form HTML yang Rapi dan Efektif

Kamu tau form?

Form adalah salah satu tag HTML yang dipakai untuk penempatan input-input yang akan diisikan oleh user untuk dieksekusi selanjutnya. Nah, bagi seorang web developer istilah form pasti udah ga asing lagi, soalnya semua data yang akan dimasukkan ke dalam database, pasti bakal via form ini.

Tapi, apakah kalian tau gimana cara bikin form yang efektif? maksud efektif di sini adalah supaya kita gak kesulitan pas membuat style buat form itu.

Nah, seperti yg udah diketahui, tag form adalah sebagai berikut:

<form action="register.php" method="post">
  ...
</form>

Buat sebagian orang, mengatur form supaya rapi, tata letaknya teratur, mereka menggunakan table sebagai tempat nempatin elemen input yang ada di form, contohnya kayak gini:

<form action="register.php" method="post">
    <table>
        <tr>
            <td><label for="nama_lengkap">Nama Lengkap</label></td>
            <td><input id="nama_lengkap" type="text" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><input id="nama_lengkap" type="text" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><textarea id="nama_lengkap"></textarea</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="kirim" /></td>
        </tr>
    </table>
</form>

Hmm… sebenernya cara di atas itu tidak salah sih, cuman menurutku cara kayak gitu tuh sangat merepotkan, soalnya kita harus bikin table sebagai pemampang elemen inputnya, dan itu sangat cape menurutku… banyak alasan kalo cara itu ga efektif, contoh lain adalah di saat di mana kita bikin suatu fungsi maupun class (bukan CSS) di PHP dan kita akan merender setiap elemen form secara independen, maksudnya berdiri sendiri, tanpa bantuan tag table sebelum elemen dan di akhir elemen input…

Lagian kan semua tag [input] di html ada berbagai macam, ada buat text, textarea, submit, combobox, dsb… nah berarti kalo kita bikin style CSSnya kita harus memberikan class di setiap elemen, soalnya ga bisa klo kita membuat style untuk semua tag [input], jadi setiap elemen [input] harus dikasih class…

Sekarang kita langsung coba mengimplementasikan struktur html kayak di atas klo qta bikin style buat CSSnya… gimana caranya? pasti bakal kayak gini:

<form action="register.php" method="post">
    <table>
        <tr>
            <td><label for="nama_lengkap">Nama Lengkap</label></td>
            <td><input id="nama_lengkap" type="text" class="textfield" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><input id="nama_lengkap" type="text" class="textfield" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><textarea id="nama_lengkap" class="textarea"></textarea</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="kirim" class="button" /></td>
        </tr>
    </table>
</form>

Ada cara yang lebih efektif, dan berdiri sendiri, maksudnya kita bakal bikin setiap baris input tanpa menggunakan awalan [table] dan akhiran [/table] dan tidak memberikan class di setiap elemen, juga ga ngeborosin tag (kayak tr td)… di sini kita akan menggunakan div… menurut Cheyuz ini yang paling efektif… (gak tau menurut kalian )

<form action="register.php" method="post">
    <div class="input text">
        <label for="nama_lengkap">Nama Lengkap</label>
        <input id="nama_lengkap" type="text" />
    </div>
    <div class="input text">
        <label for="nama_panggilan">Nama Panggilan</label>
        <input id="nama_panggilan" type="text" />
    </div>
    <div class="input textarea">
        <label for="nama_panggilan">Nama Panggilan</label>
        <textarea id="nama_panggilan"></textarea>
    </div>
    <div class="input submit">
        <input type="submit" value="kirim" />
    </div>
</form>

Sekarang, ayo kita bandingkan hasil keduanya kalo ga pake CSS:

Memakai Form

Memakai Div (efektif)

Gimana gimana??? loh loh kok tampilan form yang kedua (memakai div) malah ancur???

Hehe… tenang, itu adalah murni sebelum dikasi css… sekarang coba kita lihat klo udah pake css…

Ini style yang pake Table

Ini style yang pake Div

Gimana? hasilnya sama kan? hmm sebenernya sama… cuman di sini kita bakal ngeliat pengaruhnya kalo kita bikin pake framework misalnya… dan hasil dari render elemen inputan cakephp juga kayak gini lho… satu elemen input dengan ngerender 1 inputan… kalo contoh hasil render kayak gini lebih efektif:

        <div class="input text">
            <label for="nama_lengkap">Nama Lengkap</label>
            <input id="nama_lengkap" type="text" />
        </div>

dibanding yang ini:

            <tr>
                <td><label for="nama_lengkap">Nama Lengkap</label></td>
                <td><input id="nama_lengkap" type="text" class="textfield" /></td>
            </tr>

Soalnya untuk yang pake table harus diawali dengan [table] dan diakhiri dengan [/table]..

Oia lupa, ni CSS buat form yang tadi di atas, silakan dipelajari, dan lihat mudah yang mana :

CSS untuk form table

        form{
            background: #eee;
            padding: 5px;
        }
        form table{
            border-spacing: 0;
        }
        form tr{
            background: #dfebff;
            padding: 5px;
        }
        form tr:hover{
            background: #eef4ff;
        }
        form td{
            padding: 5px;
        }
        form label{
            font-weight: 900;
            cursor: pointer;
        }
        form .textfield{
            padding: 5px;
            border: 1px solid #ccc;
        }
        form .textfield:hover{
            border: 1px solid #000;
        }
        form .textfield:focus{
            border: 1px solid #f00;
        }
        form .button{
            background: #b0d0ff;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        form .button:hover{
            background: #b7efaa;
        }

CSS untuk form div

        form{
            background: #eee;
            padding: 5px;
        }
        form div.input{
            background: #dfebff;
            padding: 5px;
        }
        form div.input:hover{
            background: #eef4ff;
        }
        form div.text input:hover{
            border: 1px solid #000;
        }
        form div.text input:focus{
            border: 1px solid #f00;
        }
        form div.input label{
            float: left;
            width: 120px;
            font-weight: 900;
            cursor: pointer;
        }
        form div.input label:hover{
            color: #f00;
        }
        form div.text input{
            padding: 5px;
            border: 1px solid #ccc;
        }
        form div.submit input{
            background: #b0d0ff;
            border: 1px solid #ccc;
            cursor: pointer;
            margin-left: 125px;
        }
        form div.submit input:hover{
            background: #b7efaa;
        }

This entry was posted on Friday, February 12th, 2010 at 22:53 and is filed under HTML, Tips, Tutorial, _other. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

arif

Apr 22nd

thank yoo… hatur nuhun
tumariyadi

Jun 10th

makasih mohon bimbingannya
Cheyuz

Jun 12th

sip2 thankz
fuad indra setiawan

Dec 21st

pas seperti yang aku cari…makasih banyak..
Cheyuz

Dec 21st

@fuad: alhamdulillah, ok sama2 gan
moch

Dec 28th

Tutorial validasi form nya dong gan…pake PHP y gan
Cheyuz

Dec 30th

@moch: ada kok gan… ini: http://harian.cheyuz.com/tutorial/tutorial-codeigniter-dasar-part-iv-%e2%80%93-form-validation-2
refi

May 30th

kalo pake helper form di CI gimana? css nya sama saja gitu kang?
Cheyuz

Jun 19th

@refi: sama aja, cuma paling pas tag form sama inputnya diganti sama helper CI… tapi mending pake div kayak gini daripada pake table
Ichlasul Affan

Jun 20th

Mas, bagaimana caranya utk memasukkan captcha dalam form untuk mengirim e-mail kritik dan saran, tapi gak usah pake php, soalnya aku bikinnya di blogger, jadi gak bisa kirim file lewat FTP, dan gak punya control panel File Manager. Tolongin ya mas, tambahin kodenya, atau kirim ke e-mailku aja… semua kodenya lengkap. Yang dibutuhin cuma Nama, Email, sama Kritik Saran (pake bhs.inggris, atau kalau gak bisa pake bhs. indonesia gak apa2), sama Capthanya juga….
Cheyuz

Jun 20th

@Ichlasul Affan: Wah maaf mas kalo disuruh bikin saya ga bisa buatkan.. paling saya kasih tau captcha yg bagus.. yaitu Recaptcha.. itu plugin yang bisa dipake di mana aja.. bisa didownload di sini: http://recaptcha.net/
sigit legowo

Jul 9th

wah keren bngt,,,,,tukeran link yuk

sigitamiklegowo.blogspot.com
evelyn

Sep 12th

css u/ form divnya ditaruh mana gan ? dibawahnya tag2an itu?
Cheyuz

Oct 31st

css u/ form divnya ditaruh mana gan ? dibawahnya tag2an itu?

@evelyn: di luar file (eksternal) atau bisa disimpan sebelum tag2 trsebut..
rudi

Mar 5th

Makasih bro..informasix…

Harian Cheyuz