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:
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:
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:
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 )
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>
<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>
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>
<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>
Comments
Post a Comment