FORM LOGIN DENGAN JAVA SCRIP

hai, guyss..
ketemu lagi sama aq, lagi2 kali ini kita harus belajar dengan html lagi. moga gak bosen daHh..
untuk pertemuan ini saya akan memberikan contoh aplikasi sederhana penggunaan konsep JacaScript dalam mendisain sebuah form Login yg biasa digunakan dalam sebuah jejaring atau hal lainnya, nah yg ini lumayan rumit juga sih guys, saya juga akan enggunakan konsep dari CSS untuk membangun sebuah halaman WEB nya, mogha kalian gak bingung daHh.. hehe
kali ini postingan Q di suport by :


untuk yg pertama
Kita mulai daHh dengan membangun konsep halaman nya terlebih dahulu menggunakan konsep CSS seperti yg dulu sudah pernah kita pelajai di postingan saya sebelumnya, simak script berikut guySs..
file ini aku kasih nama " kode css.css "

#wrapped {
width : 70%;
margin : auto;
}

#border {
height : 100px;
background : pink;
}

#borderkanan{
float : right;
height : auto;
width : 40%;
}

#middle {
height : 525px;
background-image : url("middle2.jpg");
}

#kolomkiri{
float : left;
height : auto;
width : 60%;
background-image : url();
}

#kolomkanan{
float : right;
height : auto;
width : 40%;
}

.mlebu {
background : transparent url("p.jpg") no-repeat bottom left;
display : block;
float : left;
width : 60px;
height : 24px;
font : tahoma 14px;
text-decoration : none;
color : white;
}
.mlebuok{
overflow : hidden;
width: 100%;
}

.daftar {
background : transparent url("daftar.jpg") no-repeat right;
display : block;
float : left;
width : 150px;
height : 30px;
font : tahoma 14px;
padding : 10px 0px 0px 0px;
text-decoration : none;
}

.tulisan{
    font-family: tahoma;
    font-size: 14px;
    text-align: left;
    color: white;
    border: 0px;
}

.kata{
    font-family: tahoma;
    font-size: 26px;
    text-align: left;
    color: #5d3c1c;
    border: 0px;
}

.tulisan2{
    font-family: tahoma;
    font-size: 13px;
    text-align: left;
    color: #5d3c1c;
    border: 0px;
}

.tulisan3{
    font-family: tahoma;
    font-size: 16px;
    text-align: left;
    color: #5d3c1c;
    border: 0px;
}

.kopi {
font-family: tahoma;
    font-size: 13px;
    text-align: left;
    color: gray;
}

.bahasa {
display : block;
color : #5d3c1c;
text-decoration : none;
overflow : hidden;
}

#footer {
clear : both;
background : white;
height : 75px;
}



NaHh, kemudian untuk memanggilnya di html kalian bisa mengetikan script berikut guySs, tentunya ini udah termasuk script javascriptnya guySs.. so kalian tinggal simak lagi script mumet di bawah ini, hehe
file ini aq kasih nama " www.pesbuk.kom.html"

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional.dtd">
<html xlmns="htt<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<HEAD>
<TITLE>Welome to Komunitas Balita</TITLE>
<link rel="ICON" href="ym.ico" />
<script language="JavaScript"type="text/javascript" src="uts.js"></script>
<link rel="stylesheet" href="kode css.css" type="text/css" />
</HEAD>
<BODY>
<div id="border">
<div id="wrapped">
<div class="tulisan">
<br>
<img src="bayi.jpg" height="85" width="200">
<div id="borderkanan">
<table border=0 align="right" cellspacing=0 cellpadding=2>
<tr>
<td>Email</td>
<td width=10 ></td>
<td>Kata Sandi</td>
</tr>
<tr>
<td><form><input type="email" name="email" size="25" /></form></td>
<td></td>
<td><form><input type="password" name="pwd" size="25"  /></form></td>
<td width=3></td>
<td><div class="mlebuok" align="center">
<a class="mlebu" href="http://www.facebook.com">
<span>Masuk</span></a></div>
</td>
</tr>
<tr>
<td><input type="checkbox" />stay in page</td>
<td></td>
<td>Lupa kata sandi ? </td>
</tr>
</table></div>
</div></div>
</div></div>
<div id="middle">
<div id="wrapped">
<div id="kolomkiri">
<div class="kata">
<br>
Daftarkan Balita Anda<br>
Dalam Komunitas Balita Indonesia<br>
Sebagai Simbol Putra Bangsa
<br><br>
<div align="left">
<img src="indonesia.png" height="200" >
</div>
</div>
</div>
<div id="kolomkanan">
<div class="tulisan3">
<br><br>

