Creating/Processing a Registration Form with HTML/PHP Part 2

Let's add some style...

When we left off, our registration form looked pretty boring, so let's add some CSS to the page to brighten it up.

Creating a Simple Layout

A common web design practice is to create the layout of the page using DIV tags to style the page. For our page, we are going to keep the style simple.

Create open and closed div tags and set the ID="header"
Inside the div tags, create a header with the H1 tag and put a title for your page. I used: Registration Form Tutorial
Create open and closed div tags surrounding the form and set the ID="content"

The code so far ...

Now we need to add CSS to the code. This can be done a couple of different ways. For a website with multiple pages, you are going to want to use an external stylesheet. This way the style of the website stays consistent. For now, since we just have the one page, I put the style in the header section of my web page.

I added a style to the body of the page, where I set margin: 0px; padding: 0px; This allows different elements of the page to scan the entire 100% of the page without creating white space in between the element and the borders of the browser.
I set the style of the h1 tag to use comic sans font, have a 20 px margin to the left and use the color white for the font.
I set the hr to use a dotted line and the color to a pinkish color. I aligned it the the left with a 20px margin to the left (making it even with the header).
I set the header to span the entire width of the page and take up 50 px in height. I also set the background of the header to a sky blue color.
I set the main content to a peach color with a left margin of 50 px. I set the main content width to 800px with a height of 100%
I set the form element of the page to be only 600px in width and have a height of 90%. I set the background color of the form to a yellow page and the padding to 10px.
I set the h2 tag in the form to have the same font as the h1 and indent 20px from the left.
Finally, I set the form button to indent 150px so that it was more over to the left than the rest of the form.

Copy the code

The entire page thus far...

<html>
<head>
	<title>Form Tutorial</title>
<style>
	body {
		margin: 0px;
		padding: 0px;
	}
	h1 {
		color: white;
		margin-left: 20px;
		font-family: "Comic Sans MS", cursive, sans-serif;
	}
	hr { 
		height: 0; 
		border-style: dotted; 
		border-width: 2px 0 0 0; 
		border-color: #EB464B; 
		width: 50%; 
		text-align: left; 
		margin-left: 20px;
		}
	#header {
		width: 100%;
		height: 50px;
		background-color: #82A9FF;
	}
	#content {
		background-color: #FFE5C2;
		margin-left: 50px;
		width: 800px;
		height: 100%;
	}
	#content form {
		margin-left: 90;
		padding: 10px;
		background-color: #EFFA71;
		width: 600px;
		height: 90%;
	}
	#content form h2{
		margin-left: 20px;
		font-family: "Comic Sans MS", cursive, sans-serif;
	}
	#submit_button{
		margin-left: 150px;
	}
</style>
</head>

<body>
<div id="header">
	<h1>Registration Form Tutorial</h1>
</div>
	<div id="content">
		<form method="POST" action="Process_form.php">
		<h2>Site Registration</h2>
		<hr align="left" /><br />
		     <b>Username:</b> <input type="text" name="username" /><br />
		     <b>Password:</b>  <input type="password" name="password" /><br /><br />
		     <b>How do you get around?</b><br />
		     <select name="transportation">
		     	<option value="car">Car</option>
		     	<option value="bike">Bike</option>
		     	<option value="foot">Foot</option>
		     	<option value="broomstick">Broomstick</option>
		     </select><br /><br />
		     <input id ="submit_button" type="submit" name="submit_form" value="Join My Site" />
		</form>
	</div>
</body>
</html>

And here's what it looks like...

Working with the Database

In this example, I am using a MySql Database. I am giving the example of the SQL query to create the table. If you have access to something like PHP myAdmin, you can take advantage of the graphical interface to create your tables. If you would like, you can also copy and paste the provided code from this example into the SQL tab.

Creating a table to store user information:

Based on our registration form, we need a table to store each piece of information in the form.

Username: This is a text field. Set the max number of characters to 50. This field should not be NULL. This field should be UNIQUE.
Password: This is a text field. Set the max number of characters to 20. This field should not be NULL. Note: In a real application, it is best practice to encrypt user's passwords.
Transportation: This is a text field. Set the max number of characters to 20. This field should not be NULL.
Since the username should always be unique, we can use this as a primary key, but I usually like to have an id field that I auto-increment for each new user. I call this field UID (user Id). Note: A Primary Key is also UNIQUE so there is no need to specify both. Only a Primary Key can be auto-incremented.

The SQL Code:

CREATE TABLE users (uid INT NOT NULL AUTO_INCREMENT, username CHAR(50) NOT NULL UNIQUE, password CHAR(20) NOT NULL, tansportation CHAR(20) NOT NULL, PRIMARY KEY (uid));

Back to the Form...

Now we are going to write the PHP code. What we want it to do is every time a user signs up, we want to INSERT a new record into our users table.

Before you can insert data into the database, you need to make sure that you connect to the database (I usually put the database connection in an init.php file which I include in every page).
Since we set the method="POST" in our form, we get the values of the php variables by $_POST['element_name_in_form']
I did very VERY basic error checking on the form to make sure that the user entered data and that the password was 6 or more characters in length.
Finally, I stored the SQL query in a php variable named: $sql. To run a query, you can use mysql_query($sql) where $sql is the variable containing the query.

The Code... Below you can copy and paste the code for the process_form.php file. You will need to change the database username and password to your own as well as the name of the database that you will be using.

It is important that you do more error checking on your form, but this is a basic layout of how to create a registration form. For the next tutorial, we will use PHP sessions to allow a user to log into the account and customize the home page depending on the user's mode of transportation.

Design My Mall

Search This Blog

Creating/Processing a Registration Form with HTML/PHP Part 2

Comments

Post a Comment