Membuat Login form sederhana

Kali ini saya akan coba sharing tentang cara membuat Login form sederhana tanpa menggunakan database. Form yang akan dibuat terdiri dari userid dan password dan memiliki spesifikasi:
1.Terdapat scripting JavaScript untuk validasi awal (field tidak boleh kosong, masukkan id dan password harus huruf)
2.Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke field pertama (id)
3.Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai field adalah string
4.Jika nilai id dan password sesuai dengan pre-defiined value di variabel

ini adalah potongan script untuk PHPnya
<script language="JavaScript" type="text/javascript">
function cekuser(a)
{
re = /^[A-Za-z]{1,}$/;
return re.test(a);
}
function cekpassword(a)
{
re = /^[A-Za-z]{8,}$/;
return re.test(a);
}
function checkForm(b)
{
if (!cekuser(b.username.value))
{
alert("Isi username dan password dengan benar!!!keduanya harus berupa huruf!! ");
b.username.focus();
return false;
}
if (!cekpassword(b.password.value))
{
alert("Masukkan Password yang benar!! Password minimal terdiri dari 8 huruf!!");
b.password.focus();
return false;
}
return true;
}
</script>

<div id="wrapper">
<div id="opo1">
<form name="form1" action="<?php $_SERVER['PHP_SELF'];?>" method="post" onsubmit="return checkForm(this)">
<div id="Login">Login</div>
<hr align="center"width="370"color="red">
<div id="user">Username<br/> <input type ="text" name ="username" /></div>
<div id="pass">Password<br/> <input type ="text" name ="password" /></div>
<div id="ok"><input type ="submit" value="LOGIN" /></div>
</form>
</div>
<div id="opo2">
<?php
if (is_string($_POST['username'])){
if (($_POST['password']=='teknikum')&&($_POST['username']=='elektroum')){echo 'welcome : ' .$_POST['username'];}
else{echo 'Username dan Password SALAH!!!';}
}
?>
</div>
</div>

dan untuk css-nya:
#wrapper{
margin:auto;
width:750px;
height : 600px;
background: #69e0f5;
}
#opo1{
margin:50px auto;
width:400px;
height : 305px;
background: #b4edf7;
border: 4px solid red;
}
#opo2{
margin:auto;
width:400px;
height : 90px;
font-family: garamond;
font-size: 30px;
color:red;
}
#ok{
margin:30px 60px auto;
}
#Login{
margin: 30px 60px auto;
font-family: arial;
font-size: 45px;
color:blue;
}
#user{
margin: 30px 60px auto;
font-family: timesnewroman;
font-size: 15px;
color:black;

}
#pass{
margin: 20px 60px auto;
font-family: timesnewroman;
font-size: 15px;
color:black;
}