Oh ya buku tamu yang kita bicarakan ini adalah buku tamu untuk online lo ya bukan hardcover atau ditulis di kertas. Dengan adanya fasilitas HTML kita dapat membuat buku tamu secara mudah yaitu dengan menggunakan fasilitas form dan didalamnya terdapat input fields.
sebelum kita membuat sebuah form yang lengkap terlebih dahulu kita ketahui bahwa input field ini mempunyai beberapa attribut yaitu:
type : memungkinkan kita untuk memilih jenis inputan kita apakah berupa text, password, tombol submit dan reset, checkbox, atau pilihan radio.
name : digunakan untuk memberikan nama pada input field yang kita pakai
name : digunakan untuk memberikan nama pada input field yang kita pakai
size : memberikan nilai ukuran lebar secara horisontal input field yang dipakai
maxlength : mengatur jumlah karakter yang dapat diketikkan di input fields tipe text.
value : memberikan nilai pada tipe input field
maxlength : mengatur jumlah karakter yang dapat diketikkan di input fields tipe text.
value : memberikan nilai pada tipe input field
Berikut adalah attribut yang dimiliki oleh form:
method : menyatakan sebuah metode data-data di dalam form dikirim apakah dapat diketahui oleh pengunjung atau tidak
action : menyatakan sebuah tujuan data di dalam form akan dikirimCukup dulu penjelasan awalnya sekarang kita bahas satu persatu kebutuhan membuat buku tamu ini dimulai dari
Input Tipe Text
Untuk mengambil data berupa nama, email, alamat, ataupun bahkan password kita perlu tag input tipe text seperti dibawah ini:
Untuk mengambil data berupa nama, email, alamat, ataupun bahkan password kita perlu tag input tipe text seperti dibawah ini:
<html>
<head><title>Tag Input Tipe Text</title></head>
<body>
<table>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" size="20px" maxlength="4"/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" size="20px"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" size="20px" maxlength="4"/></td>
</tr>
</table>
</body>
</html>
attribut type digunakan untuk menentukan tipe input text, kalau contoh diatas ada dua tipe yaitu text dan password dan keduanya mempunyai perbedaan yaitu tipe text nilainya dapat kita baca seperti nama atau email seseorang tetapi kalau tipe password tidak dapat kita baca hal ini sesuai dengan sifatnya yang rahasia.
attribut size seperti yang telah dijelaskan sebelumnya yaitu berfungsi menentukan lebar horisontal tipe text. Pada contoh diatas kita beri nilai size=”20px”, untuk mengetahui fungsinya secara jelas coba rubah nilai tersebut menjadi size=”50px” dan coba amati yang terjadi.
attribut maxlength digunakan untuk menentukan jumlah karakter yang dapat ditulis di dalam input tipe text maupun password, coba masukkan angka 1 sampai 5 di dalam input nama dan password. Ketika kita ketik angka 5 maka angka tersebut tidak dapat kita tulis kenapa? karena input tersebut sudah kita batasi hanya berjumlah 4 karakter. Anda bisa juga coba dengan karakter yang lain selain angka 1 sampai 5.
attribut name digunakan untuk memberi identitas terhadap sebuah input dan hal ini berlaku juga untuk manusia lo….. , jika kita tidak memberi sebuah nama maka bagian computing akan kesulitan memproses data yang kita berikan. Nama ini yang nantinya akan menjadi sebuah variabel untuk selanjutnya dimasukkan kedalam database. jadi jangan lupa memberi nama atau identitas.
Input Tipe Radio
Ini bukan radio seperti yang ada di kota kita lo ya tapi tag input tipe radio yang berfungsi untuk menentukan satu pilihan diantara pilihan lainnya atau biasa kita mengenalnya dengan istilah polling. Ok kita langsung kasih contoh saja
attribut size seperti yang telah dijelaskan sebelumnya yaitu berfungsi menentukan lebar horisontal tipe text. Pada contoh diatas kita beri nilai size=”20px”, untuk mengetahui fungsinya secara jelas coba rubah nilai tersebut menjadi size=”50px” dan coba amati yang terjadi.
attribut maxlength digunakan untuk menentukan jumlah karakter yang dapat ditulis di dalam input tipe text maupun password, coba masukkan angka 1 sampai 5 di dalam input nama dan password. Ketika kita ketik angka 5 maka angka tersebut tidak dapat kita tulis kenapa? karena input tersebut sudah kita batasi hanya berjumlah 4 karakter. Anda bisa juga coba dengan karakter yang lain selain angka 1 sampai 5.
attribut name digunakan untuk memberi identitas terhadap sebuah input dan hal ini berlaku juga untuk manusia lo….. , jika kita tidak memberi sebuah nama maka bagian computing akan kesulitan memproses data yang kita berikan. Nama ini yang nantinya akan menjadi sebuah variabel untuk selanjutnya dimasukkan kedalam database. jadi jangan lupa memberi nama atau identitas.
Input Tipe Radio
Ini bukan radio seperti yang ada di kota kita lo ya tapi tag input tipe radio yang berfungsi untuk menentukan satu pilihan diantara pilihan lainnya atau biasa kita mengenalnya dengan istilah polling. Ok kita langsung kasih contoh saja
<html>
<head><title>Tag Input Tipe Radio</title></head>
<body>
<table>
<tr>
<td valign="top">Polling Rasa Makanan</td>
<td>
<input type="radio" name="pilihan" value="sangat_enak" checked="yes">Sangat Enak</br>
<input type="radio" name="pilihan" value="enak">Enak</br>
<input type="radio" name="pilihan" value="tidak enak">Tidak Enak</br>
<input type="radio" name="pilihan" value="sgt_tdk_enak">Sangat Tidak Enak</br>
</td>
</tr>
</table>
</body>
</html>
attribut checked=”yes” mentukan secara default pilihan kita, jika kita jalankan kode HTML tersebut maka pilihan sangat enak secara default akan terpilih.
Input Tipe Checkbox
Attribut input tipe checkbox adalah sama dengan input tipe radio tetapi berbeda fungsinya yaitu dapat memilih semua pilihan yang ada, dengan cara memberikan tanda centang pada pilihan tersebut. Secara default kita juga dapat menentukan pilihan mana yang sudah terpilih menggunakan attribut checked=”yes”. Ok langsung kita ke contoh saja
<html>
<head><title>Tag Input Tipe Checkbox</title></head>
<body>
<table>
<tr>
<td valign="top">Apa Kesukaan Anda</td>
<td>
<input type="checkbox" name="pilihan" value="belanja" checked="yes">Belanja</br>
<input type="checkbox" name="pilihan" value="baca">Baca Buku</br>
<input type="checkbox" name="pilihan" value="olahraga" checked="yes">Olahraga</br>
<input type="checkbox" name="pilihan" value="jalan">Jalan-Jalan</br>
</td>
</tr>
</table>
</body>
</html>
TEXTAREA
tag ini kita gunakan untuk mendeskripsikan sebuah kalimat yang panjang seperti pesan dan kesan, tentunya mempunyai beberapa attribut juga seperti:
cols : digunakan untuk menentukan lebar textarea kita
rows : digunakan untuk menentukan tinggi textarea
name: memberi identitas textarea yang kita buat
<html>
<head><title>Textarea Untuk Pesan dan Kesan</title></head>
<body>
<table>
<tr>
<td valign="top">Pesan</td>
<td><textarea name="pesan" cols="40" rows="5">Tulis Pesan</textarea></td>
</tr>
<tr>
<td valign="top">Kesan</td>
<td><textarea name="kesan" cols="40" rows="5">Tulis Kesan</textarea></td>
</tr>
</table>
</body>
</html>
Nah itu semua adalah dasar kita untuk membuat sebuah buku tamu, sekarang kita akan membuat sebuah buku tamu sederhana seperti berikut ini. Anda dapat melakukan copy & paste lalu coba jalankan kode HTML berikut ini dengan browser kesayangan. Nikmati……… sambil minum Kopi…… kalo gak ada????@@%# ya minum air putih ajaaa…..
<html>
<head><title>Latihan Membuat Buku Tamu</title></head>
<body>
<form method="post" action="#">
<table>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" size="30px" maxlength="20"/></td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text" name="alamat" size="30px" maxlength="20"/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" size="30px"/></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td><input type="radio" value="L" name="kelamin">Laki-Laki
<input type="radio" value="P" name="kelamin">Perempuan
</td>
</tr>
<tr>
<td valign="top">Acara Yang Disukai</td>
<td><input type="checkbox" value="Dance" name="acara">Dance</br>
<input type="checkbox" value="Singing" name="acara">Singing</br>
<input type="checkbox" value="Makan" name="acara">Makan-makan</br>
</td>
</tr>
<td valign="top">Pesan</td>
<td><textarea cols="40" rows="5" name"pesan">kotak pesan</textarea></td>
<tr>
</tr>
<tr>
<td valign="top">Kesan</td>
<td><textarea cols="40" rows="5" name"kesan">kotak kesan</textarea></td>
</tr>
<tr><td colspan="2"><input type="submit" name="submit" value="Kirim">
<input type="reset" name="reset" value="Batal">
</td>
</tr>
</table>
</form>
</body>
</html>
Ok, Sampai disini dulu tutorial Cara Membuat Buku Tamu Blog Dengan Tag Table HTML Jika masih ada pertanyaan mengenai tutorial diatas jangan lupa untuk bertanya lo ya.... kasih saja lewat form komentar.
