Creating, Styling, and Validating Web Forms Training in Windsor, Canada

Enroll in or hire us to teach our Creating, Styling, and Validating Web Forms class in Windsor, Canada by calling us @303.377.6176. Like all HSG classes, Creating, Styling, and Validating Web Forms may be offered either onsite or via instructor led virtual training. Consider looking at our public training schedule to see if it is scheduled: Public Training Classes
Provided there are enough attendees, Creating, Styling, and Validating Web Forms may be taught at one of our local training facilities.
We offer private customized training for groups of 3 or more attendees.

Course Description

 
This course is all about creating and processing web forms. It starts with using the latest HTML standards to create and provide basic validation for an HTML form. Then it covers styling forms using CSS. This includes showing the validation status of form fields. You'll then learn to write clean, real-time client-side form validation with JavaScript and regular expressions. Finally, you'll learn to validate forms on the server with Node.js, JSON, and Ajax.
Course Length: 3 Days
Course Tuition: $1090 (US)

Prerequisites

Experience in the following is required for this JavaScript class: Basic HTML Basic CSS Basic JavaScript

Course Outline

 
HTML Forms
How HTML Forms Work
The
Tag
Get vs. Post
Form Elements
id and name Attributes
Text Fields
Labels
Text-like Input Types
placeholder Attribute
pattern Attribute
Password Fields
Date and Time Fields
Number Fields
Color Fields
Tel, URL, and Email Fields
tel
url and email
Search Fields
Hidden Fields
Buttons
Submit Button
Reset Button
Button Buttons
Checkboxes
Radio Buttons
Fieldsets
Select Menus
Option Groups
Textareas
  
JavaScript Form Validation
Server-side Form Validation
HTML Form Validation
Accessing Form Data
Form Validation with JavaScript
Checking Validity on Input and Submit Events
Adding Error Messages
The dataset Property
Validating Textareas
Validating Checkboxes
Validating Radio Buttons
Which Radio Button was Selected?
Validating Select Menus
Giving the User a Chance
  
Styling Forms with CSS
General Form Layout
Form-field Pseudo-Classes
Applying Pseudo-Classes to Forms
Radio Buttons, Checkboxes, and Fieldsets
  
Regular Expressions
Getting Started
JavaScript's Regular Expression test() Method
Regular Expression Syntax
Start and End ( ^ $ )
Number of Occurrences ( ? + * {} )
Common Characters ( . \d \D \w \W \s \S )
Grouping ( [] )
Negation ( ^ )
Subpatterns ( () )
Alternatives ( | )
Escape Character ( \ )
Case-Insensitive Matches
Backreferences
Form Validation with Regular Expressions
Cleaning Up Form Entries
A Slightly More Complex Example
  
Node.js and Server-side Form Validation
Welcome to the Server-side
What is a web server?
Dynamic Websites
Google Chrome DevTools: Network Tab
Status Codes
Welcome to Node.js
Installing Node.js
package.json
Our First App
What does npm start do?
Our First Web App
Stopping the Server
Fat-arrow Functions
Sending a Response with HTML
The favicon.ico Icon
Simple Routing and 404 Pages
Delivering favicon.ico
Express - Node.js Web Application Framework
app.js
Favicon Middleware
Static Files
Processing a Simple Form
Form Validation
Validators
Validation Chaining
not()
withMessage(message)
Custom Validators
Ajax
XMLHttpRequest
Asynchronous
  
JSON
Review of Object Literals
Arrays
Objects
Arrays in Objects
Objects in Arrays
Back to JSON
JSON Syntax
The built-in JavaScript JSON Object
  

Interesting Reads Take a class with us and receive a book of your choosing for 50% off MSRP.