Membuat form tanpa table munggunakan CSS

Filed under HTML dan CSS

Sekarang ini trend desain web adalah tanpa table alias tableless. Mengapa tableless? katanya sih load-nya jadi lebih ringan dibanding dengan table (saya sendiri belum ngebuktiin seberapa besarkah perbedaannya). Selain itu mendesain sebuah web tanpa table jauh lebih fleksibel karena kita bisa memindahkan kolom dari kanan ke kiri atau sebaliknya dengan hanya mengubah CSS-nya tanpa mengubah code HTML-nya.

Salah satu komponen dalam sebuah halaman web adalah form isian. Nah bagaimana membuat form isian tanpa table. Berikut adalah contoh bagaimana membuat form isian tanpa table menggunakan CSS.

Kode CSS

<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}
 
label{float:left; width:150px; font-weight:bold;}
 
input, textarea, select{margin-bottom:10px; border: 1px solid #b9c7b0; padding:3px;}
 
input, textarea{width:330px;}
 
textarea{height:100px;}
 
small{display:block; padding-left:150px;}
 
.checkbox{width:2em; border:none; padding:0; margin:0;}
 
.button{margin-left:150px; margin-top:15px; width:120px; font-weight:bold; background:#2B5401; color:#fff; font-size:14px;}
 
br {clear:left;}
</style>

Kode HTML

<h2>Contoh Form tanpa table menggunakan CSS</h2>
<form action="" method="post">
<label for="name">Nama</label> <input type="text" name="name" id="name" /><small>Wajib diisin</small><br />
 
<label for="email">Email</label> <input type="text" name="email" id="email" /><small>Wajib diisin</small><br />
 
<label for="comment">Komentar</label> <textarea name="comment" id="comment" rows="5" cols="100"></textarea><small>Wajib diisin</small><br />
 
<label for="aggree">Setuju dengan Terms</label> <input type="checkbox" name="aggree" id="aggree" class="checkbox" /><br />
 
<input type="submit" name="task" value="Submit" class="button" />
</form>

Dan hasilnya dapat dilihat disini.

4 Comments

  1. Posted 11 September 2008 at 20:39 | Permalink

    Ini yang saya cari, tapi kalo mo di pasang di wordpress gimana?

    Maksih yah.
    E lupa, salam kenal yah

  2. Posted 12 September 2008 at 16:37 | Permalink

    @kang toto
    kalo nambahin ke wordpress.com kurang begitu ngerti kang.

    ngomong2 nambahinnya buat apa dulu nih?

  3. Posted 21 Februari 2009 at 14:55 | Permalink

    hmmmm…… mana lebih baguspake css dan tabeless dari pada pake tabel?

  4. Posted 24 Februari 2009 at 19:43 | Permalink

    dua-duanya bagus menurut saya, css dan tableless lebih modern daripada menggunakan tabel, dan isunya css dan tableless lebih cepet di render oleh browser daripada table.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*