![Web Forms - 2023 Build and Master Advanced Web Forms [Video]](https://content.packt.com/V18928/cover_image_small.jpeg)
Web Forms - 2023 Build and Master Advanced Web Forms [Video]
Subscription
FREE
Video + Subscription
$29.99
Video
$194.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
Subscription
FREE
Video + Subscription
$29.99
Video
$194.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
-
Free ChapterIntroduction
- 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
-
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
-
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
About this video
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
- Publication date:
- May 2022
- Publisher
- Packt
- Duration
- 21 hours 18 minutes
- ISBN
- 9781804611333