Internet intrarnet CIS class 7

HTML FormsA Method to Allow Users to Pass Information to a CGI Script Forms Allow Information to Be Entered Via: Text Fields Selectable Lists Checkboxes Radio Buttons Submit / Reset Butt

Internet / Intranet

CIS-536

Class 7

HTML Forms

A Method to Allow Users to Pass Information to a CGI Script

Forms Allow Information to Be Entered Via:

Text Fields

Selectable Lists

Checkboxes

Radio Buttons

Submit / Reset Buttons

Each Field Is Identified by a Name

Optional Default Value

E.g.

<INPUT TYPE=“Text” Name=“Field1” Value=“Default”>

<INPUT TYPE=“Submit” Value=“Click Here”>

HTML Forms (2)

Submit Button Sends Data to CGI Script

Name/Value Pairs Separated By &

METHOD = “GET”

Uses HTTP Get Method

Parameters are Sent in URL

“Command Line” Arguments Data Follows “?”

Easily Visible to Users Some Servers Truncate the URL

Passed to Perl as QUERY_STRING Environment Variable

METHOD = “POST”

Data is Sent in HTTP Message Body

Passed to Perl as stdin

ACTION=“URL”

Identifies the Target URL

ACTION =“mailto:xxx”

Data is Mailed to Target email Address

Example

Forms – Text Fields

Text Box: Type=Text

<INPUT Type=“Text” Name=“Field1” Value=“Default” Size=“15” Maxlength=“20”>

Size – Size of Text Box in Characters

Maxlength – The Maximum Number of

Characters Allowed

Type=Password

Same, Except User Input is Echoed as *’s

Note: Password is Still Sent to Server in Plain Text

Pwd Example

Example

Forms – Multiline Text Fields

Multiline Text

<TEXTAREA Name=“Fname” Value=“Default”

Rows=“5” Cols=“30” WRAP=“Virtual”>

Rows, Cols – The Size of the Field in Characters

Note: This Only Controls the Size of the Display Box.

Scroll Bars Allow More Data.

Wrap=Of

No Wrapping Horizontal Scroll Bar for Additional Text.

Wrap=Virtual, Physical

Wrap Text Based on Number of Columns Wrap=Virtual –Do Not Send Inserted Carriage Returns Wrap=Physical – Send Inserted Carriage Returns

Example

Forms – CheckBoxes and Radio

Buttons

Radio Buttons Allow Only One Option to Be

Selected

Checkboxes Allow Multiple Selections

<INPUT Type=“CheckBox” Name=“CB1” Value=“A” CHECKED>Pick1

<INPUT Type=“CheckBox” Name=“CB1” Value=“B”> Pick2

Name - Identifies the Grouping

Value – The Value Passed to the Server if This Item is Selected.

For Multiple Selections, Values are Concatenated

CHECKED – Indicates the Default Status is Checked

Examples:

If the User Checks Pick1:

Sent to Server: CB1=A

If the User Checks Pick1 and Pick2:

Sent to Server: CB1=AB

Forms – List Boxes

<SELECT Name=“LBox” Size=“5” Multiple=“5”>

<OPTION Value=“Choice1” >First Choice

<OPTION> Second Choice

</SELECT>

Size – The Number of Rows to Display

Access Additional Rows Via Scroll Bar

Size=1 Creates a Drop-Down List

Multiple – The Maximum Number of Items That Can Be Selected From List

Values are Concatenated When Sent to Server

Value – If Specified, This is Sent to Server When Row is Selected

Unspecified – Text in Row is Sent to Server as the Value

Example

Forms – Submit and Reset Buttons

Submit

<INPUT type=“submit” value=“press here to submit”>

Reset

<INPUT type=“reset” value=“press here to reset”>

Sets all Fields to Their Default Values

Example

Forms –Uploading Files

Allows a User to Upload Contents of a File Instead of Text

<INPUT Type=“File” Name=“FileField”>

Browser Displays a Text Field and a Browse Button to

Allow User to Select a File

If the Form has ENCTYPE=“multipart/form-data”

Contents of File Are Uploaded in This Field

Else

The Filename is Uploaded in This Field

BE CAREFUL!

Can Be a Security Hole if Uploaded Files are Stored in Web Accessible Directories

Accidentally Selecting a Large File Can Afect Performance

Example

Forms – Hidden Fields

Allows You to Create “Variables”

Passed to Server as if Entered By User

Not Displayed to User in Form

