Create a Free Website

HTML Code Tutorial


Basic HTML Forms

HTML Forms can be a little difficult for beginners to understand. You can build them in your editor, but to make them functional for testing purposes, you must be running on a web server.

You can do this in two ways.

1...Upload your site to a free or paid web host. See Beginner's Guide to purchasing web space.

2...Set up a localhost server on your computer. This process can be fairly simple if you use our recommended HTML editor, HTMLPad 2010.
See: My Tutorial

Editor with Built in Web Server


WeBuilderWeBuilder 2011 could be the BEST code editor on the market.

Try It FREE!!


Create and edit HTML, CSS, JavaScript, VBScript, PHP, ASP, SSI, Perl code fast and easy.

With BUILT IN web server!!!
Test your FORMS Before You Publish!

Download a FREE TRIAL of WeBuilder 2011



Forms can be used to gather information from your users. To be able to use forms, the server on which your site is located must provide CGI capabilities. CGI is a system of files that process data received from forms.

The Tags

Form <form></form>

Attributes

Method
There are two methods used by browsers to send information to a server. They are Post and Get.



These are specified in code as:
<form method="POST">
<form method="GET">


Action Tells the browser what CGI program to use and where it is located.

A form tag with both attributes would be coded as:
<form method="POST" action="cgi-bin/demo_html40.pl">


In this example the code tells the browser to use the post method, and to use the cgi program, demo_html40.pl, located in the cgi-bin directory or folder located on the server.

Note: The code for the script mentioned in the action statement is displayed below. This script is written in PERL. We also provide PHP code that can be used to parse the form examples.

Input <input></input>


Attributes
Two required attributes are Type and Name.
Type specifies the device used.
Options:

  • button
  • checkbox
  • radio
  • reset
  • text
  • hidden
  • submit

Name A name assigned to the information or data collected by the input device. The server receives information in name/value pairs.

Value is the information chosen or entered by the user.

Name identifies that information. (Don't go on until this concept sinks in.)

Take a quiz. Take a Quiz on this Information.


Demo_html40.pl

Demo_html40.pl is the script used to parse the forms used in HTML 4.0 Online.

#!/usr/bin/perl
#demo_html40.pl
read(STDIN, $buffer,$ENV{'CONTENT_LENGTH'});
$buffer =~ tr/+/ /;
$buffer =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg;
$buffer =~ s/<!--(.|\n)*-->/ /g;
$buffer =~ tr/\\|[|]|<|!|"|$|{|}|*|#|'|>|||;|%/ /; 
@pairs = split(/&/,$buffer);
foreach $pair(@pairs){
($key,$value)=split(/=/,$pair);
$formdata{$key}.="$value";
}


print "Content-type: text/html\n\n";

print <<End_of_Body;
<html>
<head><title>Demo</title>
<style type="text/css">
h3{ font-family: Arial;
font-style : normal ;
font-size : 14pt; 
font-weight :bold;
text-align :center
}
p{ font-family: Arial;
font-style : normal ;
font-size : 10pt; 
font-weight :normal;
text-align :left}
</style>

</head>
<body>
<h3>CGI - HTML Forms Demo</h3>
<p>We're using the same CGI script to process the forms on this site.  
Some of the results might seem a little strange, like the information
parsed from a checkbox form.  </p>
<p>The Create a Website package includes a tutorial on basic CGI scripts.  
You can also find sample scripts in the CGI Gallery on our site.</p>

End_of_Body

while (($key,$value)=
  each(%formdata)){

print <<End_of_Loop;
<p>You entered $value.</p>
<br>
End_of_Loop
}

print <<End_of_Document;
<p>You can return to the previous document using the Back Button or, <br>
<a href="backto.htm">Go to HTML 4.0 Online - Forms</a></p>

</body>
</html>
End_of_Document