Styling Web Forms

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

Web Forms TrainingCourse 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).

Web Forms TrainingCourse Contents

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 TrainingCourse Schedule

Web Forms TrainingFurther Details

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.