Membuat Form yang Teratur

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 untuk menentukan keterangan dan posisi fields. Nah dengan bantuan CSS kita akan memanfaatkan 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:

Nama Anda:
class="textbox" id="posnama" size="30" />


Komentar Anda: <br />rows="10" class="textarea" id="pospesan">







/>

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
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 sama sekali. Dan yang pasti kode tersebut berfungsi disemua browser yang ada :)

Category ArticleProgramming