Menyusun tampilan form tanpa perintah table

Menyusun tampilan form tanpa perintah table

Tabel dalam html biasanya digunakan untuk menyusun laporan atau membuat layout/tampilan elemen html agar terlihat lebih rapi. Pada tutorial kali ini saya akan berbagi tentang bagaimana Menyusun tampilan form input tanpa perintah table, tetapi menggunakan css. Teknik menyusun tampilan elamen html tanpa perintah tabel ini sering disebut dengan tableless (sedikit tabel).

Biasanya jika kita membuat dengan bantuan tabel maka hasilnya seperti berikut :

layout form dengan bantuan tabel

Gambar diatas dengan pengaturan nilai garis tabel = 1, dan jika garis tabel diset 0 maka tampilan seperti berikut :

layout form dengan bantuan tabel

Tampilan tabel diatas disusun dengan bantuan elemen tabel, dengan perintah html :

<form name="FREG" method="post" action="">
  <table width="500" border="0" align="center" cellpadding="3" cellspacing="1">
    <tr>
      <td height="38" colspan="3" align="center">REGISTRASI ANGGOTA</td>
    </tr>
    <tr>
      <td width="131">NAMA</td>
      <td width="13">:</td>
      <td width="334"><input name="FNAMA" type="text" id="FNAMA" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td>ALAMAT</td>
      <td>:</td>
      <td><textarea name="FALAMAT" cols="30" rows="3" id="FALAMAT"></textarea></td>
    </tr>
    <tr>
      <td>EMAIL</td>
      <td>:</td>
      <td><input name="FEMAIL" type="text" id="FEMAIL" size="50" maxlength="100"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input type="submit" name="brnKirim" id="brnKirim" value="Kirim">
      <input type="reset" name="btnUlangi" id="btnUlangi" value="Ulangi"></td>
    </tr>
  </table>
</form>

Jika anda lihat diatas terlihat perintah-perintah tabel yaitu table, tr, dan td. Untuk menyusunya lumayan rumit dan jika ada perubahan tampilan maka otomatis seluruh tag juga harus anda sesuaikan.

Bagaimana jika semua perintah tabel tersebut kita ubah menjadi elemen html lain agar lebih praktis?? Berikut ini langkahnya :

Membuat tag form

<form name="FREG" method="post" action="">
    <h1>REGISTRASI ANGGOTA</h1>
    <label>NAMA</label> : <input name="FNAMA" type="text" id="FNAMA" size="30" maxlength="30"><br>
    <label>ALAMAT</label> : <textarea name="FALAMAT" cols="30" rows="3" id="FALAMAT"></textarea><br>
    <label>EMAIL</label> : <input name="FEMAIL" type="text" id="FEMAIL" size="50" maxlength="100"><br>
    <div id="btn">
    <input type="submit" name="brnKirim" id="brnKirim" value="Kirim">
    <input type="reset" name="btnUlangi" id="btnUlangi" value="Ulangi">
    </div>
</form>

Untuk menyusun tampilan tanpa tabel, saya menggunakan perintah seperti diatas. Cukup ringkas dan gampang dimodifikasi. Kemudian saya membuat perintah css seperti berikut :

<style type="text/css">
  #FREG { margin:0 auto;width:500px;background-color:#CCCCCC;padding:10px;}
  h1 { padding:5px;margin:10px;text-align:center }
  form label { float:left; width:100px;}
  form br { clear:left;}
  #btn { margin:10px; text-align:center;padding:5px; }
</style>

CSS diatas digunakan untuk mengatur layout semua elemen yang sudah dibuat dalam form. Dan jika kita gabungkan antara perintah css dan perintah form maka tampilanya terlihat seperti berikut :

form input dengan css

Anda bisa melihat bedanya, antara tampilan yang menggunakan perintah tabel dengan yang menggunakan perintah tanpa tabel, tentunya pasti lebih praktis dan optimal dengan cara yang ke dua.

Berikut perintah lengkap untuk membuat tampilan form tanpa tabel :

<style type="text/css">
    #FREG { margin:0 auto;width:500px;background-color:#CCCCCC;padding:10px;}
    h1 { padding:5px;margin:10px;text-align:center }
    form label { float:left; width:100px;}
    form br { clear:left;}
    #btn { margin:10px; text-align:center;padding:5px; }
</style>
<form name="FREG" id="FREG" method="post" action="">
    <h1>REGISTRASI ANGGOTA</h1>
    <label>NAMA</label> : <input name="FNAMA" type="text" id="FNAMA" size="30" maxlength="30"><br>
    <label>ALAMAT</label> : <textarea name="FALAMAT" cols="30" rows="3" id="FALAMAT"></textarea><br>
    <label>EMAIL</label> : <input name="FEMAIL" type="text" id="FEMAIL" size="50" maxlength="100"><br>
    <div id="btn">
    <input type="submit" name="brnKirim" id="brnKirim" value="Kirim">
    <input type="reset" name="btnUlangi" id="btnUlangi" value="Ulangi">
    </div>
</form>

Anda bisa memodifikasi tampilan form, cukup dengan mengubah perintah cssnya saja. Silahkan download contoh file lengkapnya disini. Download

Semoga bermanfaat dan selamat mencoba.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Cara membuat dan menyisipkan CSS dalam halaman web
    Panduan Cara membuat dan menyisipkan CSS pada halaman web
  • Membuat tombol css dengan animasi
    membuat tombol dengan tampilan animasi dengan css
  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.
  • Membuat tulisan ditengah dalam halaman web
    Ada banyak cara untuk menempatkan sebuah text atau objek pada posisi tengah dalam halaman website bisa dengan perintah HTML biasa atau dengan teknologi CSS yang digunakan untuk menyusun tata layout halaman web.
  • Membuat bingkai gambar dengan css
    Kemampuan css dalam memperindah tampilan sudah tidak diragukan lagi, apalagi dengan hadirnya css3 sebagai pengembangan dari versi sebelumnya memang menambah kemampuan serta fleksibilitasnya dalam urusan pengaturan tampilan halaman web. Kali ini saya akan sedikit berbagi tentang bagaimana membuat bingkai gambar dengan css.

Kiriman terbaru