Tag Archives: form css

Membuat form tanpa table munggunakan CSS

4
Posted by almuth on 11 Juli 2008 – 15:28
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.