Allowing users to login using HTML and PHP

A form is an area of a web page where your website’s visitors can enter information and submit it. They might fill out a contact form, or use a small form to login to your system. They come in handy and in many cases are a necessity. In this tutorial we will kill two birds with one stone and show you how to make a login form (I promised a login tutorial in a previous tutorial).

First, the basics. There are several different types of fields or tags that are commonly used in a form. One type, which we won’t cover here, is the input tag with a type of file. But you can learn about it here.

• <input>
• <textarea>
• <select>

An input tag can have different types, such as:

• text
• password
• hidden
• file
• submit
• checkbox
• radio

Every form opens and closes with a form tag.

<form>
 
	<!-- the form elements go here -->
 
</form>

We won’t go into detail on each type of form element. Rather we will focus on three types of inputs that we will use in our login example: text, password, and submit.

Start by creating a new file called login.php. Copy and paste the following code inside.

<form action="login.php" method="post">
 
	<label>Username</label>
	<input type="text" name="username" value="" />
 
	<br />
 
	<label>Password</label>
	<input type="password" name="password" value="" />
 
	<br />
 
	<input type="submit" name="submit" value="Login" />
 
</form>

This is our form. It contains a text field a password field and a submit button that, when clicked, sends the data off to be validated. The form tag has two parts: action and method. Our action is the page we want to send the form data to, and the method is our method of sending the information. Sending via the post method “hides” the information, whereas sending via get will pass the data as a querystring, visible in the URL. In this example we use post because we don’t want to show the user’s credentials in the URL.

The next part is to capture the data that has been posted, and then we’ll validate it. Copy and paste the following PHP code above your HTML form. Your file should now look like this:

<?php
 
// Check for user login
if(isset($_POST['submit'])){
 
	// User is attempting login
 
	// Verify the credentials are correct
	if($_POST['username'] == "apple" && $_POST['password'] == "dumpling"){
 
		// The username and password provided are correct!
		echo ("You have logged in successfully!");
		exit;
 
	} else {
 
		echo ("Woops!  You entered the wrong username and password.");
 
	}
 
} 
 
?>
 
<form action="login.php" method="post">
 
	<label>Username</label>
	<input type="text" name="username" value="" />
 
	<br />
 
	<label>Password</label>
	<input type="password" name="password" value="" />
 
	<br />
 
	<input type="submit" name="submit" value="Login" />
 
</form>

Run the page and try it out! Entering anything but a combination of “apple” and “dumpling” will result in failure. But entering that combination correctly will give you a thumbs up.

At this point you might want to store the user’s id in a session, and as the user moves from page to page you can check for the id. If it exists then you know they have logged in and can access secure parts of your site. You can learn about sessions here.