Web Form Design

2-day web design course in HTML5 forms with CSS3 — HTML5-05

Web Forms Design TrainingCourse Overview

This advanced web design course enables students to create attractive, highly usable, and fully-accessible web forms on top of robust and reliable HTML5 functionality.

The course encourages students to deploy leading-edge web form design techniques from HTML5 and CSS3, while ensuring maximum functionality and design effects in older, or less capable, web browsers … going back as far as IE6 and beyond.

So, if you want tabbed, multi-part, dynamic web forms with shadows, gradients, and CSS3 tranforms, we'll teach you how to do so, while continuing to capture input from, and providing feedback to, browsers that were released over a decade ago.

Like all of our web design training, this CSS3/HTML5 course fully supports (W3C) web standards is cross-browser compatible — including WAI-ARIA.

This 2-day web design course combines the following 1-day courses:

Web Forms Design TrainingCourse Contents

HTML forms — introduction and overview

  • Forms matter — gateways for users and income
  • Form structure and organisation
  • Basic form interactivity
  • Dynamic forms
  • HTML5 forms — overview of what's new and transition issues

Structure and organisation — of web forms

  • Form conversion — factors that influence it
  • Length — e.g. no. of HTML form fields
    • Keep, cut, or postpone
  • Organisation — single page vs. multi-page vs. dynamic
  • Structure — of web forms
  • Paths — through html forms
  • Tabbing — through web forms
  • Labelling — HTML form labels
  • Help — web form tooltips and asides
  • Required fields — in HTML forms
  • Accessibility

Interactivity — in HTML forms

  • Form input types
  • Sensible defaults
  • Masking unnecessary form components
  • Adding web form inputs
  • Selection-based html form inputs
  • Form actions
  • HTML form validation — server side
  • Error messages — in web forms
  • Success messages — in HTML forms
  • Accessibility

Dynamic web forms

  • Web form validation — client side
  • Combining client and server form validation
  • HTML forms — in responsive web design
  • Dynamically re-selecting form components
  • Dynamically constructing form paths
  • Fallbacks — from HTML5 form mark-up
  • Fallbacks — from JavaScript dependency
  • Notification of dynamic changes — WAI-ARIA

New features in HTML5 web forms

  • Using the autofocus attribute to activate a default form field
  • Using the autocomplete attribute to enhance usability
  • Using placeholder data in form controls
  • Using the pattern attribute to constrain data entry
  • Using the novalidate attribute on submit buttons
  • Using required fields
  • Using HTML5's text selection APIs

Using the new HTML5 type attributes

  • Creating a search box
  • Capturing and validating email addresses
  • Capturing web addresses
  • Capturing phone number input
  • Formatting numerical input — numbers
  • Capturing numerical ranges
  • Creating a date picker
  • Creating a color picker

Using the new HTML5 form elements

  • Using the datalist element to suggest inputs
  • Creating a progress bar — using the progress element
  • Using the meter element to values within a range — max-min, high-low, optimum, etc.
  • Displaying the results of a calculation
  • Using the output element to show the results of a calculation
  • Designing HTML5 Forms for mobile

Basic Element Styling

  • Cross-browser form element normalisation
  • CSS3 gradients and textured backgrounds
  • Bulletproof CSS3 radial glow
  • Using CSS3 web fonts in forms
  • Customised input fields
  • Styling text fields
  • Styling form labels
  • Customised submit buttons
  • Customised radio buttons
  • Customised check boxes
  • Customised select fields

Web Form Layout

  • Styling web forms as lists
  • Chunking (grouping) and styling web forms in fieldsets
  • Styling web form controls as CSS Floats
  • Styling web form fieldsets as CSS Floats
  • Styling form elements and fieldsets with CSS positioning

Web Form Design for Mobile

  • Responsive web design for forms
  • CSS3 media queries for web form design
  • Identifying and modifying the viewport
  • Resizing and re-ordering form components

Advanced Form Navigation and Validation

  • Planning form navigation
  • Styling navigation between form fieldsets
  • Styling tabbed form navigation with CSS-only
  • Styling form navigation tabs with jQuery and CSS
  • Styling validation feedback with CSS — invalid, valid, required

Web Forms Design TrainingCourse Schedule

Web Forms Design TrainingFurther Details

Course Objectives

On completion of this HTML5 web forms design course, you will be able to:

  • Structure and organise web forms — to meet user and site/application needs
  • Provide conditional and dynamic form interaction — for user convenience
  • Label, explain and provide feedback for user inputs
  • Perform client-side form validation — with server-side validation fallbacks
  • Deploy new HTML5 form features — with legacy browser fallbacks — e.g.
    • Autofocus, autocomplete, placeholder, required, pattern attributes, text selection, etc.
  • Deploy new HTML5 form attributes — with legacy browser fallbacks — e.g.
    • Search boxes, email, urls, phone, numbers and ranges, dates, colour selection, etc.
  • Deploy new HTML5 form elements — with legacy browser fallbacks — e.g.
    • Datalist, progress, meter, output, etc.
  • Create web forms with identical cross-browser styling — when technically possible
  • Create forms with progressive enhancement for advanced/modern web browsers
  • Create web form designs which gracefully degrade
  • Use responsive web design to create forms for mobile and non-desktop media
  • Customise form text using web fonts, column/baseline grids, horizontal/vertical rhythm
  • Customise web form controls — text boxes/areas, buttons, radio, check boxes, select fields
  • Create chunked/grouped web forms — that allow easy user progression and input
  • Layout web forms using list markup, floats, positioning — and flexbox where possible
  • Style dynamic web forms as well as static ones
  • Style form feedback as well as form input
  • Integrate CSS-based styling and interactivity with jQuery and JavaScript solutions
  • Provide attractive and useful form labels and help text

Target Audience

  • Experienced web designers
  • Front-end web developers and programmers
  • Back-end web developers and programmers
  • Graphic designers with good technical web design experience

Training Pre-requisites

These 2 web design courses — or equivalent experience — plus some knowledge of HTML5 and CSS3:

The following 2 courses provide more than the basic HTML5 and CSS3 knowledge needed for this one — so they are not explicit pre-requisites:

However, we suggest that prospective students of this course should check their existing knowledge of HTML5 and CSS3 against the forms-related contents listings for those 2 courses — to make sure that they are not intimidated by sample HTML5/CSS3 code in exercises for this course.

Training Style

This CSS3 and HTML5 training course is very hands-on, and very intensive. Up to 40%, and often more, of the learning time is committed to hands-on practical exercises.

HTML5, CSS3, and jQuery code written during course exercises will be, typically, hand-coded — although pre-prepared example code wil be provided to avoid time-wasting on less pertinent technique.