Jul
11

Membuat form tanpa table munggunakan 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.

Juli 11, 2008   //   HTML dan CSS   //   5 Comments   //   Tags: ,

5 Comments to “Membuat form tanpa table munggunakan CSS”

  • 11 September 2008 pukul 20:39
    kang toto says:

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

    Maksih yah.
    E lupa, salam kenal yah

    Balas
  • 12 September 2008 pukul 16:37
    almuth says:

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

    ngomong2 nambahinnya buat apa dulu nih?

    Balas
  • 21 Februari 2009 pukul 14:55
    yaddi says:

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

    Balas
    • 24 Februari 2009 pukul 19:43
      almuth says:

      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.

      Balas
  • 29 November 2010 pukul 22:44
    edy says:

    Terimakasih atas infonya. Sangat bermanfaat. Oya, ini bisa digunakan untuk web CMS?

    Balas

Post comment