Indian Institute of Technology Kharagpur

HTML Forms

Prof. Indranil Sen Gupta

Dept. of Computer Science & Engg.
I.I.T. Kharagpur, INDIA

Lecture 17: HTML Forms

On completion, the student will be able to:

• Explain the tags and attributes in HTML that
are used to specify forms.
• Illustrate various form designs using
examples.
• Explain how a form interacts with a server-
side script.
• Demonstrate a complete form-based design
that uses a server-side script written in Perl.

1
 Introduction

• Provides two-way communication

between web servers and browsers.
¾Demand for most of the emerging
applications.
¾Providing dynamic contents.

WEB
BROWSER SERVER

What is a HTML FORM?

• A form basically contains boxes and

buttons.
¾Real-life examples:
ƒ Search engines
ƒ On-line purchase of items
ƒ Registration
¾The form allows a user to fill up the
blank entries and send it back to the
owner of the page.
ƒ Called SUBMITTING the form.

2
 FORM Example

FORM Tags and Attributes

• Several tags are used in connection

with forms:
<form> …… </form>
<input>
<textarea> …… </textarea>
<select> …… </select>

3
 <FORM> …… </FORM> Tag

• This tag is used to bracket a HTML

form.
¾Includes attributes which specify where
and how to deliver filled-up information
to the web server.
• Two main attributes:
¾METHOD
¾ACTION

• METHOD:
¾Indicates how the information in the form
will be sent to the web server when the
form is submitted.
¾Two possible values:
ƒ POST: causes a form’s contents to be parsed
one element at a time.
ƒ GET: concatenates all field names and values
in a single large string.
¾POST is the preferred method because of
string size limitations in most systems.

4
• ACTION:
¾Specifies the URL of a program on the
origin server that will be receiving the
form’s inputs.
¾Traditionally called Common Gateway
Interface (CGI).
ƒ Details of CGI to be discussed later.
¾The specified program is executed on
the server, when the form is submitted.
ƒ Output sent back to the browser.

• Typical usage:
<FORM METHOD=“POST”
ACTION=“cgi-bin/myprog.pl”>
……..
……..
</FORM>

5
 <INPUT> Tag

• This tag defines a basic form element.

• Several attributes are possible:
¾TYPE
¾NAME
¾SIZE
¾MAXLENGTH
¾VALUE
¾SRC
¾ALIGN

• TYPE:
¾Defines the kind of element that is to be
displayed in the form.
ƒ “TEXT” – defines a text box, which provides
a single line area for entering text.
ƒ “RADIO” – radio button, used when a choice
must be made among several alternatives
(clicking on one of the buttons turns off all
others in the same group).
ƒ “CHECKBOX” – similar to the radio buttons,
but each box here can be selected
independently of the others.

6
 ƒ “PASSWORD” – similar to text box, but
characters are not shown as they are typed.
ƒ “HIDDEN” – used for output only; cannot be
modified (mainly used to refer to choices that
have already been made earlier).
ƒ “IMAGE” – used for active maps. When the user
clicks on the image, the (x,y) co-ordinates are
stored in variables, and are returned for further
processing.
ƒ “SUBMIT” – creates a box labeled Submit; if
clicked, the form data are passed on to the
designated CGI script.
ƒ “RESET” – creates a box labeled Reset; if
clicked, clears a form’s contents.

• NAME:
¾Specifies a name for the input field.
¾The input-handling program (CGI) in reality
receives a number of (name,value) pairs.
• SIZE:
¾Defines the number of characters that can
be displayed in a TEXT box without
scrolling.
• MAXLENGTH:
¾Defines the maximum number of
characters a TEXT box can contain.

7
• VALUE:
¾Used to submit a default value for a TEXT or
HIDDEN field.
¾Can also be used for specifying the label of
a button (renaming “Submit”, for example).
• SRC:
¾Provides a pointer to an image file.
¾Used for clickable maps.
• ALIGN:
¾Used for aligning image types.
¾ALIGN = TOP | MIDDLE | BOTTOM

<TEXTAREA> … </TEXTAREA> Tag

• Can be used to accommodate multiple

text lines in a box.
• Attributes are:
¾NAME: name of the field.
¾ROWS: number of lines of text that can fit
into the box.
¾COLS: width of the text area on the screen.

8
 <SELECT> …. </SELECT> Tag

• Used along with the tag <OPTION>.

