tutorial ini diasumsikan teman-teman sudah mengerti HTML/XHTML dan CSS dasar. Memang agak sedikit jauh, bagusnya saya mengenal kan dulu CSS dasar nya, tapi karena sudah ga nahan pengen posting..yah beginilah jadinya :D
Seperti yang sudah saya sebutkan di atas tadi tugas membuat form registrasi ini minimalnya harus ada input untuk:
1. Nama Depan
2. Nama Belakang
3. Username
4. Password
5. Email
6. Jenis Kelamin
7. Tanggal lahir
8. File untuk upload photo
Kita akan membuat form registrasi ini menggunakan gaya tabless design jadi saya tidak akan menggunakan table untuk layout / tata letak nya. Karena table diperuntukan untuk menampilkan data yang bersifat tabular, jadi bukan untuk design layout ;)
Oh iya dalam tutorial ini, saya menggunakan aplikasi textmate, tapi Anda bisa menggunakan aplikasi sejenis seperti notepad++ atau yg lainnya.
Langkah pertama adalah membuat File baru .html
struktur kode yang didapat kira-kira seperti ini
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/> <title>untitled</title> </head> <body> <!-- code html form registrasi akan disimpan disini --> </body> </html>gantilah text diantara tag <title></title> dengan judul yang sesuai, disini saya menggantinya menjadi :
<title>form registrasi — tugas pemrograman web I</title>tambahkan code berikut setelah nya;
<style type="text/css" media="screen"> /* kode css akan disimpan disini*/ </style>
Catatan: Di sini digunakan internal stylesheet embeding,maksudnya kode css disimpan didalam file HTML. Sebenarnya ini kurang disarankan, akan lebih baik lagi jika Anda menggunakan External stylesheet embeding (CSS Styles disimpan dalam file yg terpisah dari file HTML).
Tuliskan kode berikut di antara tag <body> </body> coba lihat di atas komentar dengan tulisan <!-- code html form registrasi akan disimpan disini -->
<div id="container"> <div class="frmWrapper"> <div class="content-heading"> <div class="heading"> <div class="infoMhs">NPM : 007<br/>Nama: James Bond</div> <h2>form registrasi</h2> <p class="info-signup">Tugas pemrograman web I</p> </div> </div> <div id="frmReg"> <form action="tugasweb1_submit" method="post" enctype="multipart/form-data"> <fieldset> <ul> <li><label for="firstName">Nama Depan</label><input type="text" name="firstName" value="" id="firstName"/></li> <li><label for="lastName">Nama Belakang</label><input type="text" name="lastName" value="" id="lastName"/></li> <li><label for="userName">Username</label><input type="text" name="userName" value="" id="userName"/></li> <li><label for="password">Password</label><input type="password" name="password" value="" id="password"/></li> <li><label for="email">Email</label><input type="text" name="email" value="" id="email"/></li> <li><label for="jk">Jenis Kelamin</label> <div class="inputWrapper"> <input type="radio" name="jk" value="L" id="jk"/>laki-laki <input type="radio" name="jk" value="P" id="P"/>Perempuan </div> </li> <li><label for="tgl">Tanggal Lahir</label><div class="inputWrapper"> <select name="tgl" id="tgl"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <select name="bln" id="bln"> <option value="januari">Januari</option> <option value="februari">Februari</option> <option value="maret">Maret</option> <option value="april">April</option> <option value="mei">Mei</option> <option value="juni">Juni</option> <option value="juli">Juli</option> <option value="agustus">Agustus</option> <option value="september">September</option> <option value="oktober">Oktober</option> <option value="november">November</option> <option value="desember">Desember</option> </select> <select name="thn" id="thn"> <option value="1900">1900</option> <option value="1901">1901</option> <option value="1902">1902</option> <option value="1903">1903</option> <option value="1904">1904</option> <option value="1905">1905</option> <option value="1906">dst</option> </select></div> </li> <li><label for="imgUpload">Photo</label> <div class="inputWrapper"><input type="file" name="imgUpload" value="" id="imgUpload"/></div> </li> <li><label ></label> <div class="inputWrapper"> <input class="left" type="checkbox" name="agree" value="" id="agree"/> <label for="agree"class="emailUpdates">kirim saya email pembaharuan</label> <div class="clearfix"></div> </div> </li> <li> <label></label><input type="submit" value="Daftar" class="btnSubmit"/> </li> </ul> </fieldset> </form> </div> </div> <!-- end frmWrapper --> </div> <!-- end container -->Setelah Anda menuliskan lengkap struktur atau kode HTML diatas, kemudian tambahkanlah script CSS seperti berikut seperti diatas, mengganti tulisan /* kode css akan disimpan disini*/:
body{background:#DDD none repeat scroll 0 0;
font-family:'Lucida Grande',sans-serif;font-size:14px;
}
ul,li{
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
fieldset{border:0;}
#container {
background:#FFF none repeat scroll 0 0;
color:#333;margin:1em auto;
position:relative;text-align:left;width:763px;
z-index:1;
}
.content-heading {margin:20px 25px 25px;}
.content-heading .heading {line-height:1;padding-bottom:5px;}
.heading h2{
font-family:Helvetica,Arial,sans-serif;font-size:26px;
font-weight:bold;letter-spacing:-1px;
text-transform:capitalize;margin:0 !important;
}
.frmWrapper{padding:5px 10px 15px;}
.info-signup {color:#666;line-height:18px;margin:5px 0;}
.infoMhs{
color:#666;float:right;
font-size:10px;line-height:18px;
}
#frmReg li{margin-bottom:10px;}
#frmReg label{
color:#666;display:block;float:left;font-size:14px;
line-height:18px;margin:6px 10px 0 0;
text-align:right;width:120px;
}
#frmReg input, #frmReg input:focus{
font-size:14px;outline:0;border:1px solid #CCC;padding:5px;
}
.inputWrapper{
color:#666;font-size:12px;padding:5px;
}
.btnSubmit{cursor:pointer;}
#frmReg label.emailUpdates{
font-size:12px;
margin:2px;width:auto;
}
.left{float:left;}
.clearfix{clear:both;}
Sekarang lihatlah hasilnya ;)Bila ada yang kurang jelas, silahkan mengirimkan komentar atau pertanyaan..Selamat mencoba! :)
4 comments:
Wah...rumit sekali ya....tapi perlu dicoba nih...tipsnya OK...salam sukses
terima kasih komentarnya Mas Aries,
kalo melihat scriptnya, memang kelihatan rumit :)
trus kalo udah disubmit itu hasilnya masuk ke mana mas ?
@hendri : mas hendri bisa lihat pada tag form action="tugasweb1_submit" jika nama file form registrasi ini adalah tugasweb1.html, dan form action diatas adalah tugasweb1_submit.php maka, semua inputan pada form registrasi ini akan di kirim ke "tugasweb1_submit.php" dan file php ini lah yg akan memprosesnya (misal memasukannnya ke database).
Tentunya mas hendri harus membuat satu file lagi(tugasweb1_submit.php) untuk memproses semua inputan.
mudah-mudahan cukup jelas ya mas hendri :)
Posting Komentar