Salam Blogger Selalu ..
Duh rasanya udah lama banget ga posting, bahasan kali ini saya akan post tentang pembuatan form atau formulir.
Jadi contohnya kita akan membuat formulir pendaftaran seperti kalo kita akan daftar email ataupun daftar facebook, tau kan ??? sip ! kita teruskan aja deh, kita ambil contoh membuat formulir pendaftarn facebook.
Mungkin kurang lebih tampilannya seperti di bawah ini :
Pertanyaan pertama gimana caranya supaya tampilan formnya rapih seperti gambar diatas ? nah ! tipsnya dengan menggunakan tag table, jadi sobat blogger harus udah ngerti pembahasan table.
Yang harus di perhatikan :
- Jenis huruf yang di pakai : verdana | size : 11px.
- Background biru muda, kalo mau sama seperti face harus pake gambar, karena gambarnya gradient antara biru sama putih.
| <html> <head> <title>Form pendaftaran facebook</title> </head> <body> <table border="0"> <form method="post"> <tr> <td>Nama Depan</td> <td>:</td> <td><input type="text" name="nama_depan" size="30"></td> </tr> <tr> <td>Nama Belakang</td> <td>:</td> <td><input type="text" name="nama_belakang" size="30"></td> </tr> <tr> <td>Email Anda</td> <td>:</td> <td><input type="text" name="email1" size="30"></td> </tr> <tr> <td>Masukan Ulang Email</td> <td>:</td> <td><input type="text" name="email2" size="30"></td> </tr> <tr> <td>Kata Sandi Baru</td> <td>:</td> <td><input type="password" name="sandi" size="30"></td> </tr> <tr> <td>Saya Seorang</td> <td>:</td> <td> <select name="jk"> <option value="">Pilih Jenis Kelamin :</option> <option value="laki - laki">Laki - laki</option> <option value="Perempuan">Perempuan</option> </select> </td> </tr> <tr> <td>Tanggal Lahir</td> <td>:</td> <td> <select name="tanggal"> <option value="">Tanggal :</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <select name="bulan"> <option value="">Bulan :</option> <option value="Januari">Januari</option> <option value="Februari">Februari</option> <option value="Maret">Maret</option> <option value="April">April</option> </select> <select name="tahun"> <option value="">Tahun :</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> </select> </td> </tr> <tr> <td></td> <td></td> <td><input type="submit" value="Mendaftar"></td> </tr> </form> </table> </body> </html> |
- Untuk 1 tag <tr> berlaku 1 baris, misal nama depan berlaku dengan isiannya.
- dalam 1 baris/<tr> ada 3 kolom, kolom pertama dengan nama, kedua (:), tiga textboxnya.
- table border=0, supaya tidak terlihat garisnya.
| <html> <head> <title>Form pendaftaran facebook</title> </head> <body bgcolor="#FOF8FF" style="font-size:11px; color:darkblue;"> <font face="verdana"> <font color="darkblue" size="5"><b>Mendaftar</b></font><br> Gratis, sampai kapanpun. <hr color="darkblue" style="border-style:solid; border-width:0.1px;"> <table border="0" style="font-size:11px;"> <form method="post"> <tr> <td align="right">Nama Depan</td> <td>:</td> <td><input type="text" name="nama_depan" size="35"></td> </tr> <tr> <td align="right">Nama Belakang</td> <td>:</td> <td><input type="text" name="nama_belakang" size="35"></td> </tr> <tr> <td align="right">Email Anda</td> <td>:</td> <td><input type="text" name="email1" size="35"></td> </tr> <tr> <td align="right">Masukan Ulang Email</td> <td>:</td> <td><input type="text" name="email2" size="35"></td> </tr> <tr> <td align="right">Kata Sandi Baru</td> <td>:</td> <td><input type="password" name="sandi" size="35"></td> </tr> <tr> <td align="right">Saya Seorang</td> <td>:</td> <td> <select name="jk"> <option value="">Pilih Jenis Kelamin :</option> <option value="laki - laki">Laki - laki</option> <option value="Perempuan">Perempuan</option> </select> </td> </tr> <tr> <td align="right">Tanggal Lahir</td> <td>:</td> <td> <select name="tanggal"> <option value="">Tanggal :</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <select name="bulan"> <option value="">Bulan :</option> <option value="Januari">Januari</option> <option value="Februari">Februari</option> <option value="Maret">Maret</option> <option value="April">April</option> </select> <select name="tahun"> <option value="">Tahun :</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> </select><br> Mengapa Saya harus memberikan tanggal lahir saya ? </td> </tr> <tr> <td></td> <td></td> <td><input type="submit" value="Mendaftar"></td> </tr> </form> </table> </font> <hr color="darkblue" style="border-style:solid; border-width:0.1px;"> </body> </html> |
- Script yang berwarna merah tambahan dari script yang pertama.
0 komentar:
Posting Komentar