Create a PHP form made to order using this tutorial!

RSS Newsfeed
for your site

DW News
Calendar
DW Forum

Right click on button and copy shortcut

Reminder

Remember to book mark this site!

Creating a PHP form

PHP is a great processor of forms, hence knowing how to write a simple form for php processing is the precursor to make the PHP work.

This tutorial is to help out those following the book PHP and mySQL in web development.

1. Open a new Notepad document. Click file=>save and save this as an html doc on your desktop, with all files showing in the save as type.

2. When writing an html document, we start with the opening and closing of the html. Type the following in your html:

<HTML>

</HTML>

3. The next step is to define the head and body of the html. The head is where the title goes and the body is where the contents of the page goes that you see. The head ends prior to the start of the body. You should add these to your document so it looks like this:

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

4. The next step is to realize what you need to recreate this form. Once we decide what we need, we will have to design our page in a way that html can support the layout.

You will notice that the order form has exceptional large text on top, followed by a reduced, yet still large font below. The first line is a header at the largest setting, H1. The second line is 1 unit smaller then the top header, and still is a header, H2. You can add these to your document by typing them in the body, with the paired header tags surrounding the text. The document grows to this:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Bob's Auto Parts</H1>
<H2>Order Form</H2>
</BODY>
</HTML>

5. The list of items and quantity appears in columns. there appears to be 4 lines of data. 2 columns, 4 rows: this looks like a table. A table will be very beneficial to line up data.

The table will appear right under the second header but above the end of the body. We start with the <table></table> tag.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Bob's Auto Parts</H1>
<H2>Order Form</H2>
<TABLE>
</TABLE>
</BODY>
</HTML>

6. The Table consists of rows first, so we can set up the rows. Each row is designated with a paired tablerow tag, <TR></TR>. We can not insert the four rows within our pair of table tags.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Bob's Auto Parts</H1>
<H2>Order Form</H2>
<TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

7. Within each row is two columns. In HTML we call the cells that occur in a row Table Data Cells. Since there are two in each row, we can insert two pairs of tags between each <TR> and </TR>.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Bob's Auto Parts</H1>
<H2>Order Form</H2>
<TABLE>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

8. In the first row we have the name Items in the left cell and Quantity in the right cell.We should type that between the pair of tags in the first row

<TD>Item</TD>
<TD>Quantity</TD>

9. The first row of cells are colored Gray. The Hex value for light gray is #CCCCCC. We can set the colors for these cells using the background color attribute of the datacell, bgcolor="#CCCCCC", or as follows:

<TD BGCOLOR="#CCCCCC">Item</TD>
<TD BGCOLOR="#CCCCCC">Quantity</TD>

10. The items in the first column in rows 2, 3, and 4 are tires, oil and spark plugs. You need to add them to the first data cell of each row respectively.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Bob's Auto Parts</H1>
<H2>Order Form</H2>
<TABLE>
<TR>
<TD BGCOLOR="#CCCCCC">Item</TD>
<TD BGCOLOR="#CCCCCC">Quantity</TD>
</TR>
<TR>
<TD>Tires</TD>
<TD></TD>
</TR>
<TR>
<TD>Oil</TD>
<TD></TD>
</TR>
<TR>
<TD>Spark Plugs</TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

11. It is time to add the form components. We will make the entire table the form. To do this, we add the <form> tag above the table tag, and the </form> after the table. The opening form tag should specify a URL as an action which in this case will call up a php script and a method, which can be get or post. (action="processorder.php" method=post)

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Bob's Auto Parts</H1>
<H2>Order Form</H2>
<FORM action="processorder.php" method=post>
<TABLE>
<TR>
<TD BGCOLOR="#CCCCCC">Item</TD>
<TD BGCOLOR="#CCCCCC">Quantity</TD>
</TR>
<TR>
<TD>Tires</TD>
<TD></TD>
</TR>
<TR>
<TD>Oil</TD>
<TD></TD>
</TR>
<TR>
<TD>Spark Plugs</TD>
<TD></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

12. We need 3 simple text input boxes in our form, one for tires, one for oil, and one for spark plugs. The tag <input> the attributes for this tag should include the type, type="text"; name of the variable (must be one word, no spaces>, name="tireqty"; width of box, size=3; Total length of allowable entries, maxlength=3. This will be added to each of the cells that following the items, with the variables changing based on the items.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Bob's Auto Parts</H1>
<H2>Order Form</H2>
<FORM action="processorder.php" method=post>
<TABLE>
<TR>
<TD BGCOLOR="#CCCCCC">Item</TD>
<TD BGCOLOR="#CCCCCC">Quantity</TD>
</TR>
<TR>
<TD>Tires</TD>
<TD><INPUT type="text" name="tireqty" size=3 maxlength=3></TD>
</TR>
<TR>
<TD>Oil</TD>
<TD><INPUT type="text" name="oilqty" size=3 maxlength=3></TD>
</TR>
<TR>
<TD>Spark Plugs</TD>
<TD><INPUT type="text" name="sparkplugqty" size=3 maxlength=3></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

The resulting form html will look like this: