Introduction to Forms

So now that you have your own web page, you would like to add some forms to allow people to populate databases, or simply have the form be sent to your email, huh?

In this tutorial we'll show you how to build the form itself, and in future tutorials we will cover databases, scripting languages such as CGI (Common Gateway Interface) & PHP (Hypertext Preprocessor).

We will make a simple form that ask a user for their First Name, Last Name, and Email.

It will look like the form below.

First Name:
Last Name:
Email:

Same form with the borders set to Zero (0) and table background color (orange).

First Name:

Last Name:

Email:

The top form example is shown to display where the different cells are in the table to help you understand the layout when compared to the code.

The second form example (orange) is shown to display a cleaner version without the borders.

View the code below. (Code is with 0 border and orange background)

<table border="0" bgcolor="orange">
<form method=" " action=" ">
<tr>
<td>First Name:
<td>
<input type="text" name="fname" size="20">
<tr>
<td>Last Name:
<td>
<input type="text" name="lname" size="20">
<tr>
<td>
<div align="right">Email:</div>
<td>
<input type="text" name="email" size="20">
<tr>
<td>
<td>
<div align="right">
<input type="reset" value="reset">
<input type="submit" value="submit">
</div>
</form>
</table>

If you have a little experience with HTML, the code should be pretty straight forward.

If you are familiar with table and cell layouts then move on, and the code in between will be reviewed and explained.

The first line:
<table border="0" bgcolor="orange">
just sets up your table. It also sets the borders in the table to be invisible by setting it to 0 (zero). It also sets the background color to 'orange'.

The second line:
<form method=" " action=" ">
lets the page/browser know that you are setting up a form for a user to react with input.
In this case we want a user to send information about themself.
Their are two attributes in the form tag.

They are: METHOD & ACTION

METHOD = this attribute determines how the information will get to where it's going. There are two different methods available. GET and POST. Most likely you will use POST.

ACTION = is used to tell the form where to send the data (URL). Most likely a CGI, or PHP page if you are sending to a database. It reacts to this upon the user clicking on the 'Submit' button.

The code above is blank regarding these attributes. Your line of code would look like:
<form method="POST" action="yourpage.com/submit.php">

Other input types used are buttons and input boxes. As far as input boxes go...there are two types. Single line boxes as well as large text boxes.

Single line boxes are created with: <input type="text" name="fname" size="20">

The first part tells the input type is a simple text box. Then it gives the box the name "fname" (first name), and the size tells how long it is horizontally.

Buttons are added with the code...they are pretty self explanitory.

That is it for your first form tutorial. Future tutorials will be uploaded getting deeper into forms, other types of inputs (radio boxes, textAreas and etc.) as well as database manipulation using forms along with PHP.