1 Forms for the Web Tom Muck

2 Introduction Forms are a way to pass name/value pairs to the server Forms can be built in HTML or Flash Concept is the same – execution is different

3 What makes a great form? Make it easy for the user Get the information once Move the user through the site quickly Get the information accurately End the experience

4 The HTTP Protocol Stateless environment –Cookies –Sessions

5 Web Servers/Application Servers What’s the difference? How it fits together Adding a Database tier Text

6 HTML or Flash forms Similar concept and execution Which do you use?

7 Beginning with HTML Forms Form tag in HTML 2 necessary elements –Method (get or post) –Action (page)

8 Methods -- GET Uses the query string Standard text/html MIME header (enctype) Not as secure as Post Limited to a specific length, depending on browser. (between characters) Can be bookmarked and indexed Can be manipulated by the user

9 Methods -- 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

10 Action 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 approach Can also be made variable, or hold a special value

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

12 Validation Client side Server side Database level

13 Client-side Validation Advantages –User-friendly –Avoids unnecessary server processing –Easily programmed with JavaScript –Easily added to Dreamweaver pages with Behaviors

14 Client-side Validation Disadvantages –Can be disabled by paranoid user –Can be disabled by malicious user NOT 100% reliable solution Good for the 1 st wave of attack. Eliminate 90% of the bad data.

15 Server-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

16 Server-side Validation Disadvantages –Requires a trip to the server –Eats up server processing time –Requires good knowledge of server-side coding Use for 2 nd wave of attack

17 At the Database Level Advantages –Last stop for data -- catch bad data before it goes in –Quick and efficient Coded directly into the database schema

18 At the Database Level Disadvantages –Needs server-side logic to handle errors –Not easily coded by the Web programmer Use for the 3 rd and final wave of attack

19 Displaying Server-side content in 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

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

21 Flash 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

22 Flash Forms -- Validation Validation routines built in ActionScript Better than JavaScript -- can’t be turned off Numerous JavaScript examples can be adapted easily No built-in validations

23 Summary HTML and Flash: different ways to accomplish the same thing Different methods of validation: no “best” way. Q & A

24 Where to Get More Information Dreamweaver MX: The Complete Reference, by Ray West and Tom Muck