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