<font size="3"><b><h2> ::Registrasi:: </h2></b></font><br>
<form name="calc" action="#">
<font size="4"> Gratis, sampai kapan pun.</font>
<Table Border=0 cellspacing=10 align="right">
<tr>
<td colspan=2 style="border-bottom:#5d3c1c solid thin"></td>
</tr>
<tr>
<td align="right">First Name:</td>
<td><input type="text" size="25" name="inputan1">
</tr>
<tr>
<td align="right">Last Name:</td>
<td><input type="text" size="25" name="inputan2">
</tr>
<tr>
<td align="right">User Name :</td>
<td><form><input type="text" size="25" name="inputan3">
</tr>
<tr>
<td align="right">Email :</td>
<td><form><input type="text" size="25" name="inputan4">
</tr>
<tr>
<td align="right">Password:</td>
<td><form><input type="text" size="25" name="inputan4"></td>
</tr>
<tr>
<td align="right">ReType Password:</td>
<td><form><input type="text" size="25" name="inputan5"></form></td>
</tr>

<tr>
<td align="right">Gender:</td>
<td><select><option value="-1">Jenis Kelamin:</option>
<option>Male</option>
<option>Female</option>
</select>
</tr>

<tr>
<td></td>
<td><div class="mlebuok" align="center">
<br><br>
<font color="white"></font>
<input type="submit" value="Process" onClick = "cekSubmit(this.form)"><br>
</form>

</tr>
<tr>
<td colspan=2 style="border-bottom:#5d3c1c solid thin"></td>
</tr>
<td colspan=2 align="center">
<b>Category Balita</b> <font color=#464646>cute, lucu, dan familiar.</font>
</td>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapped">
<div class="tulisan2">
<table width=100% border=0 align="left">
<tr>
<td><a class="bahasa" href="http://www.indonesia.com">Bahasa Indonesia</a></td>
<td><a class="bahasa" href="http://www.sunda.com">Bahasa Sunda</a></td></td>
<td><a class="bahasa" href="http://www.bali.com">Bahasa Bali</a></td>
<td><a class="bahasa" href="http://www.bahasatubuh.com">Bahasa Tubuh</a></td></td>
<td><a class="bahasa" href="http://www.melayu.com">Bahasa Melayu</a></td>
<td><a class="bahasa" href="http://www.next.com">>></a></td>
<td width=500px></td>
</tr>
<tr>
<td colspan=8 style="border-bottom:#5d3c1c solid thin"></td>
</tr>
</table><br>
<table border=0 cellspacing=1 cellpadding=2>
<tr>
<td width="155px"><a class="kopi">Balita Indonesia &copy; Copyright 2011</a></td>
<td width=""><a class="bahasa" href="http://www.aksarajawa.com">Indonesia</a></td>
<td width="299px"></td>
<td><a class="bahasa" href="http://www.seluler.com">Seluler</a></td>
<td><a class="bahasa" href="http://www.cariteman.com">Cari Teman</a></td>
<td><a class="bahasa" href="http://www.lencana.com">Lencana</a></td>
<td><a class="bahasa" href="http://www.orang.com">Orang</a></td>
<td><a class="bahasa" href="http://www.halaman.com">Halaman</a></td>
<td><a class="bahasa" href="http://www.tentang.com">Tentang</a></td>
<td><a class="bahasa" href="http://www.iklan.com">Iklan</a></td>
<td><a class="bahasa" href="http://www.foto.com">foto</a></td>
<td><a class="bahasa" href="http://www.karier.com">Karier</a></td>
<td><a class="bahasa" href="http://www.privasi.com">Privasi</a></td>
<td><a class="bahasa" href="http://www.ketentuan.com">Ketentuan</a></td>
<td><a class="bahasa" href="http://www.bantuan.com">Bantuan</a></td>
</tr>
</table>
</div>
</div>
</div>
</BODY>
</HTML>

NaHhh, untuk tampilan nya jadi form kayak gini ni gaNn..


naHh, selesai daHh,,
jika masih bantyak kekurangan wajar gann, karena aq ndiri juga lagi coba2 aja ini, hehe..
so,
masih butuh banyak saran dari master master web. hehe
di tunggu daHh info nya..

0 komentar:

Posting Komentar

Jangan Pernah Kita Usul Jika Asal, Dan Jika Mau Usul Lebih Baik Jangan Pernah Asal...

andibayu. Diberdayakan oleh Blogger.

PEMBELAJARAN BERBASIS ONLINE