Scribd
Upload
170 views

HTML Form & CGI Concepts

This document discusses HTML forms and how they interact with CGI programs to submit user input from a web form. It provides information on: - How HTML forms allow users to enter data through elements like text fields, checkboxes, radio buttons, and submit it to a CGI program. - Common CGI environment variables like QUERY_STRING and HTTP_USER_AGENT that are used to pass form data to programs. - The difference between GET and POST methods, with GET appending data to the URL and POST encoding it in the HTTP request body. - A simple Perl CGI program example to process form data and return output to the browser.

Uploaded by

Gautham Logaraj
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
170 views

HTML Form & CGI Concepts

This document discusses HTML forms and how they interact with CGI programs to submit user input from a web form. It provides information on: - How HTML forms allow users to enter data through elements like text fields, checkboxes, radio buttons, and submit it to a CGI program. - Common CGI environment variables like QUERY_STRING and HTTP_USER_AGENT that are used to pass form data to programs. - The difference between GET and POST methods, with GET appending data to the URL and POST encoding it in the HTTP request body. - A simple Perl CGI program example to process form data and return output to the browser.

Uploaded by

Gautham Logaraj
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

HTML Search Forms and CGI

HTML is a tool that provides for


Describing and representing the structure and 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

There are many uses of forms on Web


As surveys. Online order forms. Feedback. As a means to search a database. Or other functions for which user input is required.

Forms can be created with the following features:


Selectable lists. Radio buttons. Checkboxes. Text Fields. Submit and Reset buttons.

General form of FORM tag


<FORM ACTION="URL" METHOD="GET" > ... Form Element tags ... </FORM>. <FORM ACTION =http://www.ncsi.iisc.ernet.in/ncsi/test.pl MTHOD ="POST"> ... </FORM>. ACTION attribute tells the URL where the information in the form is to be sent. Default method is GET (Takes the information entered into the form, and adds this information to the URL specified by the ACTION attribute. POST method sends the information from the form as an encoded stream of data to the web (Difference with GET method)

Quick reference to Form Element Tag

<INPUT TYPE="text" NAME="name" VALUE ="value" SIZE=size>

Creates Text Field

<INPUT TYPE="password" NAME="name" VALUE="value" SIZE=size>

Password Field

<INPUT TYPE="hidden" NAME="name" VALUE="value">

Hidden Field

<INPUT TYPE="checkbox" NAME="name" VALUE="value">

Checkbox

<INPUT TYPE="radio" NAME="name" VALUE="value"> <SELECT NAME="name" SIZE=1> <OPTION SELECTED>one <OPTION>Two : </SELECT> <SELECT NAME="name" SIZE=n MULTIPLE> <TEXTAREA ROWS=yy COLS=xx NAME="name> .. </TEXTAREA> <INPUT TYPE="submit" VALUE="Submit" >

Radio Button

Dropdown List

Scrolling List Multiple Test Fields Submit button

<INPUT TYPE="reset" VALUE="Reset" >

Reset Button
8

<HTML> <BODY> <H1 ALIGN=CENTER><FONT SIZE=+2>USER INFORMATION FORM</FONT></H1> <FORM ACTION="/Scripts/simple.pl" METHOD="post" > User Name:<INPUT TYPE="text" NAME ="uname" SIZE=30> <BR> Service Type:<SELECT NAME="service"><OPTION>CAS<OPTION>CDRS <OPTION>COPSAT<OPTION>DDS<OPTION>FDSS<OPTION>ISS <OPTION>OSS<OPTION>SAS<OPTION>DA </SELECT> <BR> <H4><NOBR>SUBJECT AREA:</H4> <INPUT TYPE="checkbox" NAME="agriculture" >Agriculture <INPUT TYPE="checkbox" NAME="biology" >Biology <INPUT TYPE="checkbox" NAME="biomedicine" >Biomedicine <INPUT TYPE="checkbox" NAME="chemistry" >Chemistry
9

