Forms

INIT 7 FORMS
Sucture NOTES
70 Introtuction
11 Unit Objectives
1.2 Defining Forms
7.21 ACTION Attribute
7.22 METHOD Attribute
7.23 ENCTYPE Attribute
13 Form Controls
7.3.1 Drop Down List
7.3.2 Check Box
733 Radio Buttons
7.3.4 Text Field
7.3.5 TextArea
73.6 Password Field
7.3.7 Submit and Reset Buttons
74 Sample Forms
7.5 Summary
7.6 Key Terms
1.7 Answers to "Check Your Progress
7.8 Questions and Exercises

7.0 INTRODUCTION,,
HTML forms are that part of a Web page that allows the exchange of information
between the user and aWebsite, thereby, helping in creating the interactive environment.
Website.
Using forms, infomation can be collected from the users visiting a particular
The information gathered from the user can either be processed or stored for later use.
The most common examples of forms that are used on the Web are registration form,
application form order form.

7.1 UNIT OBJECTIVES

After going through this unit, you will be able to:

" Define 'forms'
"Discuss various controls that can be used in forms for gathering information from
the user
" Create various forms

7.2 DEFINING FORMS

InHTML, form is created by using the FORM element.
The syntax of FORM element is
<FORV>
..content of form
</FORM> Self-Instuctional
Material 107
Forns The FORM element provides various controls such as push buttons, text fol
check boxes, cte., through which the infomation is provided. In addition to these control
tables, ctc. Onee
the FORM clement may contain text and other HTML clements like
t
user has provided the required infomation to the Web site through various controls,
the scn
NOTES fom is submitted to ascript on the Web server for further processing. Usually,
is aCGI script (Common Gateway Interface) which is mostly written in Perl scriptin
language.
the informatio
Note: CGI is a protocol standard that speciftes the way in which
and bact
can be passed from a Weh page. through a Web server to a program,
format.
from the program to a browser in a proper
discusses some of
There are various attributes of FORM element. This section
these attributes in detail.
7.2.1 AcTION Attribute
the fom
ACTION attribute is used to specify the URL of the script that will process the Weh
after it has been submitted. Note that the specified script should be present on
server at the location specified by the URL.
For example, consider this statement.
/Webserver.com/cgi-bin/£ormscript">
<FORM ACTION= "http:/
is located in the
This statement specifies that the script named formscript
cai-bin directory on the server Webserver. com.
Generally. the form data is sent to seripts for processing, however, there is another
method of sending the form data. In this method, form data is sent to an email address
using mailto URL. For example, consider this statement.
<FORM ACTION "nailto: [email protected]" METHOD= "POST">
[email protected].
This statement sends the form data to the email address
The disadvantage of using this method is that some of the Web browsers do not support
mailto URL.
Note: Mailto URL is a protocol used for sending emails. The browser supporting
mailto URL prompts for creating email message and sends it to the specified email
address.
7.2.2 MBTHOD Attribute
METHOD attribute specifies how the data is passed to the script specified in the ACTION
attribute. There are two possible values for METHOD, namely, GET and POST. These
two values refer to the standard HTTP methods that define how the data will be passed
on to the Web server.
" GET Method: It is the default method used by the browsers for submitting the
data. Generally, requesting a URL to retrieve the HTML documents from a Web
server is made by using this method. When a user enters a URL in the,browser,
it gets translated into a valid GET request which is then forwarded to the server
tor further processing. This method appends the data obtained from the form at
the end ofthe URL being requested separated by a question mark. For exarmpk.
consider this statement.
htp:I/Website,com/cai-bin/comments.exe? Name= Julia&
nickname=Julie

SelfInstructional
108 Materia
 CET mehod has an1advantage that it can be casily usedin scarch h engines, The Forms

userCan simplyVsubmit a query to asearchengine which in turn nuns aquery and

