Hello Friends My Name Is Viraj,Today I Will Create Login Page On Your Web Page.Here is an example of html login page code. In this example, we have displayed one text field, Password, Reset button and Login button. We have used Reset button that resets all fields to blank.We have used JavaScript validation in Login page. We have set username and password value.Here is an example of html login page code. In this example, we have displayed one text field, Password, Reset button and Login button. We have used Reset button that resets all fields to blank. We have used JavaScript validation in Login page. We have set username and password value. If a person enter a wrong username or password or both, an error message with "Error: Incorrect Username or Password" will be displayed. Till the person enters the correct username and password, it will not Login.
Once you enter the correct Username and Password, you will be redirected to another page.Login page is used in most of the dynamic website to validate user based on their credentials. For making login page for websites HTML form and HTML elements are used. Text field is used to accept username and password text field is used to accept password from user.The submit button is used for submitting data to server for validation. Its good to validate user input in the browser using JavaScript. In this tutorial we are creating a HTML Login page code and validating user input with JavaScript. In modern web application server-side validation is also very important it is done on server side with the program running on the server.Here In This Html Tutorial We Will Create Login Page In Html Using Html/Css/Javascript.In This Blog I Will Cover All The Topic Related To Html/Css/Javascript Combination In Creating Login Page.
So Let Begin With Our Coding............
Step 1: MainPage.html
<html>
<head>
<h1 align="center">FIOWER GARDEN</h1>
<link rel="stylesheet" type="text/css" href="cssflowergarden.css"/>
</head>
<title>FIRST WEB PAGE</title>
<body bgcolor="yellow">
<div class=b2>
<img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="1300" height="300">
<script language="JavaScript">
function checkLogin(x)
{
if((x.id.value!="sam")||(x.pass.value!="sam123"))
{
alert("invalid login");
return false;
}
else
location="welcome.html"
}
</script>
</head>
<form>
<p align="center">userid:<input type="text" name="id"></p>
<p align="center">password:<input type="password" name="pass"></p>
<p align ="center"><input type="button" value="login"
onclick="checkLogin(this.form)"></p>
</html>
Step 2: welcome.html
<html>
<div class=b1>
<head><h1 align="center">Welcome To Flower Garden</h1></head>
<body>
<link rel="stylesheet" type="text/css" href="cssflowergarden.css"/>
<div class=b2>
<div class=b1>
</body>
</html>
Step 3: cssflowergarden.css
.b1
{
background-color:yellow;
}
.b2
{
background-color:#cccccc;
}
Output :
MainPage.html
welcome.html
Once you enter the correct Username and Password, you will be redirected to another page.Login page is used in most of the dynamic website to validate user based on their credentials. For making login page for websites HTML form and HTML elements are used. Text field is used to accept username and password text field is used to accept password from user.The submit button is used for submitting data to server for validation. Its good to validate user input in the browser using JavaScript. In this tutorial we are creating a HTML Login page code and validating user input with JavaScript. In modern web application server-side validation is also very important it is done on server side with the program running on the server.Here In This Html Tutorial We Will Create Login Page In Html Using Html/Css/Javascript.In This Blog I Will Cover All The Topic Related To Html/Css/Javascript Combination In Creating Login Page.
So Let Begin With Our Coding............
Step 1: MainPage.html
<html>
<head>
<h1 align="center">FIOWER GARDEN</h1>
<link rel="stylesheet" type="text/css" href="cssflowergarden.css"/>
</head>
<title>FIRST WEB PAGE</title>
<body bgcolor="yellow">
<div class=b2>
<img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="1300" height="300">
<script language="JavaScript">
function checkLogin(x)
{
if((x.id.value!="sam")||(x.pass.value!="sam123"))
{
alert("invalid login");
return false;
}
else
location="welcome.html"
}
</script>
</head>
<form>
<p align="center">userid:<input type="text" name="id"></p>
<p align="center">password:<input type="password" name="pass"></p>
<p align ="center"><input type="button" value="login"
onclick="checkLogin(this.form)"></p>
</html>
Step 2: welcome.html
<html>
<div class=b1>
<head><h1 align="center">Welcome To Flower Garden</h1></head>
<body>
<link rel="stylesheet" type="text/css" href="cssflowergarden.css"/>
<div class=b2>
<div class=b1>
</body>
</html>
Step 3: cssflowergarden.css
.b1
{
background-color:yellow;
}
.b2
{
background-color:#cccccc;
}
Output :
MainPage.html
welcome.html
No comments:
Post a Comment