Jika anda ingin merubah tampilan form dengan cepat tanpa menghabiskan banyak waktu, maka salah satu alternatifnya gunakan jqTransform. jqTransform merupakan plugin JQuery untuk styling, dimana kita bisa merubah seluruh elemen form dengan sangat mudah. Yang harus dilakukan hanya dengan menyisipkan plugin dalam tag <head>. Ok..mari kita lihat penggunaannya.
Before
After
Pertama sisipkan JQuery, plugin dan CSS dalam <head>
<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" /> <script type="text/javascript" src="requiered/jquery.js" ></script> <script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script>
Kemudian rancang Form dengan class yang isinya jqTransform (Misal Form Login)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <form class="jqTransform" method="post"> <h2>Sign In</h2> <table border="0" width="100%"> <tbody> <tr> <td width="12%">Username</td> <td width="88%"><label> <input class="rowElem" name="textfield" type="text" /> </label></td> </tr> <tr> <td>Password</td> <td><label> <input name="textfield2" type="text" /> </label></td> </tr> <tr> <td><label> <input class="jqTransformButton" name="Submit" type="submit" value="Sign in" /> </label></td> <td><label> <input class="jqTransformRadio" name="checkbox" type="checkbox" value="checkbox" /> </label> Stay signed in</td> </tr> </tbody> </table> </form> |
Dan jangan lupa instance javascript untuk transformasi elemen Form
<script language="javascript"> $(function(){ $('form').jqTransform({imgPath:'jqtransformplugin/img/'}); }); </script>
Note: Edit CSS, untuk merubah tampilan sesuai dengan keinginan anda.
Deni Satria, an ordinary human being living in padang, Indonesia.
alangkah lebih baiknya klo disertakan link demo nya,…
^_^