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 :

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

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 :

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 **