HTML Doing it Right

1
HTML / Doing it Right

• There are two topics well cover today
• HTML Forms (F15 Warranty Registration)
• Page Design Tips (Doing it Right)

2
HTML Forms

• Forms support data entry via widgets
• Types of widgets
• Selection Lists (One choice from a fixed list)
• Check Boxes (Multiple choices from a fixed list)
• Text Entry
• Buttons
• Reset / Submit Buttons
• Collect variables to process via Javascript

3
HTML Forms

• Definition of form controlled by tag pair
• ltformgt
• Standard HTML text to prompt user
• Widgets to collect input from user
• But NOT another ltformgt lt/formgt
• lt/formgt
• Some widgets invoke JavaScript functions

4
Form Attributes

• ltform name "F15 Warranty Registration"
  method"post" actionURL of Server"gt
• Name identifies type of form to the server
• Method is how to submit (post email)
• Action identifies server to process form
• We wont actually send form to a server!

5
Form Widgets

• Selection List
• Which model of the F-15 did you purchase?
• ltselect name"Model"gt
• ltoption value"fighter"gtFighterlt/optiongt
• ltoption value"bomber"gtBomberlt/optiongt
• ltoption value"unknown" selectedgt
• (Choose One)lt/optiongt
• lt/selectgt
• Model.value is set equal to the chosen selection

6
Form Widgets

• Check Boxes
• Which activities do you and your family enjoy?
  (Check all that apply)ltbrgt
• ltinput type"checkbox" name"Assas"gtAssassinatio
  nsltbrgt
• Assas.checked is set to true or false based
  on a check in the corresponding box

7
Form Widgets

• Text box (shows text while typing)
• Your name (or nom de guerre, if applicable)
• ltinput type"text" nameText" size20gt
• Text.value is set equal to the text entered
• Password box (shows while typing)
• ltinput typepassword namePasswdgt
• Passwd.value is set equal to the text entered

8
Form Widgets

• Buttons / Events
• ltinput type"button" value"Submit Form"
  onClickJavaScript statement "gt
• AND/OR
• onMouseOver JavaScript statement "gt

9
Navigating Between Pages

• Widgets for Back/Home/Forward Buttons
• ltformgt
• ltinput type"button" value"Back"
  onClick"history.back()"gt
• ltinput type"button" value"Home"
  onClick"locationindex.html"gt
• ltinput type"button" value"Next"
  onClick"history.forward()"gt
• lt/formgt

10
Form Widgets

• Reset Button
• ltinput type"reset" name"Reset Form"gt
• Resets entered data so user can start over
• Submit Button
• ltinput typesubmitgt
• Submits the form according to the method and
  action specified in the form attributes

11
Doing it Right

• Desirable Application Characteristics
• Fully functional for its intended purpose
• Seamless interaction between applications
• The user should feel in control of the computer,
  not the other way around
• Responsiveness
• Permissiveness
• Consistency

12
Doing it Right

• Responsiveness
• Each user action has a direct visible result
• User doesnt need to plan out how to use page
• Permissiveness
• User can do anything reasonable (meaning from
  his/her point of view)
• Consistency
• User follows same rules as other similar pages

13
Books Top 10 Page Design Tips

• Use standard HTML
• Avoid browserspecific features
• Use restraint with colors and backgrounds
• Some colors just dont work well together
• Avoid big stuff
• Page download time may cause user to leave site
• Make Navigation easy
• Provide many ways to move around ? even
  duplicates
• Dont blink
• Talk about irritating. Also, may be mistaken for
  an ad

14
Books Top 10 Page Design Tips

• Make reading easy on the eyes
• Dont make lines too wide to read comfortably
• Avoid Profanity
• Obvious, but also libel laws apply in cyberspace
• K.I.S.S
• Keep It Simple, Stupid ?Use it and keep evolving
  it
• Eddit!
• For sum reason, peeple dislike bad speling and
  grammer
• Verify your pages
• Test, Test, Test again. Bugs will make users go
  away