• Used to define a selectable list of
elements.
¾The list appears as a scrollable menu or a
pop-up menu (depends on browser).
• Attributes are:
¾NAME: name of the field.
¾SIZE: specifies the number of option
elements that will be displayed at a time on
the menu. (If actual number exceeds SIZE, a
scrollbar will appear).

¾MULTIPLE: specifies that multiple

selections from the list can be made.
<FORM ………….>
……..
Languages known:
<SELECT NAME=“lang” SIZE=3 MULTIPLE>
<OPTION> English
<OPTION> Hindi
<OPTION> French
<OPTION> Hebrew
</SELECT>
</FORM>

9
 Example 1

<HTML>
<HEAD>
<TITLE> Using HTML Forms </TITLE>
</HEAD>

<BODY TEXT="#FFFFFF" BGCOLOR="#0000FF"

LINK="#FF9900" VLINK="#FF9900"
ALINK="#FF9900">

<CENTER><H3> Student Registration Form </H3>

</CENTER>

Please fill up the following form about the

courses you will register for this Semester.

<FORM METHOD="POST" ACTION="/cgi/feedback">

<P> Name: <INPUT NAME="name" TYPE="TEXT"
SIZE="30" MAXLENGTH="50">
<P> Roll Number: <INPUT NAME="rollno"
TYPE="TEXT" SIZE="7">
<P> Course Numbers:
<INPUT NAME="course1" TYPE="TEXT" SIZE="6">
<INPUT NAME="course2" TYPE="TEXT" SIZE="6">
<INPUT NAME="course3" TYPE="TEXT" SIZE="6">
<P> <P> Press SUBMIT when done.
<P> <INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</FORM> </BODY> </HTML>

10
 Example 2

<HTML>
<HEAD>
<TITLE> Using HTML Forms </TITLE>
</HEAD>

<BODY TEXT="#FFFFFF" BGCOLOR="#0000FF"

LINK="#FF9900" VLINK="#FF9900"
ALINK="#FF9900">

<CENTER> <H3> Student Registration Form </H3>

</CENTER>

Please fill up the form below and press DONE when

done.

11
<FORM METHOD="POST" ACTION="/cgi/feedback">
<P> Name: <INPUT NAME="name" TYPE="TEXT"
SIZE="30" MAXLENGTH="50">
<P> Roll Number:
<INPUT NAME="rollno" TYPE="TEXT" SIZE="7">
<P> Course Numbers:
<INPUT NAME="course1" TYPE="TEXT" SIZE="6">
<INPUT NAME="course2" TYPE="TEXT" SIZE="6">
<INPUT NAME="course3" TYPE="TEXT" SIZE="6">
<P> Category: SC <INPUT NAME="cat" TYPE=RADIO>
ST <INPUT NAME="cat" TYPE=RADIO>
GE <INPUT NAME="cat" TYPE=RADIO>

<P> Mother tongue: <SELECT NAME="mtongue" SIZE="3">

<OPTION> Hindi
<OPTION> Bengali
<OPTION> Gujrati
<OPTION> Tamil
<OPTION> Oriya
<OPTION> Assamese
</SELECT>
<P> <P> Thanks for the information.
<P> <INPUT TYPE="SUBMIT" VALUE="DONE">
<INPUT TYPE="RESET" VALUE="CLEAR FORM">
</FORM>
</BODY>
</HTML>

12
 Example 3

<HTML>
<HEAD>
<TITLE> Using HTML Forms </TITLE>
</HEAD>

<BODY TEXT="#FFFFFF" BGCOLOR="#0000FF"

LINK="#FF9900" VLINK="#FF9900"
ALINK="#FF9900">

<CENTER> <H3> Student Feedback Form </H3>

</CENTER>

Please fill up the following form and press DONE

when finished.

13
<FORM METHOD="POST" ACTION="/cgi/feedback">
<P> Name: <INPUT NAME="name" TYPE="TEXT"
SIZE="30" MAXLENGTH="50">
<P> Roll Number:
<INPUT NAME="rollno" TYPE="TEXT" SIZE="7">
<P> Password:
<INPUT NAME="code" TYPE=PASSWORD
SIZE="10">
<P> Course Numbers:
<INPUT NAME="course1" TYPE="TEXT" SIZE="6">
<INPUT NAME="course2" TYPE="TEXT" SIZE="6">
<INPUT NAME="course3" TYPE="TEXT" SIZE="6">

