HTML Form Tutorial
While almost all other elements in HTML are for controlling the display and presentation, HTML FORM and INPUT tags add interactivity to the web site. The HTML forms handle very important operations at the website like taking orders, surveys, user registration and so on. You will hardly find a single web site without forms.
Please keep in mind that this tutorial deals with the HTML part of the forms only. You should use server-side scripting language to handle the data submitted by the forms. However, form-mail is discussed briefly at the end of this tutorial.
If you are looking for a software tool for creating HTML forms quickly ( without even knowing HTML),
see the article: Form Design Software.
This article contains more information about
Simfatic Forms -
an easy to use form creation software.
Basic HTML
In order to understand this html form tutorial, you should know the basics of HTML. For making things easier for you, the basic HTML concepts are briefed here:
A web page, or an html page is composed of text enclosed within HTML tags. Like this:
<some_html_tag>Text here</some_html_tag>
If you want to make some part of your text in bold face, code the html like this:
Normal text here <B>bold text here
</B>
Any html page will have two parts: the head and the body marked by <HEAD>
and <BODY> tags.
The layout of an HTML page will be like this:
<HTML>
<HEAD>
<TITLE>....The title of the Page..</TITLE>
</HEAD>
<BODY>
....The actual text in the html page goes here ....
</BODY>
</HTML>
The HTML tags are NOT case sensitive. In this tutorial, the tags will be capitalized to make it easily identifiable.
The HTML form tag
Let us start from the <FORM> tag. All the input elements
should be enclosed within the opening and closing <FORM>
tags like this:
<FORM ...>
The input elements go here....
</FORM>
The following are the important attributes for the form tag:
ACTION="handlerpage"
This Attribute specifies the page which handles the input from the user.
Usually, this will be a script or a CGI program which processes the data
supplied by the user. (Like storing the information in database, completing the
order etc)
Find advanced topics on action field handling in the article:
Switching HTML form action field dynamically
METHOD ="GET"|"POST" ( is either GET or POST.)
In simple terms, if you use GET method, the input values are passed as
part of the URL. If it is POST, the information is sent to the
server as part of the data body and will not be visible in the URL box in the
user's browser.
If you don't specify the method, GET is taken by default.
Suppose your form handler page is a Perl script named formmail.pl. the HTML FORM should be coded like this:
<FORM ACTION="cgi-bin/formmail.pl" METHOD="POST">
................................
.....Your input items here .....
................................
</FORM>
You can find more information on the HTML Form tag here
The input items
You can define different types of input tags like text box, check box, radio buttons select lists and so on.
Let us look at how to define different input items for your form.
Text Input
Text input is used to collect single line of text from the user like name, email address etc. It is the most commonly used input type.
A text input item can be defined like this:
<INPUT TYPE="TEXT" NAME="FirstName">
TYPE="TEXT" attribute tells the browser that a single line text input box should be created.
NAME="FirstName"
defines the name of the field. This name will be used at the server
side to identify this input item.
There are some more attributes that you can specify with the text input item.
VALUE="default value"
the text you give as VALUE will be displayed by default in the text box.
for example,
<INPUT TYPE="TEXT" NAME="FirstName" VALUE="Your FirstName here,Please">
will display the text 'Your FirstName here,Please' in the text box
MAXLENGTH="maxChars"
Specifies the maximum number of characters the user can enter into this text box.
SIZE="lengthChars"
The length of the input text box, in number of characters.
Let us expand our previous html form definition with some text boxes.
<FORM ACTION="cgi-bin/formmail.pl" METHOD="POST">
Name: <INPUT TYPE="TEXT" NAME="Name" VALUE="" SIZE="25" MAXLENGTH="50"> <BR>
Email: <INPUT TYPE="TEXT" NAME="Email" VALUE="" SIZE="25" MAXLENGTH="50"><BR>
</FORM>
There are two fields in this HTML form for collecting the name and email address of the visitor. The <BR> tags are only to introduce line breaks, to make our form more legible.
Adding a submit button
After entering the data, the user presses the submit button which triggers the browser to send the data to the server. You can add a submit button to the form using the 'submit' input type.
You can add a submit button to your html form using the following code
<INPUT TYPE="SUBMIT" NAME="name" VALUE="label">
NAME ="name"
This attribute is to identify the submit button by the name.
There can be more than one submit buttons in a form. At the server side,
the submit button which was pressed can be identified using the NAME attribute.
VALUE="label"
The string given in the VALUE attribute is displayed as the label of the
submit button in the form.
Let us add a submit button to our form page and finish it as a complete HTML page:
<HTML>
<HEAD>
<TITLE>HTML form tutorial example</TITLE>
</HEAD>
<BODY>
<H1>HTML form tutorial example</H1>
<FORM ACTION="cgi-bin/formmail.pl" METHOD="POST">
Name: <INPUT TYPE="TEXT" NAME="Name" VALUE="" SIZE="25" MAXLENGTH="50"> <BR>
Email: <INPUT TYPE="TEXT" NAME="Email" VALUE="" SIZE="25" MAXLENGTH="50"><BR>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Sign Me Up!">
</FORM>
</BODY>
</HTML>
Copy this code to a file say, my_html_form1.html and open it in your favorite browser.
You can experiment by changing the form METHOD to "GET".
But, the browser will give you error if you press the submit button (labeled 'Sign Me Up!') because, the form handling page is not available. You can make ACTION="my_form1.html" for avoiding the error.
Learn More about HTML Form Submit button here
The example shown above is available in the link below:
HTML form tutorial example
Related:
Form Design Software
|
