Using HTML Code to create website Forms

Basic HTML Forms

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

You can do this in two ways.

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

Set up a local server on your computer. The process for doing this is a little involved to explain here.

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.)

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// /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="http://www.createafreewebsite.net/html_tutorial/forms.htm">Go to HTML 4.0 Online - Forms</a></p> </body> </html> End_of_Document


Home Website Tutor PHP/MySQL CGI Tutorial Templates Free Scripts Free FTP Tool Free Buttons Free Bullets Free Logos Backgrounds Free Pics Frames

HTML Code Tutorial

Basic HTML Forms

The Tags

Demo_html40.pl