URL Encoding | Ultimate Web Forms Course 2025 Using Authentic HTML, JavaScript and CSS

Book Overview & Buying
Table Of Contents

Ultimate Web Forms Course 2025 Using Authentic HTML, JavaScript and CSS

By : SkillZone

Buy this Video

Ultimate Web Forms Course 2025 Using Authentic HTML, JavaScript and CSS

By: SkillZone

Buy this Video

Overview of this book

An HTML form is another name for a webform. It’s a site where people can enter data, which is then processed by a server. This course will give you solid fundamentals and practicals regarding forms. It can be taken alone (you don’t need to do any other course) to achieve your goals. You will emerge from this course with an advanced understanding and practical experience of building forms. It will take you to the point where you will understand what method (GET or POST) to use when sending form data, how to define where the data goes, and how to perform advanced client-side validation (checking errors on the form before it is sent to the server), how to write custom pattern validation rules (using regular expressions), how to run servers, and how to view all HTTP request information. This is awesome knowledge. This course will captivate you and catapult you to the next level and set you well on your way to becoming a true grandmaster in front-end webform development. By the end of this course, you will be able to "speak” and "walk” FORMS by gaining an understanding of how you can build it, manipulate it, and style it in meaningful and practical ways. We dig deeper into every lecture, and this course has many bonus lectures that will extend your knowledge base and test your skills. All the resources are available at https://github.com/PacktPublishing/Web-Forms---2022-Build-and-Master-Advanced-Web-Forms

Introduction

Course Introduction

Introduction to Forms

How Are Web Forms Created?

Why Do We Need to Wrap Our Web Form in a <form> Element?

Quick Recap on Web Forms

Project Introduction - Let's Build a Web Form

Profile Header - Setting It Up

Profile Header - Finishing It Off

Creating Our First Web Form Widget <input>

A Little More Information about the <input> Element

Styling Our <input> Widget

Creating an Email Widget

Introduction to Radio Buttons

Building Our Radio Button

Take a Step Back: Radio Buttons

Styling Our Radio Button

Adding a Dropdown Menu to Our Web Form

Adding a textarea Widget to Our Web Form

Adding a Checkbox to Our Web Form

Adding a Submit Button to Our Web Form

What Happens When You Submit a Form?

Recap of the Entire Section

Outro

The <form> Element

Section Introduction - Table Versus Web Form

The <form> Element

Attributes on the <form>

Why is Knowing about the <form> Attributes Important?

Attribute: accept-charset (ISO and ASCII)

Attribute: accept-charset (UTF)

Take a Step Back: accept-charset

What Happens If You Use a Character Outside of the Specified Encoding Type?

Theta Example - URL Encoding (Part 1 of 3)

Theta Example - Numerical Character References (Part 2 of 3)

Theta Example - Servers Understand Hex (Part 3 of 3)

Name Attribute

Accept Attribute

Action Attribute

Action AttributeExample - Front-End Example

Action Attribute Example - Introduction to URLSearchParams()

Action Attribute Example - Making Our Form Dynamic

Method Attribute - GET

Method Attribute - POST

GET Versus POST

HTTP Versus HTML When It Comes to METHOD Types

Enctype Attribute - Introduction

Enctype Attribute - GET Example

Enctype Attribute - POST

Enctype Attribute - What Is Boundary?

Enctype Example - Setting Up HTML

Enctype Example - Setting Up a Node.js Server

Enctype Example - Analysis of Multipart Versus application/x-www-form-urlencoded

Enctype - Take a Step Back

REL Attribute

Autocomplete Attribute

Autocomplete - Example

novalidate - Attribute Introduction

novalidate - Example

Target Attribute Introduction

Target - Example

Summary of the <form> Wrapper

Outro

URL Encoding

URL Encoding - Introduction

Why Do We See International Characters?

A Little about URLs

Understanding Hex

How Does URL Encoding Work?

International Characters

How Does Your Browser URL Encode Spaces?

Custom Encoding with JavaScript - Example

The Three Most Important Web Form Elements: fieldset, Text Inputs, and Labels

The Structure of a Web Form

<fieldset> - Introduction

<fieldset> - Examples

<fieldset> - Attributes

<fieldset> - Using the Form Attribute

Using the Form Attribute for Styling Purposes Using HTMLFormElement.elements

The <input> Element Is Like a Lime

Where Does the <input> Element Come From?

<input type="text"> - Common Attributes and Introduction

<input type="text"> - Spellcheck Attribute and Value Property

Assignment - Web Form Introduction

Assignment - Solution (without CSS)

Assignment - Solution (with CSS)

Label Attribute

Original <input> Types

What Are the Original <input> Types?

Keep Going! Web Forms Are Awesome!

Input Type=Password

Using the Pattern, Title, and Required Attribute with the Password Type

Password Does Not Help Us with Security

Regular Expressions - Introduction

Input Type=Hidden

URLSearchParams() - Introduction

Hidden Input Type and Databases

Submitting a Timestamp with <input type=“hidden”>

Buttons - Two Ways to Create Buttons

Using New Attributes on Buttons and the Difference Between <button> and <input>

