Login Form ជាមួយ Javascript

1បង្កើត Login Form ជាមួយ Javascript
1ការប្រើប្រាស់ Javascript ដោយបង្កើតជា Login Form សម្រាប់ផ្ទៀងផ្ទាត់ Username និង Password ជាដើម។
ជាដំបូងសូមលោកអ្នកបង្កើតជា Form មួយដោយប្រើប្រាស់ HTML ដូចជា៖

<form name="fn">
<table>
<tr>
<td colspan="2" align="center"><h1>Login</h1></td>
</tr>
<tr>
<td align="right">Username:</td><td align="left"><input type="text" name="username" /></td>
</tr>
<tr>
<td align="right">Password:</td><td align="left"><input type="password" name="pass" /></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" name="ok" value="OK" onclick="login()" /><input type="reset" name="reset" value="Reset" /></td>
</tr>
</table>
</form>

បន្ទាប់ពីលោកអ្នកបានបង្កើតជា Form Login ហើយ សូមបន្តបន្ថែមកូដ Javascript ដើម្បីផ្ទៀងផ្ទាត់ Username និង Password វិញម្តង៖

<form name="fn">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FormLoign</title>
<style type="text/css">
h1{
color:#00C;
font-weight:bold;
font-size:24px;
}
</style>
<script type="text/javascript">
function load()
{
var f=document.fn;
if(f.username.value=="")
{
alert("Please input username");
f.username.focus();
}
else if(f.pass.value=="")
{
alert("Please input your password");
f.pass.focus();
}
else if(f.username.value=="admin" && f.pass.value!="admin")
{
alert("Your password is incorrect");
}
else if(f.username.value!="admin" && f.pass.value=="admin")
{
alert("Your username is incorrect");
}
else if(f.username.value!="admin" && f.pass.value!="admin")
{
alert("Your username and password are incorrect");
}
else
{
alert("Your login");
}

}
</script>
</head>
//block code for html form
</html>

សូមពិនិត្យមើលកូដពេញលេញនៅខាងក្រោម

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FormLoign</title>
<style type="text/css">
h1{
color:#00C;
font-weight:bold;
font-size:24px;
}
</style>
<script type="text/javascript">
function load()
{
var f=document.fn;
if(f.username.value=="")
{
alert("Please input username");
f.username.focus();
}
else if(f.pass.value=="")
{
alert("Please input your password");
f.pass.focus();
}
else if(f.username.value=="admin" && f.pass.value!="admin")
{
alert("Your password is incorrect");
}
else if(f.username.value!="admin" && f.pass.value=="admin")
{
alert("Your username is incorrect");
}
else if(f.username.value!="admin" && f.pass.value!="admin")
{
alert("Your username and password are incorrect");
}
else
{
alert("Your login");
}

}
</script>
</head>

<body bgcolor="#CCCCCC">
<html>
<center>
<form name="fn">
<table>
<tr>
<td colspan="2" align="center"><h1>Login</h1></td>
</tr>
<tr>
<td align="right">Username:</td><td align="left"><input type="text" name="username" /></td>
</tr>
<tr>
<td align="right">Password:</td><td align="left"><input type="password" name="pass" /></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" name="ok" value="OK" onclick="load()" /><input type="reset" name="reset" value="Reset" /></td>
</tr>
</table>
</form>
</center>
</html>
</body>
</html>

បន្ទាប់ពីវាយកូដបានទាំងអស់នេះហើយ លោកអ្នកនឹងទទួលបាន Form Login ដូចខាងក្រោម
111