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:
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…
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>
<tr>
<td><label for="nama_lengkap">Nama Lengkap</label></td>
<td><input id="nama_lengkap" type="text" class="textfield" /></td>
</tr>
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;
}
oke semoga kalian bisa dab mengerti apa yang saya maksud kan, dan semoga bermanfaat jangan lupa share jika senang.
0 Response to "Tips membuat Form HTML yang Rapi dan Efektif"
Posting Komentar