Blog sharing cara membuat blog, website, toko online, desain web, dan template

Saturday, November 1, 2014

Cara Membuat Form di dalam Tabel

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.

Share on Facebook
Share on Twitter
Share on Google+

Related : Cara Membuat Form di dalam Tabel

3 comments:

Unknown said...

itu cara nampilkan hasilnya gmana dan disimpan dmana...

Inti Multi Mandiri said...

Assalamu'alaykum.. Om itu kolom Form nya kirim kemana? apa masuk email atau gmn?

rian cahya fajar said...

Artikelnya luar biasa dan mudah di pahami, apalagi disertai dengan contoh coding nya, jadi lebih mempermudah untuk memahami penulisan form/formulir, semoga kedepan admin bisa membuat artikel yang lebih bermanfaat lagi, perkenalkan saya Rian Cahya Fajar, jangan lupa kunjungi website kampus kami : https://www.atmaluhur.ac.id/ Terima Kasih