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

Komentar

Halaman Lainya

  • Mengatur paragraf dengan css
    Paragraf secara mendasar diartikan sebagai kumpulan kalimat yang memiliki ide atau pokok bahasan yang sama. Dalam penulisannya paragraf biasanya terdiri dari susunan kata-kata yang terhubung secara logis untuk menjelaskan suatu topik atau ide. Kali ini saya tidak membahas bagaimana membuat paragraf atau cara menulis paragraf, tapi saya akan membahas bagaimana menyusun tampilan sebuah paragraf html dengan css.
  • Membuat efek gambar dengan css
    CSS memiliki kemampuan efek khusus yang bisa digunakan untuk memperindah tampilan web atau blog. Selain bisa kita terapkan pada objek-objek tulisan, tabel, dan list kita juga bisa gunakan untuk mengatur tampilan gambar.
  • Membuat tulisan ditengah
    Panduan lengkap cara membuat tulisan/objek di posisi tengah halaman dengan HTML/css
  • 6 Cara penulisan warna dalam css
    Cara penulisan warna dalam css untuk keperluan halaman web bisa kita lakukan dengan 6 cara. Semuanya mengarah pada penggunaan warna yang sama tapi ditulis dengan cara berbeda. Berikut ini saya akan berbagi tentang beberapa metode penulisan warna dalam css yang bisa anda gunakan.
  • Membuat efek gambar di blog dengan css
    CSS sangat felxibel bisa digunakan untuk banyak keperluan, berbagai media, semua platform dan semua sistem pengelola konten (wordpress, blogger, joomla dll). Penggunaanya juga sangat mudah sehingga kita bisa brekreasi dengan tulisan maupun gambar. Kali ini saya akan berbagi cara bagaimana menyisipkan efek gambar dengan css pada blogger.

Kiriman terbaru