U the result. Thc result so generated can be
bookmarked and can be rerun
inte in future. One of the disadvantages of GET method is that it is not very
as the fom data is displaycd in the URL. Ánother disadvantage of his NOTES
shod is that the amount of data to be forwarded using the GET method is very
innited.
POST Method:;POST method overcomes all the limitationssofGET method. In
e method, the data is not appended at the end of URL. instead the data is
ansmitted as separate Section (called entity body) following the HTTP header.
s. it is much secure method than GET method. Also, this method is more
auitable for sending large amount of data to the server.
123 ENCrYPE Attribute
special MME
Bydefaut,the form data is encoded according to the formattsspecifiedin
Dmal application/x-www-form-urlencoded. In this format, spaces
(non-alphanumeric) are replaced by
ereolaced by+ symbol and all special characters changed by using
cinmal ASCIl values. However, the method of encoding can beshould be encoded
data
anYPE atribute. This attribute determines how the form
ACTION attribute.
bofore sending it to the address specified in the
ENCTYPE attribute is
The syntax for using ..."
ENCTYPE= "Fornat1 | Format2
values such as
where. Format1, Format2. and so on, can take
anplication/x-Www-form-urlencoded, plain/ text,multipart/
form-data, etc.
data is sent using mailto URL approach
and
The plain/text is useful when
via forms.
ultipart/form-data is useful when files are sent
Check Your Progress
73 FORM CONTROLS 1, What do you
users understand by CGI
HTML clements which are used to collect information fom
Form controls are boxes, rádio buttons, script?
inciude drop down list., check
visiting aparticular Web site. These submit, reset buttons, etc. This section discusses
What is the use of
ficld, the ACTION
text fields, text area, password attribute?
some of these controls in detail.
method is used to
A Drop Down List
from which a user can choose one
retrieve HTML
to display a list of options documents by
Adrop down list is used pull-down menu or a scrollable menu. Adrop requesting a URL
either in the form of a
option. It can be fromma Web server.
down list can be created by using SELECT element. 4. The METHOD

The syntax for SELECT element is attribute

determines how
<SELFCT, the form data
list of options shoukd be encoded
before sending it to
</SELCT> the specified
using the OPTION clement,/Note
Each option in adrop down list is specificdtheby form address. (True or
when is loaded.
hat only first option in the list is displayed False)

Self-Instructional
Material 109
 The syntax ofOPTION element is
<OPTION>.</OPTION>
The content specified within cach OPTION element is the value that is sent to th.
server. However, you can send other value to the server other than the value that
NOTES
displayed, by using the VALUE attribute ofthe OPTION element. For example, consi
these statements.

<OPTION VALUE "1">First</OPTION>

<OPTION VALUE = "2">Second</OPTION>
<OPTION VALUE = "3">Third</OPTION>
<OPTION VALUE = "4">Fourth</OPTION>
:

In these statements, the options First, Second, Third and Fourth wil be
displayed when the form is loaded but their values l,2, 3and 4are sent to the server.
SELECT clement has three attributes namely, NAME, SIZE and MULTIPIE

NAME Attribute
Every drop down control must be provided with a name which can be used to decode
khe option selected by the user. It is aunique name which acts like avariable name.n
The syntax for using NAME atribute is
<SELECT NAME = "CONTROL NAME">

Note: All form controls must be named.

Example 7.1: An HTML code to demonstrate the creation of drop down list control
<HIML>
<HEAD>
<TITLE>Drop Down List</TITLE>
</HEAD>
<BODY>
<FORDAQPrON=/CGI-BIN/MYCGI.PL- METHOD=*POSR*>
<B>FAVORITE COLOR </B>
<SELECT NAME "FAVORITE COLOR">
<OPTION VALUE = "1">Red</OPTION>
<OPTION VALUE "2">Pink</0PTION>
<OPTION VALUE : "3">Blue</OPTION>
<OPTION VALUE = "4">Yellow</OPTION>
<OPTION VALUE "5">Green</OPTION>
</SELECT>
</FORM>
</BODY>
</HTM

Self-Insiructiona!
Material
 eoutputof the HTML code is as follows:

de Yow Favortes Ioos Hh

Ad ch aates
FAVORITE cOLOR Red

Done My Computer

Kate: The closing tag of OPTION element is optional.

