HOMEArtikel CSS (Cascading Stylesheet)
- Home
- » CSS (Cascading Stylesheet)
- » Membuat Form yang teratur tanpa menggunakan Table
- » CSS (Cascading Stylesheet)
Membuat Form yang teratur tanpa menggunakan Table
Ditulis oleh Dhimas Ronggobramantyo
Kategori: CSS (Cascading Stylesheet)
Dibaca 6665 kali
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 :)
Komentar [23]
Dikirim oleh desi pada 12 Februari 2008 01:22:10 WIB
kenapa ce ko' klo ngasih pengetahuan g pke bhs inggris aj khan soalx klo biasa baca dg bhs inggris bs lbh pinter
Dikirim oleh BONEK pada 12 Februari 2008 01:29:42 WIB
GOSINI pemrograman kok angel bikin siswa GILA.SING gawe wis pinter a .mbok mikir sing belajar PIKIRANE ORO TEKO........................JANSING NGGAWE WIS GENDENG..............................................YOU KNOW
Dikirim oleh BONEK MANIA pada 12 Februari 2008 01:31:58 WIB
JAN%#%$@#&^$ sing MEMBUAT KOYO ORA MIKIR TOU KNOW
Dikirim oleh bogem pada 07 Maret 2008 04:19:10 WIB
@ ts
biasain pake bahasa indonesia dooong, biar tau yang isi komentarnya...
bahasa planet mana tuuu,
Dikirim oleh hans pada 11 Maret 2008 10:26:51 WIB
P3njelasannya sangat singkat N praktis terlalu singkat nya yang baca tidak bisa ngerti tho???
Dikirim oleh madewira pada 28 April 2008 10:23:05 WIB
wah ya kok ndak kepikiran ya pake "label".. hihihi thanks om 
Dikirim oleh yoondy pada 13 Mei 2008 04:39:47 WIB
nice....thx bro
Dikirim oleh YzAlberto pada 05 Juli 2008 06:07:56 WIB
Gua banyak dapat plajaran dr sini. TQ
Dikirim oleh jalal pada 19 Agustus 2008 03:44:17 WIB
gw baru belajar buat website gw masih nggak ngerti pusing....2
tapi ..
disini gw bisa dapat pelajaran baru
Dikirim oleh rr pada 20 Agustus 2008 11:34:37 WIB
good
Dikirim oleh aan pada 06 Oktober 2008 10:10:55 WIB
pak bagaimana agar form bisa dikirim ke email kita?
Dikirim oleh irha pada 22 November 2008 06:07:23 WIB
Contohin downk scrip untuk nampilin table pada php yang dikonekin ma database
Dikirim oleh chevs pada 02 Februari 2009 12:26:30 WIB
koq tampilan komentarnya gak ada di web yang saya buat??
Dikirim oleh x-number pada 13 Februari 2009 03:36:31 WIB
jangan sombong blagu pj bhs inggris
lebih baik pk bhs indonesia
Dikirim oleh setan pada 24 April 2009 04:52:09 WIB
Anjing luh...!
Dikirim oleh Engel pada 03 Juni 2009 03:21:31 WIB
Mas, mau tanya, CSS itu programnya bagaimana. Notepad k?
Dikirim oleh Pembacajongkok pada 16 Juli 2009 05:36:38 WIB
Kalo susah Frenster sama Fesbukan aja.. Biar jadi penonton selamanya Hahahahaha Dasar Pemabca Otak Udang, IQ Jongkok pake baca ginian.. Baca Cerita Bokep aja lo
Dikirim oleh wong_jawi pada 27 Juli 2009 10:29:57 WIB
kode css kok ga support di browser ya....
Dikirim oleh dedi pada 27 Juli 2009 09:47:12 WIB
cara bkin form dengan menggunakan php gmn dnk?
biar yang g bsa lht web saya..
Dikirim oleh asri pada 07 November 2009 10:06:18 WIB
membuat file HTML dengan nama forms.html dan file CSS dengan nama style.css. itu maksudnya di buat di halaman yg beda kan? trus, halaman untuk forms dan style.css itu cuma diisi kode nya aja kan? tanpa perlu diisi dalamnya misalnya nulis halaman buat homepage dll? plis jawab ya makasih..
Dikirim oleh budi setyawan pada 10 November 2009 04:13:10 WIB
trus kalaum misalnya ditulis komentar trus dikirim kok gak muncul hasil komentarnya.
mohon bantuannya...................
Dikirim oleh rojali pada 05 Januari 2010 12:26:57 WIB
tulisin ye semua coding bwat bikin website dari awal hingga akhir
Dikirim oleh davi pada 22 Januari 2010 02:23:17 WIB
sip banget ni webnya...
i like berlama2 in this web...he he he
RSS Feeds
Valid XHTML Strict