Styling Web Forms

1-day Web Design Course in CSS3 for Web Forms — FCS

Web Forms Training Course Overview

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

As such, the course allows students to deploy the very latest form design features of CSS3 and HTML5, while providing the maximum functionality and presentational effects available in older, or less feature-full, web browsers … going back well beyond IE6.

So, if you want tabbed multi-part forms with shadows, gradients, and CSS3 tranforms, we'll teach you how to create them while still capturing input from, and interacting, with browsers that know nothing of such features.

Like all of our CSS training, this CSS course is fully (W3C) web standards compliant and cross-browser compatible — including WAI-ARIA accessibility.

When paired with our HTML5 Web Forms course (HTML5-06) it forms the second day of our 2-day Web Forms Design training course (HTML5-05).

Course contents — 1 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 — 2 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 — 3 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 — 4 Form navigation & 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 html forms training course, you will be able to:

Create web forms with identical cross-browser basic functionality
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
Graphic designers with web design experience
Front-end web developers and programmers
Back-end web developers and programmers

Training Pre-requisites

These 3 web design courses — or equivalent experience — plus some knowledge of 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:

We recommend that prospective students of this course check their existing knowledge against the forms-related contents listings for those 2 courses — just to ensure that they are not completely surprised by sample code that is provided with exercises on this course.

Training Style

This CSS3 training course is among our most hands-on, practical, courses. Up to 50%, and often more, of the class contact time is devoted to hands-on practical exercises.

We expect all the HTML5, CSS3, and jQuery code written during the course to be hand-coded — although pre-prepared example code is often provided with exercises, to avoid wasting time on off-topic coding.