How to create simple HTML Login Page?

In this tutorial we are going to create a simple HTML login page and validate user input with client side JavaScript.

How to create simple HTML Login Page?

Simple HTML Login Page- Create a Simple HTML Login page and validate it with JavaScript

If you are learning HTML form then this can be your first tutorial of making a simple login form and validating it using JavaScript. JavaScript runs in HTML on the web browser at client side. JavaScript is used for client side validation of the form. In this example we have developed a simple login form for beginners. This is beginning tutorial for HTML learners and teaches you to create simple login form in HTML. The login form is further validated with JavaScript. You will  learn How to create a simple HTML login page and validate it with JavaScript.

Our login page displays following component on the page:

1. Input text for entering user  name

2. Input text for entering password

3. Login button to submit form data to the server side program. In this example we are not writing any server side program for validating it with database. If you want to validate the user with database you can write any of the server side programs such as JSP, Servlet or PHP to validate the user against database. In the bottom of this tutorial we will provide you link to learn more about validating the user against database.

Here is screen shot of the login page of our example program:

Here is complete code example of the login form:


<html>
<head>
<title>Login</title>
<script language="">
	function validate(form){
		if(form.username.value.length==0){
			alert("Enter username!");
			form.username.focus();
			return false;
		}

		if(form.userpassword.value.length==0){
			alert("Enter password");
			form.userpassword.focus();
			return false;
		}

		return true;
	}
</script>
</body>
<body>
<h1>Login</h1>
<form method="post" action="login.php" onsubmit="return validate(this)">
<p>User Name: <input type="text" name="username"></p>
<p>Password: <input type="password" name="userpassword"></p>
<p><input type="Submit" value="Login"></p>
</form>
</body>
</html>

You can run this html page in web browser and see the form. You can try the Simple Login form online on our website. If you click on the Login button, the form will be validated with the JavaScript code.

The form validation is happening with JavaScript code. We are calling the JavaScript validation code the onsubmit event of the form. Here is code which calls validate() function:

<form method="post" action="login.php" onsubmit="return validate(this)">

The HTML form element is used to submit the form data to the server side script. In this example it will submit the data to the login.php file if deployed on the PHP enabled Apache server.

Here is the validation error message shown in the Chrome browser:

You fill all the details in the form and then click on the "Login" button as shown below:

The "Login" button is of type "submit" which posts the form data on the server side script.

The <form .> tag is used in HTML page to group the various input fields such as text box, password field, radio button etc. to create complete web forms and then submit all the user input to server side script. The action="login.php" tag is used to specify the name of server side program to handle form post.

Further the posted data can be received by server side script to validate the user against database.

Try Login form: try the Simple Login form online on our website.

Here are the lists of related examples that you can try.