Cara Membuat Form Menggunakan HTML

Membuat form dalam HTML sangatlah mudah apalagi sekarang bisa dibantu dengan fasilitas WYSIWYG (what you see it's what you get)  atau editor visual yang langsung terlihat hasilnya. Tapi tidak ada salahnya anda mengetahui kode sebenarnya untuk membuat form yang disisipkan dalam barisan kode html dalam sebuah halaman yang mungkin bisa ratusan bahkan ribuan.

Apa kata dunia jika seandainya anda bisa membuat desain halaman web tapi tidak tahu kodenya...

Apa jawaban anda jika anda disuruh atasan membuat form html di komputer yang gak ada editor htmlnya...maaf pak saya lupa bawa softwarenya...hehehhe

Contoh kasus form untuk keperluan membuat fasilitas buku tamu. Lihat kode html berikut :

<form action="simpan.php" method="post" name="FBukuTamu" id="FBukuTamu">   <p>Nama :     <input name="nama" type="text" id="nama" size="30" maxlength="30">     <br>     Email :     <input name="email" type="text" id="email" size="40" maxlength="100">     <br>     Website :     <input name="website" type="text" id="website" size="40" maxlength="100">     <br>     Pesan :      <textarea name="pesan" cols="40" rows="3" id="pesan"></textarea>   </p>   <p>     <input type="submit" name="btnKirim" id="btnKirim" value="Kirim">     <input type="reset" name="btnUlangi" id="btnUlangi" value="Ulangi"> </p> </form>

Sebuah form ditandai dengan perintah awal <form> dan diakhiri dengan </form>
Anda perhatikan kode diatas, perintah <form> memiliki beberapa atribut yaitu :

1. action digunakan untuk menentukan tujuan form dikirim dan diproses
2. method digunakan untuk menentukan cara pengiriman data bisa post atau get
3. name dan id digunakan sebagai identitas unik form dalam sebuah halaman

diantara perintah form disisipkan elemen input yang berfungsi sebagai objek visual untuk menerima masukan dari pengguna. Elemen form yang umum digunakan terdiri dari :

1. <input>
   
   1. type="text" --> untuk input text satu baris
   2. type="submit" --> untuk membuat tombol kirim
   3. type="reset" --> untuk membuat tombol reset/mengulangi
   4. type="button" --> tombol tanpa fungsi biasanya dipakai dengan bantuan javascript misal untuk tombol close, print dll
   5. type="checkbox" --> untuk checklist banyak pilihan
   6. type="radio" --> untuk satu pilihan dari beberapa pilihan
   7. type="file" --> untuk upload file
   8. type="hidden" --> untuk nilai tersembunyi, biasanya nilainya sudah diset otomatis
   9. type="password" --> bentuk password karakter "*"
2. <textarea> --> digunakan untuk masukan dengan banyak baris misal untuk pesan seperti contoh diatas
3. <select> --> digunakan untuk menandai awal dari bentuk list pilihan atau sering disebut pilihan dropdown
4. <option> --> elemen pilihan dropdown

Jadi form yang tersedia rasanya sudah cukup lengkap untuk semua keperluan jika kita mau bikin aplikasi web ataupun hanya sekedar fasilitas dihalaman web. Tinggal tampilan saja yang perlu kita buat sebagus mungkin agar menarik.

Cara Membuat Tabel Menggunakan HTML

Tabel adalah salah satu objek terpenting yang bisa kita gunakan untuk banyak keperluan.Tabel bisa digunakan untuk membuat laporan dengan HTML, bisa digunakan untuk menyusun objek lain seperti gambar atau tulisan, bahkan tabel juga bisa digunakan untuk menata layout tampilan web. Bagi anda yang sedang belajar bahasa pemrograman web seperti PHP atau yang lainya, tabel ini juga bagian terpenting yang harus anda ketahui karena bentuk laporan dari database tentunya akan disajikan dalam bentuk tabel. Bagaimana cara membuat tabel yang benar? dan bagaimana contohnya?

Pertama kita akan mengenal perintah-perintah yang berhubungan dengan membuat tabel.

Perintah Dasar Membuat Table HTML

Perintah dasar adalah perintah yang harus ada dalam sebuah susunan tabel, yaitu :

<table border="1"> <tr> <th>Nama</th> <th>Alamat</th> </tr> <tr> <td>Johan</td> <td>Pulau Seribu</td> </tr> </table>

Jika dilihat dari contoh kode membuat tabel html diatas maka sebuah tabel terdiri dari :

<table>..</table> : digunakan sebagai tanda awal tabel
<tr>..<tr> : digunakan sebagai tanda awal baris, tr kependekan dari table row
<th>..</th> : digunakan untuk membuat tampilan kolom header tabel, th kependekan dari table head
<td>..</td> : digunakan untuk menyusun kolom data, td kependekan dari table data

Dalam beberapa kasus, mungkin akan ditemui juga penggunaan perintah thead, tbody dan tfoot :

<table border="1" cellpadding=5 cellspacing="0"> <thead> <tr> <th>Bulan</th> <th>Tanggal</th> <th>Jumlah</th> </tr> </thead> <tbody> <tr> <td>Jan</td> <td>01/01/2012</td> <td>100</td> </tr> <tr> <td>Peb</td> <td>02/02/2012</td> <td>111</td> </tr> </tbody> <tfoot> <tr> <th colspan=2 align=left>Total</th> <th>211</th> </tr> </tfoot> </table>

<thead>..</thead> : digunakan untuk mengelompokkan bagian header tabel
<tbody>..</tbody> : digunakan untuk mengelompokkan bagian data/isi tabel
<tfoot>..</tfoot> : digunakan untuk mengelompokkan bagian footer tabel

Secara tampilan, 3 perintah diatas tidak berpengaruh, hanya digunakan untuk pengembangan dengan css

Atribut Table HTML

Atribut adalah perintah tambahan yang ditempelkan pada perintah utama/dasar, atribut bersifat tidak pasti hanya digunakan jika diperlukan. Atribut meliputi :

align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertikal
width : untuk mengatur lebar
height : untuk mengatur tinggi
border : untuk mengatur tebal garis
cellpadding : untuk mengatur jarak garis dengan objek didalamnya
cellspacing : untuk mengatur jarak tiap cell
bgcolor : untuk mengatur warna
background : untuk mengatur latar gambar
rowspan : jumlah baris yang memotong beberapa baris
colspan : jumlah kolom yang memotong beberapa kolom

Referensi warna bisa dilihat pada posting saya Referensi Warna untuk HTML maupun CSS

Memang ada beberapa atribut yang tidak umum (bukan standard) seperti bordercolor, title dan beberapa lainya tapi saya pikir ini tidak perlu.

Berikut ini contoh lengkap dengan atribut :

Rowspan 3	Nama	Alamat	Telp.	Colspan 2
	ALI	Jl. Ijo	11211
	UDIN	Jl.biru	23232

Susunan kodenya :

<table width="500" border="1" cellspacing="0" cellpadding="3"> <tr> <th width="53" rowspan="3" bgcolor="#00CCCC">Rowspan 3</th> <th width="74" height="41" bgcolor="#00CCCC">Nama</th> <th width="83" bgcolor="#33FF33">Alamat</th> <th width="92" bgcolor="#FF9900">Telp.</th> <th colspan="2" bgcolor="#FF9900">Colspan 2</th> </tr> <tr> <td bgcolor="#66CCFF">ALI</td> <td align="center" bgcolor="#99CC66">Jl. Ijo</td> <td bgcolor="#9966FF">11211</td> <td width="92" bgcolor="#9966FF">&nbsp;</td> <td width="92" bgcolor="#9966FF">&nbsp;</td> </tr> <tr> <td bgcolor="#FFFF00">UDIN</td> <td align="center" bgcolor="#FFFF00">Jl. Rencong</td> <td bgcolor="#FFFF00">23232</td> <td bgcolor="#FFFF00">&nbsp;</td> <td bgcolor="#FFFF00">&nbsp;</td> </tr> </table>

kesimpulan

Untuk menyusun sebuah tabel, kita harus mendeklarasikan awal dengan <table> dan diakhir dengan </table>
Setiap baris, harus dideklarasikan <tr> dan diakhiri dengan </tr>
Setiap kolom, harus menggunakan <th> dan </th> jika sebagai header, <td> dan </td> jika sebagai data.

Semoga bermanfaat