Cara Membuat Form di dalam Tabel

Membuat form di dalam tabel

Agar tampilan form di sebuah web ataupun blog, biasanya pemilik blog atau web tersebut akan menggunakan tabel. Tetapi dalam perkembangannya, tag table ini sudah jarang digunakan dan sebagai penggantinya menggunakan tag <div>. Meskipun begitu dalam posting ini saya akan memberikan contoh untuk mengaplikasikan tag form ke dalam tabel. Tag tabel digunakan untuk membuat tampilan form menjadi lebih rapi, jadi dengan menggunakan table tampilan form akan menjadi lebih cantik. Gimana sih cara buatnya? Pertama kali kita perlu membuat kode html untuk form di dalam tablenya. Lihat contoh di bawah ini ya...!!!

<form action="#" method="get">
<table width="10%" align="center" cellspacing="1" cellpadding="5">
<tr>
<th colspan="2">Masukkan Data Anda dibawah ini :</th>
</tr>
<tr>
<td>Nama</td>
<td>:<input type="text" name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:<input type="text" name="email"></td>
</tr>
<tr>
<td>Password</td>
<td>:<input type="password" name="pwd"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:<textarea name="alamat" cols="10px" rows="5px"></textarea></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:<input type="radio" name="JK" value="Laki-laki">Laki-laki
<input type="radio" name="JK" value="Perempuan">Perempuan
</td>
</tr>
<tr>
<td>Hobby</td>
<td>:<input type="checkbox" name="hobby" value="g">g
<input type="checkbox" name="hobby" value="b">b
<input type="checkbox" name="hobby" value="c">c
</td>
</tr>
<tr>
<td>Gambar</td>
<td>:<input type="file" name="gambar"></td>
</tr>
<tr>
<td>Pesan</td>
<td>:<textarea name="pesan" cols="10px" rows="5px"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Simpan">
<input type="reset" name="Hapus" value="Hapus">
</td>
</tr>
</table>
</form>

Nah kode-kode yang berwarna biru dan hitam bisa kalian edit sesuka hati kalian. Kode yang berwarna biru, tidak akan muncul dalam layout, tetapi kode yang berwarna hitam, itulah kata yang akan muncul pada layout.

Kalau kita udah buat kode HTML form di dalam tabelnya. Ini dia hasilnya...

Masukkan Data Anda dibawah ini :
Nama	:
Email	:
Password	:
Alamat	:
Jenis Kelamin	:Laki-laki Perempuan
Hobby	:g b c
Gambar	:
Pesan	:

Lebih rapi bukan...hehehe... Ini punyaku...mana punyamu? Baca artikel lainya cara membuat tabel diblog dan cara membuat form di blog.