HTML5 Forms
1-day Web Design Course in Coding HTML5 Forms — FH5
HTML5 Forms Training Course Overview
This HTML5 course enables students to code highly usable, and fully-accessible, web forms taking full advantage of the new form elements and attributes in HTML5.
As such, the course allows students to deploy the very latest form design features of HTML5 and CSS3, while providing all the functionality available in legacy, or less feature-complete, browsers … going back to IE6 and even earlier.
So, if you want to produce multi-part forms using tabs, client-side validation, autocomplete, required fields, etc., we'll show you how to build them while remaining fully functional in the HTML4.01/XHTML generation of web browsers.
Although the overwhelming majority of this course is devoted to HTML5-specific web form coding, the earlier modules also cover generic form design best practice — i.e. independent of any particular HTML/XHTML version.
As with our other HTML5 training, this HTML5 course is fully (W3C) web standards compliant and cross-browser compatible — including WAI-ARIA functionality.
When paired with our Styling Web Forms course (CSS3-05) this HTML5 course forms the first day of our 2-day Web Forms Design training course (HTML5-05).
Course contents — 1 HTML forms — intro
- Forms matter — gateways for users and income
- Form structure and organisation
- Basic form interactivity
- Dynamic forms
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 HTML5 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.
- Using the output element to show the results of a calculation
- Designing HTML5 Forms for mobile
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.
Target Audience
- Experienced web designers
- Front-end web developers and programmers
- Back-end web developers and programmers
Training Pre-requisites
These 2 web design courses — or equivalent experience:
Our HTML5 Essentials course (HTML5-01) provides a useful overview of the new features in HTML5 as a whole — although it is not explicitly required for this course.
If you intend to take this course along with our Styling Web Forms course CSS3-05, we recommend that you scan the contents listings for CSS3 Essentials (CSS3-01) — just to check that you have some basic familiarity with the CSS3 provided in sample code for the exercises on that course.
Training Style
This HTML5 training is very intensive and very much a hands-on, practical, course. Up to 40%, and often more, of the lesson time is devoted to hands-on practical exercises.
We expect you to code the HTML5 markup by hand — although pre-prepared example code is typically provided with exercises, to avoid wasting time on less relevant markup, styling or content.