Book Image

Web Forms - 2023 Build and Master Advanced Web Forms [Video]

By : SkillZone .
Book Image

Web Forms - 2023 Build and Master Advanced Web Forms [Video]

By: SkillZone .

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

Related Content you might be interested in

Current Title:

Small book image
Web Forms - 2023 Build and Master Advanced Web Forms [Video]
SkillZone .
May, 2022 | 21 hours 18 minutes
No titles found
Table of Contents (12 chapters)
Free Chapter
1
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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
Fun Web Form Example
Section Introduction
Organizing the Assets
CSS Grid - An Overview
Building the HTML
Finishing Off with CSS
12
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
Chapter 1
Introduction
Content Locked
Section 3
How Are Web Forms Created?
Creating a form is straightforward. All you need to do is wrap your entire form code (which is written in HTML) in the <form> element. Simple enough, right? Often, we have attributes attached to the form, and the two most common attributes you will see developers using are the METHOD attribute and the ACTION attribute. We will discuss the differences between them in this lecture. But don't worry, we will go into more detail later in this course. This is only a teaser.
Previous Section
End of Section 3
Next Section