Design a web page...
class Login.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src = "app.js"></script>
<link href = "style.css" rel = "stylesheet">
<title>
Login Page
</title>
</head>
<div align = "center" class = "main">
<div class = "a">
<p class = "a b">
Enter email id
</p>
<p class = "a">
<input class = "f" id = "n1" type ="text" placeholder="Enter Email Id">
</p>
</div>
<div class = "a">
<p class = "a b">
Enter password
</p>
<p class = "a">
<input class = "f" id = "n2" type ="password" placeholder="enter password">
</p>
</div>
<p class = "a c" id = "b" ><a href = "">Forget Password</a></p><br>
<p class = "a"><input class = "f" type = "submit" value = "Login Here" onclick = "show()"></p>
<br>
<p class ="a" id = "b"><a href = "">For new user click here</a></p>
</div>
</html>
class app.js
function show() {
var x = document.getElementById("n1").value;
var y = document.getElementById("n2").value;
if(x==""){
alert("Please enter email id");
n1.focus();
}else if(y==""){
alert("Please enter password");
n2.focus();
}else{
alert("Success...")
}
}
class style.css
body{background-image:url("https://www.insidehighered.com/sites/default/server_files/media/iStock-477979994.jpg");background-size: cover;}
.a{margin:0px;padding:0px;}
#b{margin-top:10px;}
.f{width:200px;height:30px;}
.a.b{width: 200px;text-align: left;}
.a.c{width: 200px;text-align: right;}
.main{margin-top:150px;}
Comments
Post a Comment