The Motive Web Design Glossary

forms

Forms are the cornerstone of web-based interaction using X(HTML). They are used anywhere information is collected from users. For example, forms are commonly used to:

• subscribe to email newsletters;
• provide shipping and shopping details for e-commerce;
• conduct online surveys;
• support e-learning activities (quizzes, tests, etc.).

Related terms: (web) accessibility, form validation, interface.

References and further reading

• 140 buttons (Dragnet Webbyrå)
  A compilation of 140 different graphical button designs.
• Accessible forms (HTML Dog)
  Labels, fieldsets and legends, options groups, tab stops and access keys.
• Accessible, Stylish Form Layout (The Man in Blue)
  CSS-based form layout examples and notes.
• Accessible & usable forms: Guidelines, examples and JavaScript tricks (Web Semantics)
  Guideline-based research into form accessibility, usability and web standards. Includes form-element interface conventions, e.g. when to use a checkbox, radio button, etc.
• Aligning text-field form elements with their labels (Mark Newhouse, Real World Style)
  Form layout without tables.
• Asynchronous JavaScript + XML (AJAX): A new approach to web applications (Jesse James Garrett, Adaptive Path)
  Using emerging technologies to enable stateless interaction.
  • AJAX and accessibility (Standards Schmandards)
    Usability and accessibility implications of updating form content using JavaScript.
• Better accessible forms (Accessify)
  Article on designing forms for speech-only browsers including Examples of form input marked up with <label> elements.
• Closed question response categories (Jessica Enders, Formulate Information Design)
  5 Aug 2008: Exploring the content-side of form design: formulating closed question responses (typically represented by multi-choice list/radio buttons, select lists, etc.). Proposes that closed question responses should be: appropriate, complete, self-explanatory, mutually exclusive, and unbiased.
• Creating accessible forms (Web AIM)
  Considering keyboard access and use of screen readers when marking-up forms.
• Do forms work in HTML emails? (Mark Wyner, Campaign Monitor)
  7 Nov 2007: Survey of web-mail and desktop email client handling of form: display and functionality. Summary: support for HTML forms in email is, at best, ‘patchy’.
• Fieldsets, legends and screen readers (Steve Faulkner, The Paciello Group)
  22 Nov 2007: Although the W3C has provided recommendation on how assistive technologies should use the fieldset and legend elements to group and describe related form controls, implementation of the recommendation by software developers is patchy.
• Fight over ‘forms’ clouds future of Net applications (Paul Festa, ZDNet)
  17 Feb 2005: Emerging standards for next-generation electronic forms.
• Forms and Interaction (Joe Clark)
  Keeping accessibility issues in mind when creating forms. (Sample chapter from Building Accessible Websites.)
• Form field label (Web Design Group)
  An HTML 4.0 element that improves form accessibility.
• Fun with forms (Picment.com)
  Using CSS to style form elements.
• Getting your forms in shape (Crista Earl and Elizabeth Neal, Access World)
  Pointers on creating accessible forms.
• Label placement in forms (Matteo Penzo, UX Matters)
  Usability evaluation (using eyetracking technology), of the impact that label placement, text alignment and font-weight has on the time it takes to fill out a web form.
• The name riddle (Formulate Information Design)
  Considering non-Western names when designing forms.
• Styling form controls revisited (456 Berea Street)
  9 Jan 2007: Screen grabs from a range of web browsers showing how CSS rules can be used (and in some cases cannot be used), to style form element; borders, background colours, etc.
• Tabbing between form controls in Firefox/Mac (Robert Nyman)
  Tweaking your System Preferences to enable full keyboard access.
• Online survey design guide (HCI Laboratory, University of Maryland)
  Design guidelines and principles for web-based surveys based on a Human-Computer Interaction (HCI) approach.
• pForm: Online HTML form builder (Appnitro)
• Web application form design (Luke Wroblewski)
  Exploring methods of visually unifying a label with its corresponding form element (e.g. through alignment, location, etc.) to support effective user interaction.
• Web usability: Accessible forms (Web Usability)
  Assistive Technologies. Labels. Use of tables for layout. Grouping elements. Tab order. JavaScript and device independence.
  

Motive Web Design Glossary Trivia