HTML Forms - Home | ERNET

1

HTML Forms

Prof. Indranil Sen GuptaDept. of Computer Science & Engg.

I.I.T. Kharagpur, INDIA

Indian Institute of Technology Kharagpur

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.

2

Introduction

• Provides two-way communication between web servers and browsers.

Demand for most of the emerging applications.Providing dynamic contents.

BROWSERWEB

SERVER

What is a HTML FORM?

• A form basically contains boxes and buttons.

Real-life examples:Search enginesOn-line purchase of itemsRegistration

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.

3

FORM Example

FORM Tags and Attributes

• Several tags are used in connection with forms:

<form> …… </form><input><textarea> …… </textarea><select> …… </select>

4

<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:METHODACTION

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

5

• 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>

6

<INPUT> Tag

• This tag defines a basic form element.• Several attributes are possible:

TYPENAMESIZEMAXLENGTHVALUESRCALIGN

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

7

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

8

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

9

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

10

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>

11

Example 2

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

</HEAD>


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

Please fill up the form below and press DONE when done.

12


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>

13

Example 3

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


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

Please fill up the following form and press DONEwhen finished.

14


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>

15

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

16

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

P

cgi

P

Browser

new html page

submit form

original page

17

• Web page including formResides on the web server in the regular folder where html files and other documents are kept.

• CGI script program handling form dataResides 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>

18

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.

19

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.02) XLink and XPointer3) XSL

20


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>


5. Using entity reference, how will the string “Hello ma’m” be represented?

&Hello ma'm&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.

21


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>


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’

22

QUIZ QUESTIONS ONLECTURE 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?

23

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?

Documents

HTML Forms - Home | ERNET