Forms for the Web

Tom MuckTom Muck

www.dwteam.comwww.dwteam.com

Introduction

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

• Forms can be built in HTML or Forms can be built in HTML or FlashFlash

• Concept is the same – execution is Concept is the same – execution is differentdifferent

What makes a great form?

• Make it easy for the userMake it easy for the user• Get the information onceGet the information once• Move the user through the site Move the user through the site

quicklyquickly• Get the information accuratelyGet the information accurately• End the experienceEnd the experience

The HTTP Protocol

• Stateless environmentStateless environment CookiesCookies

SessionsSessions

Web Servers/Application Servers

• What’s the difference?What’s the difference?• How it fits togetherHow it fits together• Adding a Database tierAdding a Database tier

App server

DatabaseWeb server

HTML or Flash forms

• Similar concept and eSimilar concept and executionxecution• Which do you use?Which do you use?

Beginning with HTML Forms

• Form tag in HTMLForm tag in HTML• 2 necessary elements2 necessary elements

Method (get or post)Method (get or post)

Action (page)Action (page)

Methods -- GET

• Uses the query stringUses the query string• Standard text/html MIME header Standard text/html MIME header

(enctype)(enctype)• Not as secure as Post Not as secure as Post • Limited to a specific length, depending Limited to a specific length, depending

on browser. (between 1000-2000 on browser. (between 1000-2000 characters) characters)

• Can be bookmarked and indexed Can be bookmarked and indexed • Can be manipulated by the user Can be manipulated by the user

Methods -- POST

• More secureMore secure application/x-www-form-urlencoded application/x-www-form-urlencoded

MIME header (default enctype)MIME header (default enctype) Can’t be altered easilyCan’t be altered easily

• Not limited in length like GETNot limited in length like GET • Cannot be bookmarked or indexedCannot be bookmarked or indexed • Can be submitted again and again Can be submitted again and again

by an impatient userby an impatient user

Action

• Can be the same page or a Can be the same page or a different pagedifferent page On the same page -- the way On the same page -- the way

Dreamweaver MX code operatesDreamweaver MX code operates

On a different page in a “classic” two-On a different page in a “classic” two-page approachpage approach

• Can also be made variable, or hold Can also be made variable, or hold a special valuea special value

The Dreamweaver environment

• Creating a formCreating a form • Form elementsForm elements • Other HTML elementsOther HTML elements• Adding a table to hold the formAdding a table to hold the form• Adding images as submit buttonsAdding images as submit buttons

Validation

• Client sideClient side• Server sideServer side• Database levelDatabase level

Client-side Validation

• AdvantagesAdvantagesUser-friendlyUser-friendly

Avoids unnecessary server processingAvoids unnecessary server processing

Easily programmed with JavaScriptEasily programmed with JavaScript

Easily added to Dreamweaver pages Easily added to Dreamweaver pages with Behaviorswith Behaviors

Client-side Validation

• DisadvantagesDisadvantagesCan be disabled by paranoid userCan be disabled by paranoid user

Can be disabled by malicious userCan be disabled by malicious user

• NOT 100% reliable solutionNOT 100% reliable solution• Good for the 1Good for the 1stst wave of attack. wave of attack.

Eliminate 90% of the bad data.Eliminate 90% of the bad data.

Server-side Validation

• AdvantagesAdvantagesCan’t be disabled by the userCan’t be disabled by the user

Can’t be seen by the userCan’t be seen by the user

Easily programmed with server-side Easily programmed with server-side codecode

Easily added to Dreamweaver pages Easily added to Dreamweaver pages with third party Server Behaviorswith third party Server Behaviors

Server-side Validation

• DisadvantagesDisadvantagesRequires a trip to the serverRequires a trip to the server

Eats up server processing timeEats up server processing time

Requires good knowledge of server-Requires good knowledge of server-side codingside coding

• Use for 2Use for 2ndnd wave of attack wave of attack

At the Database Level

• AdvantagesAdvantagesLast stop for data -- catch bad data Last stop for data -- catch bad data

before it goes inbefore it goes in

Quick and efficientQuick and efficient

• Coded directly into the database Coded directly into the database schemaschema

At the Database Level

• DisadvantagesDisadvantagesNeeds server-side logic to handle errorsNeeds server-side logic to handle errors

Not easily coded by the Web Not easily coded by the Web programmerprogrammer

• Use for the 3Use for the 3rdrd and final wave of and final wave of attackattack

Displaying Server-side content in Form Fields

• Use the appropriate server-side or Use the appropriate server-side or client-side constructsclient-side constructs Form dataForm data Cookie dataCookie data Database contentDatabase content

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

Bindings Panel b

• Use the Bindings panel – Use the Bindings panel – underused panel in Dreamweaver underused panel in Dreamweaver

• ““Bind” form elements to dataBind” form elements to data

Flash Forms

• Same protocols as HTML -- get and Same protocols as HTML -- get and postpost

• Same logicSame logicUser fills in form fieldsUser fills in form fields

Validate the fieldsValidate the fields

Submit the formSubmit the form

Process on the serverProcess on the server

Return any resultsReturn any results

Flash Forms -- Validation

• Validation routines built in Validation routines built in ActionScriptActionScript

• BBetter than JavaScript -- can’t be etter than JavaScript -- can’t be turned offturned off

• Numerous JavaScript examples can Numerous JavaScript examples can be adapted easilybe adapted easily

• No built-in validationsNo built-in validations

Summary

• HTML and Flash: different ways to HTML and Flash: different ways to accomplish the same thingaccomplish the same thing

• Different methods of validation: no Different methods of validation: no “best” way. “best” way.

• Q & AQ & A

Where to Get More Information

• www.dwteam.comwww.dwteam.com• www.macromedia.com/desdevwww.macromedia.com/desdev• www.dwfaq.comwww.dwfaq.com• www.macromedia.com/extensionswww.macromedia.com/extensions• Dreamweaver MX: The Complete Dreamweaver MX: The Complete

Reference, by Ray West and Tom Reference, by Ray West and Tom MuckMuck