7/30/2019 HTML Form & CGI Concepts

1/27

HTML Search Forms and CGI

7/30/2019 HTML Form & CGI Concepts

2/27

HTML is a tool that provides for

Describing and representing the structureand contents of web documents.

Linking that text to other resources. A CGI program has to somehow get from

the user any data to be processed. That's

where HTML forms come into play

2

7/30/2019 HTML Form & CGI Concepts

3/27

There are many uses of forms onWeb

As surveys. Online order forms.

Feedback. As a means to search a database.

Or other functions for which user input isrequired.

3

7/30/2019 HTML Form & CGI Concepts

4/27

Forms can be created with the followingfeatures:

Selectable lists. Radio buttons.

Checkboxes. Text Fields.

Submit and Reset buttons.

4

7/30/2019 HTML Form & CGI Concepts

5/27

General form of FORM tag

... FormElement tags ... .

... .

ACTION attribute tells the URL where the information inthe form is to be sent.

Default method is GET (Takes the information entered into

the form, and adds this information to the URL specified bythe ACTION attribute.

POST method sends the information from the form as an

encoded stream of data to the web (Difference with GETmethod)

5

7/30/2019 HTML Form & CGI Concepts

6/27

Quick reference to Form

Element Tag

6

7/30/2019 HTML Form & CGI Concepts

7/27

Creates Text

Field

Password Field

Hidden Field

Checkbox

7

7/30/2019 HTML Form & CGI Concepts

8/27

Radio Button

one

Two

:

Dropdown List

Scrolling List

7/30/2019 HTML Form & CGI Concepts

9/27

USER INFORMATION

FORM

User Name:

Service Type:CASCDRS

COPSATDDSFDSSISSOSSSASDA

SUBJECT AREA:

Agriculture

Biology

BiomedicineChemistry

9

7/30/2019 HTML Form & CGI Concepts

10/27

AGRIS

AHEADBIOSIS

CAB

Date Entered:

7/30/2019 HTML Form & CGI Concepts

11/27

CGI (Common Gateway

Interface) Concepts

11

7/30/2019 HTML Form & CGI Concepts

12/27

CGI, permits interactivity between a clientand a host operating system through a World

Wide Web via the Hyper Text Transfer

Protocol (HTTP).

12

7/30/2019 HTML Form & CGI Concepts

13/27

Writing CGI programs involves

Obtaining input from a user or from a datafile.

Storing that input in program variables. Manipulating those variables to achieve

some desired purpose, and

Sending the results to a file or video

display.

13

7/30/2019 HTML Form & CGI Concepts

14/27

Data are obtained in ENVIRONMENT

variables.The ENVIRONMENT variables are shown

below in the table

14

7/30/2019 HTML Form & CGI Concepts

15/27

ENVIRONMENTVARIABLE DESCRIPTION

SERVER_NAME The server's Host name or IP address .

SERVER_SOFTWARE The name and version of the server-software that is answering the client

requests.

SERVER_PROTOCOL The name and revision of theinformation protocol the request came

in with.

REQUEST_METHOD The method with which the informationrequest was issued.

QUERY_STRINGThe query information passed to the

program. It is appended to the URLwith a "?".

15

7/30/2019 HTML Form & CGI Concepts

16/27

CONTENT_TYPE The MIME type of the query data, such as "text/html".

CONTENT_LENGTH The length of the data in bytes, passed to the CGI program through standard input.

GATEWAY_INTERFACE The revision of the CGI that the server uses.

HTTP_USER_AGENT The browser the clients is using to issue the request.

HTTP_REFERER The URL of the document that the client points to before accessing the CGI program.

ENVIRONMENTVARIABLE DESCRIPTION

CONTENT_TYPE The MIME type of the query data, such

as "text/html".

CONTENT_LENGTH The length of the data in bytes, passedto the CGI program through standard

input.

HTTP_REFERER The URL of the document that theclient points to before accessing theCGI program.

GATEWAY_INTERFACE The revision of the CGI that the serveruses.

HTTP_USER_AGENT The browser the client is using to issue

the request.

16

7/30/2019 HTML Form & CGI Concepts

17/27

CGI Interaction through HTML Forms

17

W b B d W b S

7/30/2019 HTML Form & CGI Concepts

18/27

Web Browser and Web Server

interaction

Suppose you embed the following hypertext linkin an HTML document:

TEST.HTML

If you were to click on this link, the browserwould issue the following request to the Webserver:

GET /TEST.HTML HTTP/1.0Accept: text/plainAccept: text/html

Two blank lines

18

W b B d W b S

http://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/test.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/test.html

7/30/2019 HTML Form & CGI Concepts

19/27

Web Browser and Web Server

interaction Cont...

Each of these lines is referred to as aHeader.

No complete path of the file, so the WebServer would look TEST.HTML in servers

Web-document root directory.

Browser can accept plain text or HTML-

formatted text files.

19

Server Response

7/30/2019 HTML Form & CGI Concepts

20/27

Server ResponseHTTP /1.0 200 OK

Date: Monday, 24-May-9611:09:05 GMT

Server: NCSA/1.3

MIME-version 1.0Content-type: text/html

Content-length: 231

Test Page

This is the sample document

This is a test HTML page.

Web browser then reads and displays the HTMLportion of the file.

20

7/30/2019 HTML Form & CGI Concepts

21/27

GET Method

All the form data is appended to the URL QUERY_STRING contains query information

passed to the program

When user clicks the submit button from a htmlform, browser generates a HTTP request

GET

/Scrits/Workshop/simple2.pl?u11/11/99name=Rani&service=CAS&entrydate=26%2F11%2F1999 HTTP/1.0 and sends to the

web browser.

21

http://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.html

7/30/2019 HTML Form & CGI Concepts

22/27

GET Method Cont

The continuous string of text that follows thequestion mark represents the query string.

In response to this request from the browser, theserver executes the script simple2.pl and placesthe string

uname=Rani&service=CAS&entrydate=

26%2F11%2F1999, in the QUERY_STRINGenvironment variable andHTTP/1.0 inSERVER_PROTOCOL

CGI program reads these environment variables,process, and passes some results to Web Server22

7/30/2019 HTML Form & CGI Concepts

23/27

POST Method

Data from the form is encoded as string ofdata divided in NAME/VALUE pair and

separated by &.

In case of POST methods with the same

html form it will generate the request

23

http://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.html

7/30/2019 HTML Form & CGI Concepts

24/27

POST Method Cont

POST /Scripts/simple2.plHTTP/1.0

Accept: text/html

Accept: text/plain

User-Agent:

Content-type: application/ x-www-urlencodedContent-length: 28

uname=Rani&service=CAS&entrydate=

26%2F11%2F1999

24

7/30/2019 HTML Form & CGI Concepts

25/27

POST Method Cont

With the post method, the server passes theinformation contained in the submitted

form as standard input (STDIN) to the

CGI program.

CONTENT_LENGTH contains

information about how much amount ofdata being transferred from html form.

25

7/30/2019 HTML Form & CGI Concepts

26/27

CGI program Using Perl (Practical Extraction

and Report Language)

Perl is an Interpreted script, instead of a compiled

program with file extension .pl.

Perl is freely available for many platform, Unix

as well as Windows. A simplest CGI program using perl that prints

Hello, World in the browser is

# This program prints Hello, World in the browser

print "Content-type: text/html \n\n";

print "Hello, World";

26

7/30/2019 HTML Form & CGI Concepts

27/27

CGI program Using Perl (Practical Extraction

and Report Language) Cont

Examples using GET and POST Method Using GET Method Source Code

Using POST Method Source Code

27

http://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/ple1.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/gets.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/ple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/posts.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/posts.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/ple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/gets.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/ple1.html