HTML Forms

Forms Template Demo

The HTML form below is active. Take it for a test drive then copy and paste the codes for the form and processing scripts.

We recommend the use of a localhost server for testing on your PC.

HTML Forms and CGI

HTML forms are used in the development of interactive website design. Information is entered in text boxes. The Submit button (Next) is pressed and a CGI script processes the data.

Forms can be built using HTML , PERL and PHP. At the present time most CGI scripts are written in PHP. Once the script is built it can be uploaded to your web space for testing.

A better way to test forms and CGI scripts is to set up a localhost server on your PC. The most popular server for this task is the Apache Server.

HTMLPad 2014 a Must Have for Writing Scripts

HTMLPad 2014 If you get tired of creating forms and the scripts to process them, uploading them to your server only to find they don't work, making changes and re-uploading until you finally get it right, THERE'S A BETTER WAY!!

Set up the localhost server mentioned above and get a copy of HTMLPad 2014. It only takes a few seconds to set it up to work with your localhost.

Create and debug your forms and scripts before you upload them.
See my tutorial on Setting up a localhost and HTMLPad 2014

 Name
 First:  Last: 

 Address
 Street:   City: 

 Zipcode:  Select State:
 (5 digits)

 Home Phone:  Work Phone: 
 (Numbers only no dashes)

HTML Code

Copy the HTML code into a new HTML 5 web page and save it in the htdocs folder of your Apache server.

Save the page as: form.html


<form method="POST" action="parse_form.php" style="box-shadow: 5px 5px 8px #010101">
<pre>
 Name
 First: <input type="text" name="firstname" size="20" required="required"> Last: <input type="text" name="lastname" size="20" required="required">

 Address
 Street:  <input type="text" name="street" size="30" required="required"> City: <input type="text" name="city" size="20" required="required">

 Zipcode: <input type="text" name="zip" size="5" required="required"> Select State:<select name="state">
<option>AL</option>
<option>AK</option>
<option>AZ</option>
<option>AR</option>
<option>CA</option>
<option>CO</option>
<option>CT</option>
<option>DE</option>
<option>DC</option>
<option>FL</option>
<option>GA</option>
<option>ID</option>
<option>IL</option>
<option>IN</option>
<option>IA</option>
<option>KS</option>
<option>KY</option>
<option>LA</option>
<option>ME</option>
<option>MD</option>
<option>MA</option>
<option>MI</option>
<option>MN</option>
<option>MS</option>
<option>MO</option>
<option>MT</option>
<option>NE</option>
<option>NV</option>
<option>NH</option>
<option>NJ</option>
<option>NM</option>
<option>NY</option>
<option>NC</option>
<option>ND</option>
<option>OH</option>
<option>OK</option>
<option>OR</option>
<option>PA</option>
<option>RI</option>
<option>SC</option>
<option>SD</option>
<option>TN</option>
<option>TX</option>
<option>UT</option>
<option>VT</option>
<option>VA</option>
<option>WA</option>
<option>WV</option>
<option>WI</option>
<option>WY</option>
</select>
 (5 digits)

 Home Phone: <input type="text" name="hphone" size="20" required="required"> Work Phone: <input type="text" name="wphone" size="20" required="required">
 (Numbers only no dashes)
 <input type="submit" value="Submit"><input type="reset">
</pre>
</form>

How easy is PHP?

The data gathered from forms can be printed to the screen, emailed and saved in text files.

The first script below would collect the data entered into the form, display it in a table, email it to you and then print a message on the screen with a link to a designated location.

Parse the form

Copy the code below into a new page and save it as parse_form.php
save it in the htdocs folder of your Apache server.

<?php
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$street=$_POST['street'];
$city=$_POST['city'];
$zip=$_POST['zip'];
$state=$_POST['state'];
$hphone=$_POST['hphone'];
$wphone=$_POST['wphone'];
?>
<table width="250" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>
<?php
print "First Name:";
?>
</td>
<td>
<?php
print  "$firstname";
?>
</td>
</tr>
<tr>
<td>
<?php
print "Last Name:";
?>
</td>
<td>
<?php
print " $lastname";
?>
</td>
</tr>
<tr>
<td>
<?php
print "Street:";
?>
</td>
<td>
<?php
print "$street";
?>
</td>
</tr>
<tr>
<td>
<?php
print "City:";
?>
</td>
<td>
<?php
print "$city";
?>
</td>
</tr>
<tr>
<td>
<?php
print "State";
?>
</td>
<td>
<?php
print "$state";
?>
</td>
</tr>
<tr>
<td>
<?php
print "Zip:";
?>
</td>
<td>
<?php
print "$zip";
?>
</td>
</tr>
<tr>
<td>
<?php
print "Home Phone:";
?>
</td>
<td>
<?php
print "$hphone";
?>
</td>
</tr>
<tr>
<td>
<?php
print "Work Phone:";
?>
</td>
<td>
<?php
print "$wphone";
?>
</td>
</tr>

</table>

<?php
$msg = "First Name: $firstname
Last Name: $lastname 
Street: $street 
City: $city  
State: $state 
Zip: $zip 
Work Ph: $wphone 
Home Ph: $hphone\n\n";

$recipient = "email address you are sending to";

$subject = "Personal Information Form";

$mailheaders = "From: one of your existing pop email adresses\n \n";

mail($recipient, $subject, $msg, $mailheaders);

PRINT "Thanks for trying our resources. <a href=form.html>Return to form.</a>";

?>

To use this script change the strings in the first line to match those on your input form.

Plug in your email adresses

Save the script with a php extension.

Upload the form and script to your server and set file permissions to 755(CHMOD).

Note: PHP scripts are not placed in your cgi-bin folder. Place them in the same folder as your forms.

Save to a File

The PHP script below will save the contents of the form in a file named practiceFile.txt, thank the visitor and provide a link back to the form after processing. Any future entries will be appended to the bottom of the file.

Copy the code below into a new page and save it as save_file.php
Save it in the htdocs folder of your Apache server.

Change the action= statement in the HTML form to action="save_file.php" and test the form on your localhost.(Apache server)

<?php
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$street=$_POST['street'];
$city=$_POST['city'];
$zip=$_POST['zip'];
$state=$_POST['state'];
$hphone=$_POST['hphone'];
$wphone=$_POST['wphone'];


$myFile = "practiceFile.txt";
$fh = fopen($myFile, 'a') or die("can't open file");
$stringData = $firstname;
fwrite($fh, $stringData);
$stringData = "\n";
fwrite($fh, $stringData);
$stringData = $lastname;
fwrite($fh, $stringData);

$stringData = "\n";
fwrite($fh, $stringData);

$stringData = $street;
fwrite($fh, $stringData);
$stringData = "\n";
fwrite($fh, $stringData);
$stringData = $city;
fwrite($fh, $stringData);

$stringData = "\n";
fwrite($fh, $stringData);

$stringData = $zip;
fwrite($fh, $stringData);
$stringData = "\n";
fwrite($fh, $stringData);
$stringData = $state;
fwrite($fh, $stringData);
$stringData = "\n";
fwrite($fh, $stringData);

$stringData = $hphone;
fwrite($fh, $stringData);
$stringData = "\n";
fwrite($fh, $stringData);
$stringData = $wphone;
fwrite($fh, $stringData);
$stringData = "\n";
fwrite($fh, $stringData);
fclose($fh);

?>


<html>

<body>

<p>Thanks Much!!</p>

<p><a href=form.html>Back to Form</a>

</body>

</html>