ME PEZ - Flying into Formation

Tutorial 2

In tutorial 1, if you took it, you learned that nobody can read your php. In this and the next tutorial, you will learn to use this to your advantage. You will make a simple form for your website. People who visit your website can fill out this form and the input will be mailed to you. Because this will be done in php, you will be able to hide your email address. What's the advantage of this, you ask? Spam robots search the internet for email addresses to spam. If they can't find your email address, they can't use it to spam you.

In this tutorial, you will make the form in HTML. In the next tutorial (tutorial 3), you will do the php portion.

Part I: The HTML

For this simple tutorial, we make the form in HTML. Open notepad or another text editor and make a table. If in notepad, just type your opening and closing 'table' tags

Inside those tags, place 6 sets (one 'opening' and one 'closing' tag) of 'tr' (table row) tags (one for your heading, and five for first name, last name, email, guest comments and submit):

Now inside your opening and closing 'tr' tags, place opening and closing 'td' or 'cell' tags.

That will almost do for the table that holds your form. Later you will add some td tags for your input boxes. But now you can begin to fill in the cells (the area between the td tags). First cell is your heading, so give it heading tags (say h2 tags) and call it "Guest Comment Form."

The design of the table is going to be such that each row will contain two elements: one description and one input text box. The heading will have to span these two elements. So add 'colspan=2' to the td tag of the heading and center it:

Second row of your table will be for 'first name.' You want one side of the row to contain the description, "First Name." The other side of the row will contain the first name input box into which your guests may insert their first names. To do this, you place the words, "First Name," between the second set of 'td' tags. Before the next 'tr' tag, add another set of 'td' tags and place your form input box between those tags. For no reason, I prefer to align my description cells to the 'right' and my input boxes to the 'left.' This is totally unnecessary. So you can ignore these alignments. But to do it this way to practice aligning elements, the code would be:

Continue doing the same for last name and email:

lastname input

And the same for "commments" (make comments a textarea with 4 rows and 50 columns):

Now end the form with a submit and reset button that's centered and spans the two elements:

submit

With that, you're done except that you have to do the beginning of the html page - something like:

document type header, like: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>

If you leave the DOCTYPE out, browsers will still read your code. They will interpret your page like IE - version 3 or Netscape - version 3. If you leave out the head and title as well, your page and your form will still work. Browsers will use your url as a title.

Whether you decide to use a doctype and title or not, you still have to add the beginning of your form - without which your page will not post. So go to the top, or beginning, of your page of code and add the above doctype (or don't). On top of everything, but below your doctype and opening body tag add the following to open and begin your form:

And that's it. Save your form as "comment.html". You may want to upload "comment.html" to your website and view it in your browser just to see how your form will look. But your form should be done. You may want to center the entire table on your screen. To do this, just add 'align="center"' to your opening table tag:

Your final code should look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Guest Comment</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>

<body>

<table bgcolor="#000000" align="center">
<tr><td colspan="2" align="center"><h2><font color="#FFFFFF">Guest Comment</font></h2></td></tr>
<form name="guest_comment_form" action="comment.html" method="post">
<tr><td align="right"><font color="#FFFFFF">First Name</td>
<td align="left"><input type="text" name="firstname" size="25" maxsize="20"> </td></tr><tr>
<td align="right"> <font color="#FFFFFF">Last Name</td>
<td align="left"><input type="text" name="lastname" size="25" maxsize="20"></td></tr>
<tr><td align="right"><font color="#FFFFFF">Email Address</td>
<td align="left"><input type="text" name="email" size="25" maxsize="60""></td></tr>
<tr><td align="right"><font color="#FFFFFF">Comments or Questions</td>
<td align="left"><textarea name="comments" rows="4" cols="40"></textarea></td></tr>
<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Submit!">
<input type="reset" name="Reset" value="Reset"></td>
</tr>
</table>
</form>
</body></html>

In the above code, I have reversed the colors to result in a black background and white text. I have also added a "maxsize" to each input. (You may or may not want to do this.) The resulting form should appear on your web site like this except that your form will be html and, if you wrote it from scratch, your colors will be reversed.

If this tutorial seemed long, remember this is the easy part. This is just the HTML. In the next tutorial, you will add the php.

Flying Into Formation - Part II - pages . . .

1 . . .

2 . . .

3 . . .

4 . . .

5 . . .

6 . . .

7 . . .

Your IP address is: 38.103.63.17

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.