www.dwteam.com1

Forms for the WebForms for the WebTom Muckwww.dwteam.com

www.dwteam.com2

Introduction Introduction

Forms are a way to pass name/value pairs to the server

Forms can be built in HTML or FlashConcept is the same – execution is

different

www.dwteam.com3

What makes a great form?What makes a great form?

Make it easy for the userGet the information onceMove the user through the site quicklyGet the information accuratelyEnd the experience

www.dwteam.com4

The HTTP ProtocolThe HTTP Protocol

Stateless environment – Cookies– Sessions

www.dwteam.com5

Web Servers/Application Web Servers/Application ServersServersWhat’s the difference?How it fits togetherAdding a Database tier

Text

Text

Text

TextText

Text

Text

TextText

www.dwteam.com6

HTML or Flash formsHTML or Flash forms

Similar concept and executionWhich do you use?

www.dwteam.com7

Beginning with HTML FormsBeginning with HTML Forms

Form tag in HTML2 necessary elements

– Method (get or post)– Action (page)

www.dwteam.com8

Methods -- GETMethods -- GET

Uses the query stringStandard text/html MIME header (enctype)Not as secure as Post Limited to a specific length, depending on

browser. (between 1000-2000 characters) Can be bookmarked and indexed Can be manipulated by the user

www.dwteam.com9

Methods -- POSTMethods -- POST

More secure– application/x-www-form-urlencoded MIME

header (default enctype) – Can’t be altered easily

Not limited in length like GET Cannot be bookmarked or indexed Can be submitted again and again by an

impatient user

www.dwteam.com10

ActionAction

Can be the same page or a different page – On the same page -- the way Dreamweaver

MX code operates – On a different page in a “classic” two-page

approachCan also be made variable, or hold a

special value

www.dwteam.com11

The Dreamweaver environmentThe Dreamweaver environment

Creating a form Form elements Other HTML elements Adding a table to hold the form Adding images as submit buttons

www.dwteam.com12

ValidationValidation

Client sideServer sideDatabase level

www.dwteam.com13

Client-side ValidationClient-side Validation

Advantages– User-friendly– Avoids unnecessary server processing– Easily programmed with JavaScript– Easily added to Dreamweaver pages with

Behaviors

www.dwteam.com14

Client-side ValidationClient-side Validation

Disadvantages– Can be disabled by paranoid user– Can be disabled by malicious user

NOT 100% reliable solutionGood for the 1st wave of attack. Eliminate

90% of the bad data.

www.dwteam.com15

Server-side ValidationServer-side Validation

Advantages– Can’t be disabled by the user – Can’t be seen by the user – Easily programmed with server-side code– Easily added to Dreamweaver pages with third

party Server Behaviors

www.dwteam.com16

Server-side ValidationServer-side Validation

Disadvantages– Requires a trip to the server– Eats up server processing time– Requires good knowledge of server-side

codingUse for 2nd wave of attack

www.dwteam.com17

At the Database LevelAt the Database Level

Advantages– Last stop for data -- catch bad data before it

goes in– Quick and efficient

Coded directly into the database schema

www.dwteam.com18

At the Database LevelAt the Database Level

Disadvantages– Needs server-side logic to handle errors– Not easily coded by the Web programmer

Use for the 3rd and final wave of attack

www.dwteam.com19

Displaying Server-side content Displaying Server-side content in Form Fieldsin Form Fields Use the appropriate server-side or client-

side constructs – Form data – Cookie data – Database content

Use the Bindings panel – underused panel in Dreamweaver – “Bind” form elements to data

www.dwteam.com20

Bindings PanelBindings Panel

Use the Bindings panel – underused panel in Dreamweaver

“Bind” form elements to data

www.dwteam.com21

Flash FormsFlash Forms

Same protocols as HTML -- get and post Same logic

– User fills in form fields– Validate the fields– Submit the form– Process on the server– Return any results

www.dwteam.com22

Flash Forms -- ValidationFlash Forms -- Validation

Validation routines built in ActionScriptBetter than JavaScript -- can’t be turned

offNumerous JavaScript examples can be

adapted easilyNo built-in validations

www.dwteam.com23

SummarySummary

HTML and Flash: different ways to accomplish the same thing

Different methods of validation: no “best” way.

Q & A

www.dwteam.com24

Where to Get More InformationWhere to Get More Information

www.dwteam.comwww.macromedia.com/desdevwww.dwfaq.comwww.macromedia.com/extensionsDreamweaver MX: The Complete

Reference, by Ray West and Tom Muck