Different Button Types - Fun Example

Checkable Items

Checkbox

Radio Buttons

:checked Pseudo Class

Checkbox Challenge - Introduction

Checkbox Challenge - Solution

Checkbox Challenge - Solution with Check Mark

Image Type

Image Type - Heatmap Example

File Type

File Type - How to Style It

File Type - Using JavaScript to Improve UI

Outro

Newer <input> Types

Newer Input Types - High Level

Email Type - Introduction

Email Type - Validation and Benefits

Search Type - Introduction

Search Type - Styling with CSS

Search Type - Pseudo Classes and Pseudo Elements

Tel Type

Url Type

Number Type

Step Back

Range Type

Using JavaScript to Display Dynamic Range Values

Date and Time Pickers

Date Type - Example

Color Type

Common Attributes You Will Find on Form Widgets

Fun Challenges

#1 Web Form Email Challenge - Introduction

#1 Web Form Email Challenge - Solution

#2 Custom Toggle - Introduction

#2 Custom Toggle - Building HTML

#2 Custom Toggle - Finishing Off the Toggle

#3 Color Picker Challenge - Introduction

#3 Color Picker Challenge - Building the HTML

#3 Color Picker Challenge - Adding JavaScript

#4 Custom Range Picker Challenge - Introduction

#4 Custom Range Picker Challenge - Building the HTML

#4 Custom Range Picker Challenge - Adding JavaScript

#5 Simple Web Form Challenge - Introduction

#5 Simple Web Form Challenge - Solution

Moving Away from the <input> Element

Introduction

Non <input> Elements

<textarea> - What Is It

<textarea> Versus <input type="text">

<textarea> - Common Attributes

<textarea> - Resize Property and Summary

<textarea> Challenge #1 - :valid, :invalid, not and :placeholder-shown

<textarea> Challenge #1 - Solution

<textarea> Challenge #2 - Focus and Blur Events

<textarea> Challenge #2 - Solution

Dropdown Controls and the Select Box

Autocomplete box - <datalist>

Autocomplete - Attribute

Two Important Questions about <datalist>

Creating a Dynamic <datalist> Dropdown

<datalist> Versus <select> - Summary

Dropdown Menus - Summary

Output Element - Introduction

Output Element - The oninput Event

Output Element Challenge 1 - Multiplication

Output Element Challenge 1 Solution - Multiplication

Output Element Challenge 2 - Display Slider Value

Output Element Challenge 2 Solution - Display Slider Value

Progress Bar - Introduction

Progress Bar - Detail

Meter Bar - Introduction

Meter Bar - Detail

Meter and Progress Bar - Summary

Progress Bar Challenge #1 - Introduction (Video Progress)

Progress Bar Challenge #1 - Solution (Video Progress)

Progress Bar Challenge #2 - Introduction (Form Progress)

Progress Bar Challenge #2 - Solution (Form Progress) - HTML + CSS

Progress Bar Challenge #2 - Solution (Form Progress) - JavaScript

Outro

Styling Web Forms (Including Pseudo Elements and Pseudo Classes)

Section Introduction

Styling Forms with CSS, Pseudo Classes, and Pseudo Elements - Introduction

Styling Web Forms

CSS Box Model

Pseudo Classes - Introduction

Pseudo Classes - For Forms

:required

Building Our Base Web Form (Also Used in Future Lectures)

Generated Content

Adding Generated Content to Our Form (Using ::after)

:valid and :invalid

Adding :valid and :invalid Styling to Our Form (Using ::before)

:in-range and :out-of-range

:enabled and :disabled

Web Form Example - Rundown of the HTML

Web Form Example - Building Our JavaScript

Radio Boxes and Checkboxes - :checked State

Radio Boxes and Checkboxes - :default State

Radio Boxes and Checkboxes - :indeterminate State

Pseudo-Classes - Summary

Web Form Validation

Section Introduction

Two Types of Client-Side Validation on Web Forms

Built-In Validation - Overview

Quick Example - :valid, :invalid, and required

Built-In Validation - Pattern Attribute

JavaScript Validation - Introduction

JavaScript Validation - The Constraint Validation API

setCustomValidity() Method - Two Easy Examples

Challenge Introduction - setCustomValidity() Method

Challenge Solution - setCustomValidity() Method

Fun Web Form Example

Section Introduction

Organizing the Assets

CSS Grid - An Overview

Building the HTML

Finishing Off with CSS

Server-Side Processing of Web Form Data

Section Introduction

AJAX Versus ACTION

AJAX - Introduction

AJAX Example - Building the HTML

AJAX Example - Building the PHP File

AJAX Example - Building the AJAX Query

AJAX Example - Error Messages and Finishing Off the Project

How to Submit Web Form Data to a Server - Client-Side Recap

PHP - How to Receive Form Data

NODE - How to Receive Form Data

Course Summary

Ultimate Web Forms Course 2025 Using Authentic HTML, JavaScript and CSS

By : SkillZone

Ultimate Web Forms Course 2025 Using Authentic HTML, JavaScript and CSS

By: SkillZone

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access