Sunday 14 October 2012

cara mebuat form yang bagus

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

Labels:

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home