STESAttribute
fre SIZE attribute of SELECT element is used to specify the number of optionsto be
Gplaved in the drop down list at any given point of time) For example, ifthe SIZE
tribute is set to 3, then only three options will be displayed at any time. Other options of
te drop down list can be viewed by using scroll bar. By default, the value for the SIZE
atrbute is 1.
The syntax for using SIZE attribute is
csELECT SIZE = "VALUE"> 7
Example 7.2: An HTML code to demonstrate the use of SI ZE attribute
<HTML>
<HEAD>
<TITLE>Drop DOwn List</TITILE>
</HEAD>
<BODY>
<FORM ACTION= "/CGI-BIN/MYCGI. PL" METHOD= "POST">
<B>FAVORITE COLOR</B>
<SELECT NAME= "FAVORITE COLOR" SIZE= "3">

<OPTION>Red</0PTION>
<OPTION>Pink</OPTION>
<OPTION> Blue</OPTION>
<OPTION>Yellow </OPTION>
<OPTION>Green</OPTION>
</SELECT>
</FORM>
</BODY>
</HTM>

Self-Instru
Materia!
 code is as follows:
The output of the HTM

S Drop Down List Miciosoft Internet

Explorer
Vew Favorites Ioos Help
Ede
Sesrch Favortes
NOTES

Bed
Pink
FAVORITE COLOR IBlue

My Computer
)Done

MULTIPLE Attribute
one option; however, MULTI PLE attribute
In the drop down list, the user can select only multiple options. User can select contiguos
ofSELECT element enables the user to select
clicking the first and last option
multiple options by holding down the SHIFT key and select non-contiguous multiple
can also
from the list of options to be selected)Userchcking
options by holding dewn the SHIFT key and the desired options from the list.
The syntax for using MULTIPLE attribute is
<SELECT MULTIPLE>|
ofMULTIPLE attribute
Example 7.3: An HTML code to demonstrate the use
<HTML>
<HEAD>
<TITLE>Drop Down List</TITLE>
</HEAD>
<BODY>
METHOD= "POST#
<FORM ACTION= "/CGI-BIN/MYCGI. PL"
<B>FAVORITE COLOR</B>
<SELECT NAME= "FAVORITE COLOR" MULTIPLE>
<OPTION>Red</OPTION>
<OPTION>Pink</OPTION>
<OPTION>Blue</OPTION>
<OPTION>Yellow</OPTION>
<OPTION>Green</OPTION>
</SELECT>
</FORM>
</BODY>
</HML>

Self-Instructional
Material
 the HTML
outputof code is as follows: Forms

oropDown.List MicIosoftIlnternet Explorer

Favoakes Iocls Hep

erch zFavortes NOTES

Red
Pink

AFORITE COLORYellow

IaDone
My Computer

13.2 Check Box