Fully Visible in the HTML

Therefore, Not For Sensitive Info (e.g Passwords)

<INPUT Type=“Hidden” Name=“HidVar”

Value=“Myval”>

Example

Forms – Image Maps

<INPUT Type=“Image” NAME=“imb”

SRC=“button.jpg”>

Similar to a Submit Button

Graphic is Displayed as Button

Also Passes the Coordinates Where User Clicks

Server Can Process Coordinates

(Server Side Image Maps)

Example

HTML Extensions for Forms

“Tool Tips”

TITLE Attribute on Form Tags

Label Associated With Form Entry

User Can Click On Label to Select Entry Field

<LABEL FOR=“TextID”>Enter Name: </LABEL>

<INPUT TYPE=“Text” ID=“TextID” Name=“Tname”>

Shortcuts

Alt-Character selects Entry Field

ACCESSKEY=“X”

Tab Order

TABINDEX=3

Negative Number Excludes Field From Tab Order

FieldSet

Groups Controls Together (Outline Box)

<Legend> Adds Text To Outline Box

Document Object Model: Forms

Properties

action – The URL Where Form Will be Submitted

length – The Number of Elements in the Form

method – “Get” or “Post”

name – Name as Specified by Name Attribute

target – If in a Frame, the Target Frame Name

Methods

reset() – Reset the Form

submit() – Submit the Form

Objects

elements[] – Array of input elements in the form.

Events

onReset

onSubmit

Return false to Prevent Submission

Validating Forms Using JavaScript

Example

Server Side Includes

.shtml Extension By Convention

Not Enabled on All Servers

<! #ssi-directive param=“value” >

Server Side Include Directives:

echo – print certain variables

DOCUMENT_NAME

DOCUMENT_URI

DATE_LOCAL

DATE_GMT

LAST_MODIFIED

include – Include Another File

fsize, flastmod – File Size, Last Modified Date of a Specified File

exec – Execute a System Shell Command

cgi – Execute a CGI script

config – Adjust Error, Day/Time Formats

Example

CGI / Scripting

Scripts are Programs Run By the Server

CGI – Common Gateway Interface

Methodology For Server/Script Communication

Can Be Written in Any Language Supported By the Server UNIX Origins

PERL is Most Common Script Output is Returned to the Browser

Alternative Methodologies Exist

CGI is the Most Portable

PERL – Practical Extraction and Reporting Language

UNIX Based Scripting Language

Ported to Multiple Platforms

How Does Browser Know to Execute a Program?

Program is in a Script Directory

Typically cgi-bin (Apache)

Or By Extension (e.g .pl, cgi)

Scripts Must Have Executable Permissions

Scripting Features

Scripts Can Have Input Parameters

Passed as Part of URL : ? Argument (Query String)

Special Characters Passed as % Ascii Hex Values

Name/Value Pairs : Separated by &

Variable Passed in HTTP Header

Name/Value Pairs

Method = Post

HTML Forms

Passed in Cookies

Netscape Origins, Now Widely Adopted

Name/Value Pairs Associated With a URL

Stored on Client Computer

Users May Turn of Cookies

Scripts Must Be Aware of How Parameters are Being Passed

Diferent Methodology to Access Each Method

Parameters Also Used to Maintain State Information

Help Track a “Session”

Scripting Issues

Security Concerns

No Limits on What CGI Scripts May Access

Potential to Execute Any System Command

Hacker Can Cause Serious and Unforeseen Problems Potential to Afect More Than Just Your Web Site

Many ISP’s Limit CGI Capabilities

Performance Concerns

CGI Scripts are Run as a Standalone Process

E.g Interpreter is Loaded and Initialized Each Time

Alternative to Posting Forms

Mailto Option

Why Should I Learn Perl?

S/W Engineers Need to Be Adept at Picking Up New

Languages

Need a “Comfort Level” of Expertise

Ability to Write Basic Code Ability to View/Modify Existing Code Ability to Learn More as Needed

Develop Reference “Library”

Develop “Guru” Network

Large Public Archives of Perl Scripts

Perl Basics

Interpreted

Originally Used Primarily By UNIX Sys-Admins

“Public Domain”

The preferred language for CGI Scripts

PERL is Relatively Portable

Activestate ActivePerl (Windows / IIS)

UNIX specific scripts dominate (Uses UNIX O/S Commands)

In Class Exercise

Create a Basic Form

Use action=“mailto: xxx” to mail the form result to yourself