Membuat Form Rapih Tanpa Tabel dengan CSS

Jika anda telah mempelajari bagaimana cara membuat Forms yang menggunakan prinsip Web Standards. Sekarang saya akan
mengajari bagaimana agar kita membuat forms yang teratur dan rapih tanpa menggunakan table. Kita hanya akan menggunakan
 CSS saja.


Seperti yang kita ketahui, didalam prinsip Web Standards kita menggunakan tag <label> untuk menentukan keterangan dan
posisi fields. Nah dengan bantuan CSS kita akan memanfaatkan <label> untuk menyusun forms kita.

Kita akan membuat Forms seperti Forms komentar di situs ini, dan kita akan membuatnya tanpa Table. Oke langsung saja
kita coba, buatlah file HTML dengan nama forms.html dan file CSS dengan nama style.css. Isilah file style.css dengan
kode berikut ini:


form label {
display: block;
float: left;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: right;
}

form input, form textarea, form select {
width:auto;
margin:5px 0 0 10px;
}
.form br {
clear:left;
}

Dan untuk file forms.html nya isilah dengan kode berikut ini:


<style type="text/css" media="all">@import "style.css";</style>
<form method="post" action="#">
<p>
<label for="posnama">Nama Anda:</label> <input type="text" name="nama"
class="textbox" id="posnama" size="30" /><br />
<label for="pospesan">Komentar Anda:</label> <textarea name="komentar" cols="50"
rows="10" class="textarea" id="pospesan"></textarea><br />
<br /><br />
<input type="submit" name="submit" value="Kirim Komentar" class="buttonsubmit"
/>
</p>
</form>

Jalankan file forms.html, mudah kan? Oke sekarang akan saya jelaskan satu persatu.

File style.css

Yang perlu diperhatikan disini adalah deklarasi untuk label, dimana kita beri float: left; yang memungkinkan tag label
 berada disebelah kiri dari field (input) Jangan lupa kita perlu mengatur panjangnya label dengan width: 150px;. Oke
sekarang untuk tag input saya membuat width:auto; agar berapapun lebar bidang yang tersisa, input selalu bisa menempati
bidang terebut. Karena form tidak selalu input saja maka saya juga memberikan kode yang sama untuk textarea dan select.

Untuk tag <br /> yang selalu kita berikan setelah input kita berikan clear:left; agar kode berikutnya berada dibawahnya
 tidak disampingnya.

Bagaimana mudah bukan? kode HTML kita cukup singkat, kita tidak memerlukan <table> sama sekali. Dan yang pasti kode
 tersebut berfungsi disemua browser yang ada :)