heck box is atwo state control having states true, (checked) and false (unchecked).
er can create more than one check box and can select any number of check boxes.
henthe fom is submitted, values of only selected check boxes are sent as data to the
erve.Check box can be created by using INPUT element along with its TYPE attribute.
(The syntax for creating check box is
<INPUT TYPE = "Checkbox">

The value ofcheck box can be specifiedby using VALUE attribute ofthe INPUT
cenent. The default status of check box is unchecked, which can be changed to checked
by using the CHECKED attribute. Note that more than one check box can have same
name. In such a case, those check boxes act like a drop down list in which more than
one option can b¹ selected.
ExampleA: An HTML code to demonstrate the creation of check box control
<HIML>
<HEAD>
<TITLE> Check Box</TITLE>
</HEAD>
<BODY>
FORM ACTION = "/CGI-BIN/MYCGI. PL" METHOD="POST">
<B> Which of the following is your favorite color? </B>
<BR>>
Red
<INPUT TYPE- "Checkbox" NAME= "Color" VALUE= "Red">
<BR>
Pink

Self-Instructional
Material 117
 "Pink+
TYPE= "Checkbox" NAME= *Color" VALUE=
<INPUT
CHECKED>

<BR>
Yellow VALUE= "Yell.
TYPE = "Checkbox" NAME= "Color"
<INPUT
NOTES
<BR>
"Bluers
Blue
"Checkbox" NAME= "Color" VALUE=
<INPUT TYPE=
</FORM>

<HR>
</BODY>
</HTML>
HTML code is as
follows:
The output of the

Check Box Mic

Aic osoft lnternet Lxploren

Fle EdR View Favortes Toos Hep

Search Favortes

coler?
Which of the following is yor fvorite
Red
Yelbw
Bhe

aDone
My Computer

7.3.3 Radio Buttons

Like check box, radio button is also a two- state control. However, unlike check boxes,
0. only one radio button can be selected at a time among several radio buttons|Selecting
he radio button automatically deselects previously selected radio button. Radio buttons
are used when options are to be defined mutually exclusive. It is also created by using
INPUT element along with its TY PE attribute.
KJhe syntax for creating radio button is
<INPUT TYPE = "Radio>

Like check boxes, radio buttohs can also be assigned different values using VALUE
attribute. The value of the selected radio button is sent as data to the server.
Example 7.5: An HTML code to demonstrate the creation of radiobutton control
<HIM>
<HEAD>

SelfInstructional
4 Material
 AITLE>Radio Button<//TITLE>

HEAD>

ACTION "/CGI-
«FORN
|=
of the
-BIN/MYCGI. PL" METHOD= "POST">
CB> Which following is your favorite color?</B> NO
<BR>

<INPUT TYPE= "Radio" NAME= color* VALUE= "Red" >

<BR>
Pink
nrotT TYPE= "Radio" NAME= "color" VALUE= "Pink" CHECKED>
<BR

Yellow
TYDrT TYPE = "Radio" NAME= "color* VALUB=
"Yellow*>
<BR>
Blue
TNPUT TYPE= "Radio" NAME= "color" VALUE= "Blue">
/FORM>
<R>
</BODY>
</HTM>
The output of the HTML code is as follows:

JRadio Button Microsoft nternet Explorer

Edt Yew Favorites Toos Help

Sexch SFavortes bw

Wách of the hllrig is yor fvorite coler?

Pad
Pat
Bh

eDone My Coputer

73.4 Text Field

Text field is asingle-line text input field that enables to collect the textual information/
om auser such as name,
address, etc.
Self-Insiructiona
Material
 i The syntax for creating text field is
<INPUT TYPE = "Text">

By default, the text field has a

width of 20 characters.
the size of text field in terms of number of characters by However, user can .
ES a
using SIZE attribute
example, the statement <INPUT TYPE = WText"
"35">will set the width of text field to 35 characters.NAMB="Username" SIZB,
The number of characters entered in a text field can be
restricted by usin
MAXLENGTH attribute. If the user tries to enter characters more than the number
characters specified by MAXLENGTHattribute in the text field, the browser will no
allow doing so.
To specify the default text for the text field, VALUE attribute is used. The tev:
Specified in the VALUE attribute will be displayed until the user modifies it. It acts as a
reminder to the user to enter the data in the field properly.
Example 7.6: An HTML code to demonstrate the creation oftext field control
<HÌN
<HEAD>
<TITLE> Text Field</TITLE>
</HEAD>
<BODY>
<FORM ACTION "/CGI-BIN/MYCGIPL" METHOD= "POST">
First name
<INPUT TYPE= "Text" NAME= "Username" VALUE= "Enter
your first name here" SIZE= "25" >
<BR>
Last name
<INPUT TYPE= "Text" NAME= "Username" SIZE= "25" >
<BR>

Permanent address
<INPUT TYPE="Text NAME="Useraddress" SIZE="30"
MAXLENGTH="50">
<BR>

City
<INPUT TYPE= "Text" NAME= "Usercity" VALUE=
"New Delhi"
READONILY>
Contact no.
<INPUT TYPE= "Text" NAME=
READONLY>
"Usercontact VALUE= "011
</FORM
</BODY>
</HTML

nstructional
ial
 HTMI.. code is as follows:
the
ceultputof
net Explorer
Feld Microsoft Inter
FTent
F ew Favctes Iools Hep

NO
Sexch Favortes )

Enter yDurfirst name here

