HTML5 Forms TrainingCourse Overview
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.
HTML5 Forms TrainingCourse Contents
HTML forms — introduction and overview
- Forms matter — gateways for users and income
- Form structure and organisation
- Basic form interactivity
- Dynamic forms
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
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
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
- 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.
- Using the output element to show the results of a calculation
- Designing HTML5 Forms for mobile
HTML5 Forms TrainingCourse Schedule
HTML5 Forms TrainingFurther Details
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.
- Experienced web designers
- Front-end web developers and programmers
- Back-end web developers and programmers
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.
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.