Web Form Design

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

Web Forms Design Training Course 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:

Course contents — 1 HTML forms — intro

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

Course contents — 2 Form structure/organisation

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

Course contents — 3 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

Course contents — 4 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

Course contents — 5 HTML5 form features

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

Course contents — 6 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

Course contents — 7 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

Course contents — 8 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

Course contents — 9 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

Course contents — 10 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

Course contents — 11 Advanced Nav & 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

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.