<P> Category: SC <INPUT NAME="cat" TYPE=RADIO>

ST <INPUT NAME="cat" TYPE=RADIO>
GE <INPUT NAME="cat" TYPE=RADIO>

<P> Mother tongue: <SELECT NAME="mtongue"

SIZE="3">
<OPTION> Hindi
<OPTION> Bengali
<OPTION> Gujrati
<OPTION> Tamil
<OPTION> Assamese
<OPTION> Oriya
</SELECT>

14
<P> Languages known:
English <INPUT NAME="lang" TYPE=CHECKBOX>
Hindi <INPUT NAME="lang" TYPE=CHECKBOX>
<P> Scholarship holder (select for yes):
<INPUT NAME="schol" TYPE=CHECKBOX>
<P> General feedback:
<TEXTAREA NAME="feed" ROWS=3 COLS=20>
</TEXTAREA>
<P> <P> Thanks for the information.
<P> <INPUT TYPE="SUBMIT" VALUE="DONE">
<INPUT TYPE="RESET" VALUE="CLEAR FORM">
</FORM>
</BODY>
</HTML>

15
 How to Submit a Form?

• Three different ways:

¾Clicking on the Submit button.
¾Clicking on an active map.
¾Pressing <ENTER> on a TEXT box or
TEXTAREA.

The Basic Mechanism

original page

P P
submit form

cgi
new html page

Browser

16
• Web page including form
¾Resides on the web server in the regular
folder where html files and other
documents are kept.
• CGI script program handling form data
¾Resides under a special folder on the web
server (usually, “cgi-bin).
¾May be written in Perl, C, shell script, etc.
• Web page linked to the cgi script.

<FORM METHOD=“POST”
ACTION=“cgi-bin/myprog.pl”>
……..
……..
</FORM>

17
 How to Write the CGI Program?

• Must know …
¾How to access the form data.
ƒ Mechanism depends on METHOD (GET or
POST).
¾How to return processed output back to
the browser.
ƒ HTML file created on the fly (typically).
• Details to be discussed later.
¾Good idea to have a look at a typical
Perl script.

18
 SOLUTIONS TO QUIZ
QUESTIONS ON
LECTURE 16

Quiz Solutions on Lecture 16

1. What is a markup language?

It is a language that provides constructs
to specify how a document of to be
viewed.
2. What are the three main specifications
defining XML?
1) XML version 1.0
2) XLink and XPointer
3) XSL

19
 Quiz Solutions on Lecture 16

3. Give an example of an XML element? How

can an empty element be specified?
Example: <country> India </country>
Empty element: <country/>
4. What is an XML attribute? Give an example.
They are name-value pairs attached to
elements.
Example: <city name=“Kharagpur”>
http://www.iitkgp.ac.in
</city>

Quiz Solutions on Lecture 16

5. Using entity reference, how will the string

“Hello ma’m” be represented?
&amp;Hello ma&apos;m&amp;
6. How do you insert comments in XML?
By enclosing them between < ! - - and - - >
7. Why is the CDATA section used?
To instruct the XML parser to ignore
markup characters.

20
 Quiz Solutions on Lecture 16

7. What do element type declaration do?

They identify names of elements and the
nature of their contents.
8. What do attribute list declaration do?
Specify names and types of attributes.
9. Give an example of simple link.
<link xml:link=“simple”
href=“http://www.iitkgp.ac.in”>
Our Institute Home page </link>

Quiz Solutions on Lecture 16

10. How do you specify extended links

in XML?
By using the “ELINK” and “LOCATOR”
tags.
11. How do you retain white spaces in
the document?
By using xml:space=‘preserve’

21
 QUIZ QUESTIONS ON
LECTURE 17

Quiz Questions on Lecture 17

1. Why it is said that the use of forms can

provide dynamic contents?
2. What is the purpose of the “METHOD”
attribute of the FORM tag?
3. What is the purpose of the “ACTION”
attribute of the FORM tag?
4. Illustrate the use of “METHOD” and
“ACTION” in a form definition with the help
of an example.
5. What is the difference between the “TEXT”
and “PASSWORD” values in the “TYPE”
attribute of a form element?

22
 Quiz Questions on Lecture 17

6. What is the difference between the

“RADIO” and “CHECKBOX” values in the
“TYPE” attribute of a form element?
7. What is the purpose of the <SELECT> tag?
8. What are the different ways to submit a
form?

23