Download Can be manipulated by the user

Forms for the Web
Tom Muck
www.dwteam.com
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
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
The HTTP Protocol
• Stateless environment
Cookies
Sessions
Web Servers/Application
Servers
• What’s the difference?
• How it fits together
• Adding a Database tier
Database
Web server
App
server
HTML or Flash forms
• Similar concept and execution
• Which do you use?
Beginning with HTML Forms
• Form tag in HTML
• 2 necessary elements
Method (get or post)
Action (page)
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 1000-2000 characters)
• Can be bookmarked and indexed
• Can be manipulated by the user
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
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
The Dreamweaver
environment
•
•
•
•
•
Creating a form
Form elements
Other HTML elements
Adding a table to hold the form
Adding images as submit buttons
Validation
• Client side
• Server side
• Database level
Client-side Validation
• Advantages
User-friendly
Avoids unnecessary server processing
Easily programmed with JavaScript
Easily added to Dreamweaver pages with
Behaviors
Client-side Validation
• Disadvantages
Can be disabled by paranoid user
Can be disabled by malicious user
• NOT 100% reliable solution
• Good for the 1st wave of attack.
Eliminate 90% of the bad data.
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
Server-side Validation
• Disadvantages
Requires a trip to the server
Eats up server processing time
Requires good knowledge of server-side
coding
• Use for 2nd wave of attack
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
At 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
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
Bindings Panel b
• Use the Bindings panel – underused
panel in Dreamweaver
• “Bind” form elements to data
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
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
Summary
• HTML and Flash: different ways to
accomplish the same thing
• Different methods of validation: no
“best” way.
•Q&A
Where to Get More
Information
•
•
•
•
•
www.dwteam.com
www.macromedia.com/desdev
www.dwfaq.com
www.macromedia.com/extensions
Dreamweaver MX: The Complete
Reference, by Ray West and Tom Muck