<BR> <BR> <INPUT TYPE="radio" NAME="database">AGRIS <INPUT TYPE="radio" NAME="database">AHEAD <INPUT TYPE="radio" NAME="database">BIOSIS <INPUT TYPE="radio" NAME="database">CAB <BR> <BR> Date Entered:<INPUT TYPE="text" NAME ="entrydate" SIZE=10">(dd/mm/yyyy) <BR> <BR> <CENTER> <INPUT TYPE= "submit" VALUE="Submit Form"> <INPUT TYPE= "reset" VALUE="Clear Form"> <CENTER> </FORM> </BODY> </HTML>
10

CGI (Common Gateway Interface) Concepts

11

CGI, permits interactivity between a client and a host operating system through a World Wide Web via the Hyper Text Transfer Protocol (HTTP).

12

Writing CGI programs involves


Obtaining input from a user or from a data file. 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

Data are obtained in ENVIRONMENT variables. The ENVIRONMENT variables are shown below in the table

14

ENVIRONMENTVARIABLE

DESCRIPTION

SERVER_NAME

The server's Host name or IP address . The name and version of the serversoftware that is answering the client requests.

SERVER_SOFTWARE

The name and revision of the SERVER_PROTOCOL information protocol the request came in with. REQUEST_METHOD The method with which the information request was issued. The query information passed to the program. It is appended to the URL with a "?".
15

QUERY_STRING

ENVIRONMENTVARIABLE

DESCRIPTION

CONTENT_TYPE
CONTENT_TYPE

The MIME type of the query data, such The MIME type of as the query data, such as "text/html". "text/html".
The length of the data in bytes, passed to the CGI program through standard input.

The length of the data in bytes, passed CONTENT_LENGTH to the CGI program through standard input. GATEWAY_INTERFACE The revision of the CGI that the server uses.
CONTENT_LENGTH

The URL of the document that the HTTP_USER_AGENT The browser the clients is usingpoints to issue the request. client to before accessing the HTTP_REFERER CGI program.
HTTP_REFERER The URL of the document that the client points to before accessing the CGI program.

GATEWAY_INTERFACE

The revision of the CGI that the server uses. The browser the client is using to issue the request.
16

HTTP_USER_AGENT

CGI Interaction through HTML Forms

17

Web Browser and Web Server interaction

Suppose you embed the following hypertext link in an HTML document: <A HREF="TEST.HTML">TEST.HTML</A> If you were to click on this link, the browser would issue the following request to the Web server: GET /TEST.HTML HTTP/1.0 Accept: text/plain Accept: text/html Two blank lines
18

Web Browser and Web Server interaction Cont...


Each of these lines is referred to as a Header. No complete path of the file, so the Web Server would look TEST.HTML in servers Web-document root directory. Browser can accept plain text or HTMLformatted text files.
19

Server Response
HTTP /1.0 200 OK Date: Monday, 24-May-96 11:09:05 GMT Server: NCSA/1.3 MIME-version 1.0 Content-type: text/html Content-length: 231 <HTML> <HEAD> <TITLE>Test Page</TITLE> </HEAD> <H1>This is the sample document</H1> This is a test HTML page. </HTML>

Web browser then reads and displays the HTML portion of the file.

20

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 html form, 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

GET Method Cont


The continuous string of text that follows the question mark represents the query string. In response to this request from the browser, the server executes the script simple2.pl and places the string uname=Rani&service=CAS&entrydate= 26%2F11%2F1999, in the QUERY_STRING environment variable and HTTP/1.0 in SERVER_PROTOCOL CGI program reads these environment variables, process, and passes some results to Web Server
22

POST Method

Data from the form is encoded as string of data divided in NAME/VALUE pair and separated by &. In case of POST methods with the same html form it will generate the request

23

POST Method Cont


POST /Scripts/simple2.pl HTTP/1.0 Accept: text/html Accept: text/plain User-Agent: Content-type: application/ x-www-urlencoded Content-length: 28 uname=Rani&service=CAS&entrydate= 26%2F11%2F1999
24

POST Method Cont

With the post method, the server passes the information contained in the submitted form as standard input (STDIN) to the CGI program. CONTENT_LENGTH contains information about how much amount of data being transferred from html form.
25

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

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

You might also like