name
Fst
Last nane
Permarnentaddress
CrNewDehi Contact no. 011

yalia

My Computer

by using READONLY
. Toxt in the text field control can be made read-only
atribute.
13.5 Text Area
amount of
is a multi-line text input field that allows the users to enter large
Tett area text area has two attributes namely,
ROWS
than one line of text). The
ual data (more text that can be
and COLS. ROWS attribute is used COLS to specify the number of rows of the number of
attribute is used to specify
entered in the text area, whereas control can be created
in the text area. Text area
characters per line that can be entered
element.
by using TEXTAREA
sytax for creating the text area is
The<TEXTAREA>..</TEXTAREA>
control
A: An HTML code to demonstrate the creation of text area
Example
<HIM>
<HEAD>
<TITLE Textarea Control</TITLE>

</HEAD>
<BODY>
="/CGI-BIN/MYCGI. PL" METHOD"POST">
<FORM AcTION
join our Company? </P>
<P> Why do you want to
ROWS= "5" COLS= "40>
<TEXTAREA NAME= "Userviews"
here
WI1te your answer
</TEXTAREA>
</FORM
</BODY>

Self-tnstructiona
Material
 The output of the HTML code is as follows:

Textarea Control Mictosoft Intenet fxploer

Fle fdk Yyew Fgvortes Ioos telp
NOTES
Back ASoach Frotes
Why do you wrant to join our Company?

Vrite your ansver here

Done My Compter

7.3.6 Password Field

Password field control is similar to text field control except that the input to the password
field is hidden, The browser displays each character as an asterisk or dot to prevent the
pasword from being visible.
The syntax for creating a password field is
<INPUT TYPE = "PASSWORD">

To limit the size and specify the maximum uumber of characters that auser can
enter in apassword field, SIZE and MAXLENGTH attributes can be used, respectively.
Example 7.8: An HTML code to demonstrate the creation of password field
<HTM>

<HEAD>
<TITLE> Password field </TITLE>
</HEAD>
<BODY>
<FORM ACTION= "/CGI-BIN/MYCGI. PL" METHOD= "POST">
Enter your name
<INPUT TYPE = "Text" NAME= "Username" SIZE = "20">
<BR>
Enter your password
<INPUT TYPE = "PASSWORD" NAME= "Userpassword SIZE=
"10" MAXLENGTH = "15">
</FORM>
</BODY>

</HTML>

Self-Instructional
Material
 the HTML ode is as
outputof follows:
The
SPaswordfietd Microsoft Internet xploter

F& Yew Fgvotes [ods Heb

NOTES

Eaet yrw ASanah

oesBDe
Stet yo psswod

My Compter
apore

13.7 Submit and Reset Buttons

Once the user has provided all the details through form, it must be sent to aprogram for
provided in the
processing. For this purpose, SUBMIT button is used that sends the data
fom to the desired destination.
The syntax for creating submit button is
INPUT TYPE "SUBMIT">
button that can be used to
There is another button in HTML known as RESET
form controls to their default values. With
clear the contents of the form and set all the is not satisfied
details in the form, ifhe
the help of this button, user can re-enter all theSUBMIT button.
with the details entered before clicking on the
The syntax for creating reset
button is
<INPUT TYPE = "RESET">
RESET buttons are Submit Query and
The default captions of SUBMIT and provided to them by using
captions can be
Reset, respectively. However, some other
VALUE attribute. RESET
demonstrate the creation of sUBMIT and
Example 79: An HTML code to
buttons
<HIML>
<HEAD>
Reset buttons </TITLE>
<TITLE> Submit and
</HEAD>
<BODY> "POST">
"/CGI-BIN/MYCGI. PL" METHOD=
<FORM ACTION =
Enter your name
wText NAME= "Username SIZE = 20">
INPUT TYPE

<BR>
Sel-lnstructional
Material
 Enter your password
<INPUT TYPE "PASSWORD" NAME= "Userpassword" SIZR=
"10" MAXLENGTH "15">

<BR>
<INPUT TYPE= "SUBMIT" NAME= "Send" VALUE= "Send,
NOTES
<INPUT TYPE = "RESET" NAME = "Clear" VALUE- "Start
Again">
</FORM
</BODY>

</HIM>)
The output of the HTML code is as
follows:

bmít and Reset buttons- Microsoft Internet Explorer

Submit
Ele Edt Vew Favorkes Toos lelp

Back )*2 sexch Favortes

