How to Create a Simple HTML/PHP Form
Posted by on March 14th, 2012

A little about PHP

PHP is a fairly simple language to get to grips with. It’s a loosely-typed, server side language, and is a perfect choice for building web applications. PHP provides many useful tools for creating dynamic HTML and has a built in MySQL library, which is why it’s predominantly used in conjunction with MySQL databases.

As I said, PHP is loosely-typed, and for some programmers who are more familiar with strongly-typed languages this is usually the first hurdle. Loose-typing generally means that a variable isn’t confined to a particular type. For example, PHP doesn’t require that you specify a “type” when defining variables, and will allow you to populate a variable with a String or an Integer value without throwing an error; whereas strongly-typed languages, such as VB.NET, force you to define variable types before populating them, and if the compiler notices that you’ve populated a variable that has been defined as an Integer, with a String, you can be sure that you’ll be told about it.

Of course, there are pros and cons to using a loosely-typed language. I won’t go into them all, but one of my personal dislikes of loose-typing is that you can call a variable into existence at any time you like, without worrying about its intended use and what data it should be filled with, and although that sounds quite handy, and it can be, it often leads to messy and complicated code.

Building a Simple Form

In this tutorial I’ll demonstrate how to build a simple login box using PHP combined with a HTML form. Usually you would verify a user-entered username and password against a database entry to confirm their validity, but for the purpose of this tutorial, and to keep it as a simple introduction into PHP, I’ll use hard-coded values. Once you’ve completed the tutorial you will hopefully see that adding MySQL integration only requires a couple of additional steps.

PHP requires certain pre-requisites to be installed before you can run any code. In this tutorial I will assume that these have been installed. For those of you who require instructions on preparing your environment for PHP you can find them here: http://uk3.php.net/manual/en/tutorial.requirements.php

Let’s Get Started

First you need to create a new web page, so create a new page in whichever platform you happen to prefer (I’m currently using Aptana for Mac), and call it “login.php”. It’s important to name the file with a “php” extension, as the PHP code won’t fire if it’s in a file without that extension.

Let’s start by setting out a basic form with two input boxes for the username and password, and a “submit” button:
{code type=codetype}

<form method=”POST” >

Username : <input name=”tbUsername” type=”text”  /><br>

Password : <input name=”tbPassword” type=”password”  /><br><br>

<input type=”submit” name=”bLogin” value=”Login” />

</form>
{/code}

So in the above HTML we’ve defined an input box for the username, named tbUsername, and password, named tbPassword, below both of which is a button named bLogin which will submit our form data.

Clicking on bLogin will call a post back of the page, but as there’s no code behind it nothing will happen yet. So now we need to add our PHP code, which will check the user-entered username and password against our hard-coded values, and displays a “Login Successful” message if they match, and “Invalid Username and/or Password” message if they don’t.

Adding the PHP Code

All PHP code must be predicated with

So our PHP code will look like this:
{code type=codetype}
<!–?php
if(isset($_POST['bLogin'])){
$username = $_POST['tbUsername'];
$password = $_POST['tbPassword'];

if($username == “Smashious” && $password == “12345″){
echo ”

Login Successful

“;
}else{
echo ”

Username and/or Password Incorrect

“;
}
}
?>
{/code}
Let’s break the code down a bit.

A handy way of capturing a button click in PHP is to check whether the “post” data contains any information specific to that button, bLogin in our case. A quick way of doing this is to use the isset function on $_POST['bLogin'], which will be set if that button was clicked. And so if isset($_POST['bLogin']) returns true then our button was clicked.

We then need to get the user-entered values from our username and password boxes, tbUsername and tbPassword respectively. To do this simply grab them from the post as we did for bLogin. Hopefully you’ll notice in the above code that I’ve passed these values into variables before using them further in the code, you don’t have to do this but I personally find that the resultant code looks neater. You should also notice the quirk of loosely-typed PHP that I mentioned earlier, in that to create my variables I didn’t have to declare them with types before hand, I can simply conjure them from a hat and populate them straight away, as follows:
{code type=codetype}
$username = $_POST['tbUsername'];
$password = $_POST['tbPassword'];
{/code}
That’s pretty much it. All we need now is a simple IF statement to check the values against our hard-coded values (for which I’ve used Smashious as the username, and 12345 as the password), then send a message back to the client with the relevant message. To send a message back to the client, PHP provides the echo function, which adds anything encapsulated in the quotation marks to the page’s HTML, and so in using echo we can dynamically create HTML and show it to the screen. The below code checks that the username equals Smashious and the password equals 12345, if it does then it returns “Login Successful”, and if not it returns “Username and/or Password Incorrect”.
{code type=codetype}
If($username == “Smashious” && $password == “12345″){
echo ”

Login Successful

“;
}else{
echo ”

Username and/or Password Incorrect

“;
}
{/code}
It wouldn’t take too much effort to expand on this tutorial and include functionality to check the username and password against a MySQL data table, which could then support multiple user accounts, but for now, and for the purpose of keeping it simple, the values are hard-coded. Here’s the complete code for login.php:

{code type=codetype}

<html>
<head>
<title>Login</title>
</head>
<body>

<form method=”POST” >
Username : <input name=”tbUsername” type=”text” /><br>
Password : <input name=”tbPassword” type=”password” /><br><br>
<input type=”submit” name=”bLogin” value=”Login” />
</form>

<?php
if(isset($_POST['bLogin'])){
$username = $_POST['tbUsername'];
$password = $_POST['tbPassword'];

if($username == “Smashious” && $password == “12345″){
echo “<div>Login Successful</div>”;
}else{
echo “<div>Username and/or Password Incorrect</div>”;
}
}
?>

</body>

</html>

{/code}

Written by:
I'm a developer / designer and creator of Pina Koala, the fun and addictive cocktail collecting game for iPhone. Visit my website, or download it from the App Store.