Facebook style Login Page in HTML and CSS along with JavaScript Validations
<!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=iso-8859-1" />
<title>Facebook</title>
<link href="value.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ECECFF">
<div style="background-color:#3B5998;height:95px;width:100%">
<img style="height:90px;margin-left:150px" src="C:\Users\sandy\Desktop\images.jpg" />
<div style="float:right;padding:16px;">
<table>
<tr>
<td><font style="font-weight:900;font-size:16px;padding:20px" color="#FFFFFF">username</font></td>
<td><font style="font-weight:900;font-size:16px;padding:20px;padding-bottom:10px" color="#FFFFFF">password</font></td></tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="password" name="t2" /></td>
<td><input type="button" name="a" value="login" /></td></tr>
<td><input type="checkbox" name="s" value="remember the password" /><font color="#BFBFFF">remember password</font></td>
<td><input type="checkbox" name="s" value="forgot your password?" /><font color="#BFBFFF">forgot password?</font></td>
</tr>
</table>
</div>
</div>
<div style="float:left;margin-left:10px">
<div style="background:#ECECFF;height:500px;width:600px">
<h1 style="padding-top:30px;text-align:center">Your Facebook Timeline</h1>
<h3 style="text-align:center"><font color="#5E5EFF">Tell Your Life story witha a new kind of profile.</font><font color="#0033FF">Learn More</font></h3>
<img src="C:\Users\sandy\Desktop\facebook.jpg" align="middle" style="border:double;color:#FFFFFF" />
</div>
</div>
<div style="float:right;margin-left:5%;padding-bottom:100px">
<div style="height:500px;width:600px;background-color:#ECECFF">
<h3 style="float:left"><font color="#333333">Sign Up</font></h3><br /><br />
<p style="margin-left:2px;text-decoration:underline">It's a free and always will be.</p>
<form action="reg.php" name="f" method="post">
<script language="javascript">
function valid()
{
if(f.t1.value=="")
{
alert("Enter the Firstname");
return;
}
if(f.t2.value=="")
{
alert("Enter the Lastname");
return;
}
var h=f.t3.value;
var s=h.indexOf("@");
//var s=h.indexOf(".");
if(s<0)
{
alert("not a valid E mail");
return;
}
var s=h.indexOf(".");
if(s<0)
{
alert("not a valid E mail");
return;
}
if(f.t3.value=="")
{
alert("Enter the Email");
return;
}
if(f.t4.value=="")
{
alert("Enter the confirm Email");
return;
}
if(f.t3.value!==f.t4.value)
{
alert("Email doesn't match");
return;
}
}
</script>
<table>
<tr>
<td> First Name:</td>
<td><input style="height:30px;width:300px" type="text" name="t1" value="enter the name" onfocus="this.value=''" /></td>
</tr>
<tr>
<td> Last Name:</td>
<td><input style="height:30px;width:300px" type="text" name="t2" /></td>
</tr>
<tr>
<td> Your Email:</td>
<td><input style="height:30px;width:300px" type="text" name="t3" /></td>
</tr>
<tr>
<td>Re-enter Email:</td>
<td><input style="height:30px;width:300px" type="text" name="t4" /></td>
</tr>
<tr>
<td>NewPassword:</td>
<td><input style="height:30px;width:300px" type="password" name="t5" /></td>
</tr>
<tr>
<td> I am:</td>
<td><select style="height:30px;width:120px" name="s1" >
<option>Select Sex:</option>
<option>Male</option>
<option>Female</option>
</select>
</td>
</tr>
<tr>
<td> Birthday:</td>
<td><select style="height:30px;width:70px" name="s2" >
<option>Month:</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
</select>
<select style="height:30px;width:50px;size:1" name="s2">
<option>Day:</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select style="height:30px;width:70px;size:1" name="s2">
<option>Year:</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
</select>
</td>
<tr>
<td>
</td>
<td><a href="#"><font color="#8080FF">Why do i need to provide my birtyhday?</font></a></td>
</tr>
<tr>
<td></td>
<td><font size="3px">By clicking Sign Up, you agree to our Terms and that you have read and understand our Data Use Policy, including our Cookie Use.</font></td>
</tr>
<tr>
<td></td>
<td><input style="background-color:#00AA55;width:100px;height:30px;border:thick;text-align:center" type="button" onclick="valid()" name="t7" value="Sign Up" /></td>
</tr>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
No comments:
Post a Comment