Enter yor Ane Sanah

Enter vor passwordeeee0e

| Send | Stat Again

My Computer
Done

Note: A form can have more than one SUBMIT button:

7.4 SAMPLE FORMS

In this section, we will design some sample forms.

Example 7.10: An application form for filling the employment details
<HIML>
<HEAD>
<TITLE>Application Form</TITLE>
<HEAD>
<BODY BGCOLOR=#COcOc0>
<FORM; ACTION = "/CGI-BIN/MYCGI. PL" METHOD= "POST">
<B> <CENTER>FILL YOUR DETAILS</CENTER></B>
<TABLE>
<TR>

Self-Instructional
Material
 mn ALIGN=
<TD ALIGN= "Left"> "Left"><B>First Names/B></TD>
<INPUT TYPE= *Text" NAME= T1"
TR>
SIZE= 20"></TD>
TR> NOT
eD ALIGN= *
<TD ALIGN= "Left"> Left"><B>Last Name</B></TD>
CINPUT TYPE= "Text" NAME=
T1" SIZE= "20">
</TD>
</TR>

<TR>
<TD ALIGN=
"Left"><B>Pernanent Address</B></TD>
<TD ALIGN= "Left">

<TEXTAREA ROWS "2" NAME= "S1 COLS=

/TD> 20></TEXTAREA>
</TR>

<TR>
<TD ALIGN=
TD> "Left"><B>Correspondence Address</B></
<TD ALIGN= "Left">
<TEXTAREA ROWS= "2" NAME= "S1" COLS= "20"><l
TEXTAREA> </TD>
</TR>
<TR>
<TD ALIGN= "Left"
><B>City</B></TD>
<TD ALIGN=Left">
<INPUT TYPE- "Text" NAME= "T1 SIZE= "20">
</TD>
</TR>
<TR>

<TD ALIGN= "Left"><B>Contact Nunber</B></TD>

<TD ALIGN= "Left">
<INPUT TYPE= "Text" NAME= "T1* SIZE= 20">
</TD>
</TR>

<TR>

<TD AL,IGN= "Left"><B> Gender</B></TD>

<TD ALIGN= "Left">
<INPU TYPE= "Radio" NAME= "GENDER"> MALE
</TD>
<TD ALI GN= *Left"
<INPUT TYPE= "Radio NAME= "GENDER"> PEMAID
</TD>
</TR>

Selt
 <TR>
<TD ALIGN= "Left"><B> POST
APPLIED FOR</B></T
<TD>
<SELECT NAME : "POST">
NOTES
<OPTION VALUE= "1"> HR </OPTION
<OPTION VALUE= "2"> MARKETING
EXEcUTIVE </OPTIOAX
<OPTION VALUE= "3"> ASSISSTANT MANAGER </OPTION
<OPTION VALUE= "4"> CONTENT WRITER
</0PTION
</SELECT>
</TD>
</TR>

</TABLE>
<P>Write a brief summary of your experiences with
previous companies in this box.
<TEXTAREA ROWS= "5" NAME= "S1" COLS= "30"></TEXTAREA
</P>
<P ALI GN="Center">
<INPUT TYPE= "Submit" VALUE= "Submit NAME= "B1>
<INPUT TYPE= "Reset" VALUE= "Reset" NAME= "B2">
</P>
</FORM>
</BODY>
</HTIML>
The output of the HTML code is as follows:
DAppli atbnfo M bs1t Internwt bporet
Fe Edt Mew Fgrartes Ioos

CONTENTWRITER

FLLYOURbtzALS

endece AAt

Clty

OMALE QFEMALE
POSTAPUn FOR MAPKETNG EECTME
MAPKISTIeFSER
ASSISSTANT MAN
ANAGER
CONTENT WRTER

Submit Rasgt
IDone
My Conoue

tructional