Creating, Styling, and Validating Web Forms

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.

Goals

Learn to create HTML forms using the latest HTML standards.

Learn to style forms with CSS.

Learn to validate forms on the client with JavaScript and regular expressions.

Learn to validate forms on the server with Node.js.

Learn to use Ajax techniques to do server-side validation on specific form fields without refreshing the entire page.

Outline

HTML Forms

How HTML Forms Work

The <form> 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

Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.