NEW Web Forms 2022 Build Master Web forms

Master web forms. Complete. From HTML design to sending to servers. Crucial for all front end development. Novice to Pro
NEW Web Forms 2022 Build Master Web forms
File Size :
14.61 GB
Total length :
21h 51m



Clyde Matthew


Last update

Last updated 11/2022



NEW Web Forms 2022 Build Master Web forms

What you’ll learn

Why web forms are the MONEY PAGES of most websites
Tons of practical examples and fun challenges to make learning easy
Learn how your website can take advantage of traffic with understanding how to build web forms
Learn how to send form data to a web server
Learn about HTTP and how it relates to HTML
Learn how to use AJAX to submit form data to a server
Practical examples – build many dynamic front-end forms with me
I am here to support you and bring you to the next level, step-by-step
Master client-side validation by using both HTML and JavaScript
Understand how to create custom error messages with the ConstraintValidation
Learn how to extract form key:value pairs using the URLSearchParams() API
Have fun mastering advanced front-end website development
Design and create forms to get the response you desire, be successful
Understand the CSS Box Model, the CSS Grid and pseudo classes and pseudo elements
Learn about the different form controls available
Master the types like text, password, email, tel, color, date, number and more!
Master non form controls like textarea, output, progress & meter bars, and more!
Learn why the browser implement URL Encoding when a user submits a form
Understand URL encoding
Understand how a server receives data from a form
Learn how to start a PHP server and receive form data (real example)
Learn how to start a Node server and receive form data (real example)
Understand why a user can type international characters into your form even though URL encoding specifies it has to be ASCII characters
Learn how to build envied forms with elements likeand

attributes (such as action, method, autocomplete, novalidate, enctype, REL, and more)
Understand why a GET request appends the form data to the URL
Learn why the browser appends the form data to the body of the HTTP request on a POST request
Doing help learning and we work through lots of examples together
Understand multipart/form-data and why do you need it when uploading files
Understand the difference between radio buttons and checkboxes
Understand how to listen for events on form controls (such as the input or change event)
Build dropdown controls, progress bars, meter bars, and a whole bunch more
Learn how to listen for different types of events, such as submit, input, change, etc.
Understand the ACTION and METHOD attributes
Understand the accept-charset (ISO vs ASCII) attribute
Learn about Numerical Character References
Easily master the original types (such as password, text, hidden and more)
Learn how to build functional forms using


Learn the 2 ways to create submit buttons on forms
Be an expert on the newer types like email, search, tel, number, date and more!
FUN CHALLENGES throughout the course (where we build custom toggles, checkboxes, color pickers and more)
From beginner to expert (advanced +)
Gain the knowledge to achieve and lead
Gives you depth of knowledge to boost your ability and confidence

NEW Web Forms 2022 Build Master Web forms


A desire to become an informed full stack web developer
An inquiring mind as I help you understand how data is sent from your browser, to a server
A goal to take your website and skills to the next level
Creativity to build dynamic, interesting and acclaimed forms that drive users to stay on your site
Basic HTML, CSS and JavaScript will be helpful, but not absolutely necessary
Desire to KNOW how a form works, how to be effective and how data gets sent to a server
Desire to KNOW how to build advanced, yet functional forms that attract people
Desire to KNOW how to style a form depending on its validity states (using pseudo classes and elements)
A computer is required as you need to code alongside me to learn effectively


THE NITTY GRITTY OF WEB FORMS?A web form is also known as an HTML form. It’s a place where users can enter data that’s then sent to a server for processing. Web forms allow users to place orders on your site, to provide their name and email address to sign up for a newsletter, or to sign up as a member to your site and so forth.What’s really great about web forms is that there is no “one size fits all”. You can use your artistic flare, and personal business acumen to create web forms with a particular length, format, content type and appearance.By doing this course, you’ll be able to improve your web form usability, which will ultimately enhance user experience and get website visitors excited about completing your form and converting.Why is this course so important?Forms which are on point present an opportunity for a company to grow and capture loyalty.A form can often be both a marketing tool and a necessity. A form that puts the user at ease, that evokes feelings of trust, will get filled out far more often than a form which looks (or is) complicated and confusing. After completing my “Advanced Forms” course, you will be knowledgeable, confident and the “go-to” person for forms.Let me share my form building skills with youUnderstanding how forms work will equip you to become an awesome front-end programmer. Learn how to implement your creative, different and dynamic ideas into your website. Master forms and you’re half way to becoming a full stack web developer. Take control through understanding. Delivering a perfect, interactive and functional form is challenging. In this course, I take a deep-dive into explaining web forms and how they work. Why do we need to wrap our form within

tags? How can you include a progress bar in a form? How can you customize a toggle or checkbox? Where does the data go once a user clicks on the submit button? How can you perform validation on your form? How can a user upload a file? What happens once the data arrives at the server? What are the different types of events we can listen to on forms? By understanding these questions, and many more in the course, you will be able to build advanced forms and better yet, understand the full stack process! In other words, you will be able to create dynamic forms that improve user engagement and experience.WHAT THIS COURSE COVERSThis course is huge and comprehensive, from basics to advancedThis 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 with 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, 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 form web development.By the end of this course, you’ll 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 in every lecture, and this course has many bonus lectures which extend your knowledge base and test your skills.Why should you learn so much about forms?A web form is one of the best ways to get input from prospective clients and indirectly establish a relationship with them. The time you spend in bringing the user to your website should be matched with the time spent in perfecting the user experience with your web forms. It is surprising to see so many sites these days contain complex and frustrating web forms that cause a negative experience.Ultimately, a web form allows your visitors to get in contact with you and to send information, such as an order, a catalogue request, or even a query, which is passed on to your database.Can you begin to see how important forms are and how their use can be escalated?*** A comprehensive FORMS course on Udemy ***Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how HTML code works behind the scenes. This is particularly true when it comes to building forms. If you’re wanting to become a full stack developer, you need to know, really know, how forms work. You need to understand how the browser URL encodes form data, how the browser sends data to a URL that you specify, and how to perform validation to ensure the user does not submit invalid data.A unique approachYou will learn “why” things work and not just “how”. Understanding advanced topics about forms (lURL encoding, accept-charset, multipart/form-data, regex, etc) is important as it will give you infinite possibilities and upskill you. Armed with this knowledge, you’ll be able to create forms that are tailored to your needs, and allow the form data to get submitted to a server via AJAX. You will be able to create forms that are customizable by the user (for example, if the user wants to change the color of the form theme). You can create a control on a form that displays the progress completion of the form and displays messages to the user along the way.Can you begin to see how pivotal forms are and how important having knowledge about forms is?How is this course different?There are lots of courses that focus on web development. Many never get into the detail about how HTML forms work behind the scenes – a skill that every full-stack developer needs to master in order to utilize potential.In this course, I focus on the more advanced topics of true web development when it comes to forms. This includes understanding what all of the attributes on the

element mean, understanding the different types in detail, what URL encoding is, and how data is sent over the wire to a server.Practice makes perfectTheory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this course.I love practical examples, which is why we build multiple forms in this course, starting in section 1.Is this course for you?Absolutely. If you fit in any of these categories then this course is perfect for you:Student #1: You want to advance in the world of programming.Student #2: You want to know how successful developers build dynamic forms that engage with the user, have high conversions that put them ahead of the competition.Student #3: You want to gain a solid understanding of how forms really workStudent #4: You want to start using backend technologies like Node or PHP with formsWHY START NOW?Right this second, your competitors are learning how to become better web developers.Web development is a blazing hot topic at the moment, and in the foreseeable future. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.Lets get started!What do you get?Lifetime access to all tutorial videos. No fees or monthly subscriptions.Q&A support.Quizzes, coding challenges, a test and assignments to help you learn.I’ve allowed you to download all of my lectures for offline viewing.Let’s get excited about becoming a professional web developer, and to be able to confidently apply it to your own websites.See you in the lectures.


Section 1: Introduction

Lecture 1 Introduction

Lecture 2 How are web forms created?

Lecture 3 Why do we need to wrap our web form in a


Lecture 4 Web Forms – facts

Lecture 5 Quick recap on web forms

Lecture 6 Project intro – let’s build a web form

Lecture 7 Profile header – setting it up

Lecture 8 Profile header – finishing it off

Lecture 9 Creating our first web form widget

Lecture 10 A little more info about the element

Lecture 11 Styling our widget

Lecture 12 Creating an email widget

Lecture 13 Intro to radio buttons

Lecture 14 Building our radio button

Lecture 15 Take a step back: radio buttons

Lecture 16 Styling our radio button

Lecture 17 Summary on radio buttons

Lecture 18 Adding a dropdown menu to our web form

Lecture 19 Adding a textarea widget to our web form

Lecture 20 Adding a checkbox to our web form

Lecture 21 Adding a submit button to our web form

Lecture 22 What happens when you submit a form?

Lecture 23 A quick word on the ACTION and METHOD attributes

Lecture 24 Recap of entire section

Lecture 25 Outro

Section 2: The


Lecture 26 Section introduction – Table vs Web Form

Lecture 27 The


Lecture 28 Attributes on the

Lecture 29 Why is knowing about the

attributes important?

Lecture 30 Attribute: accept-charset (ISO and ASCII)

Lecture 31 Attribute: accept-charset (UTF)

Lecture 32 Summary of the accept-charset attribute

Lecture 33 Take a step back: accept-charset

Lecture 34 What happens if you use a character outside of the specified encoding type?

Lecture 35 Theta Example – URL Encoding (Part 1 of 3)

Lecture 36 Theta Example – Numerical Character References (Part 2 of 3)

Lecture 37 Theta Example – Servers Understand Hex (Part 3 of 3)

Lecture 38 Name attribute

Lecture 39 Accept attribute

Lecture 40 Action attribute

Lecture 41 Action attribute example – front end example

Lecture 42 Action attribute example – intro to URLSearchParams()

Lecture 43 Action attribute example – making our form dynamic

Lecture 44 Method attribute – GET

Lecture 45 Method attribute – POST

Lecture 46 GET vs POST

Lecture 47 HTTP vs HTML when it comes to METHOD types

Lecture 48 Recap: why does an HTML form only allow GET and POST

Lecture 49 Viewing HTTP request header and body information

Lecture 50 How are images sent over the internet?

Lecture 51 Enctype attribute – introduction

Lecture 52 Enctype attribute – GET example

Lecture 53 Enctype attribute – POST

Lecture 54 Quick recap

Lecture 55 Enctype attribute – what is boundary?

Lecture 56 More on the Boundary (advanced)

Lecture 57 Enctype example – setting up HTML

Lecture 58 Enctype example – setting up a Node.js server

Lecture 59 Enctype example – analysis of multipart vs application/x-www-form-urlencoded

Lecture 60 Enctype – take a step back

Lecture 61 REL attribute

Lecture 62 A little more on rel=”noopener”

Lecture 63 Autocomplete attribute

Lecture 64 Autocomplete – example

Lecture 65 Autocomplete – summary

Lecture 66 novalidate – attribute introduction

Lecture 67 novalidate – example

Lecture 68 Target attribute introduction

Lecture 69 Target – example

Lecture 70 Summary of the


Lecture 71 Outro

Section 3: URL Encoding

Lecture 72 URL Encoding – Introduction

Lecture 73 Definition of URL encoding

Lecture 74 Why do we see international characters?

Lecture 75 A little about URLs

Lecture 76 What is a URL

Lecture 77 Understanding hex

Lecture 78 A little more about why we use hex

Lecture 79 How does URL encoding work?

Lecture 80 URL encoding – high level summary

Lecture 81 International characters

Lecture 82 International characters (RFC 3986 vs RFC 3987)

Lecture 83 How does your browser URL encode spaces?

Lecture 84 Custom encoding with JavaScript – example

Lecture 85 encodeURIComponent() – last words

Section 4: The 3 most important web form elements: fieldset, text inputs and labels

Lecture 86 The structure of a web form

Lecture 87

– introduction

Lecture 88

– examples

Lecture 89

– attributes

Lecture 90

– using the form attribute

Lecture 91 Using the form attribute for styling purposes using HTMLFormElement.elements

Lecture 92 Well done

Lecture 93 The element is like a lime

Lecture 94 Limes and

Lecture 95 Where does the element come from?

Lecture 96 – common attributes and introduction

Lecture 97 Quick word on

Lecture 98 – spellcheck attribute and value property

Lecture 99 Assignment – web form introduction

Lecture 100 Assignment – solution (without CSS)

Lecture 101 Assignment – solution (with CSS)

Lecture 102 Label attribute

Section 5: Original types

Lecture 103 What are the original types

Lecture 104 Keep going! Web Forms are Awesome!

Lecture 105 Input type=password

Lecture 106 Using the pattern, title and required attribute with the password type

Lecture 107 Password does not help us with security

Lecture 108 Quick word about the pattern attribute

Lecture 109 Regular Expressions – introduction

Lecture 110 Input type=hidden

Lecture 111 URLSearchParams() – introduction

Lecture 112 Hidden input type and databases

Lecture 113 Summary of hidden input fields

Lecture 114 Submitting a timestamp with

Lecture 115 Example of why a hidden input may not be safe

Lecture 116 Buttons – two ways to create buttons

Lecture 117 Using new attributes on buttons, and the difference between

Lecture 118 Different button types – fun example

Lecture 119 Checkable items

Lecture 120 Checkbox

Lecture 121 Radio buttons

Lecture 122 The radio button list is pre-defined

Lecture 123 :checked pseudo class

Lecture 124 Checkbox Challenge – intro

Lecture 125 Checkbox Challenge – solution

Lecture 126 Checkbox Challenge – solution with check mark

Lecture 127 Image type

Lecture 128 Image type – heatmap example

Lecture 129 File type

Lecture 130 File type – how to style it

Lecture 131 File type – using JavaScript to improve UI

Lecture 132 Outro

Section 6: Newer types

Lecture 133 Newer input types – high level

Lecture 134 Email type – introduction

Lecture 135 Email type – validation and benefits

Lecture 136 Search type – intro

Lecture 137 Search type – styling with CSS

Lecture 138 Search type – pseudo classes and pseudo elements

Lecture 139 Tel type

Lecture 140 Url type

Lecture 141 2 most common events that are fired

Lecture 142 Number type

Lecture 143 Step back

Lecture 144 Range type

Lecture 145 Using JavaScript to display dynamic range values

Lecture 146 Date and time pickers

Lecture 147 Date type – example

Lecture 148 Quick word on datetime-local

Lecture 149 Color type

Lecture 150 Common attributes you’ll find on form widgets

Section 7: Fun Challenges

Lecture 151 #1 web form email challenge – intro

Lecture 152 #1 web form email challenge – solution

Lecture 153 #2 custom toggle – intro

Lecture 154 #2 custom toggle – building HTML

Lecture 155 #2 custom toggle – finishing off the toggle

Lecture 156 #3 color picker challenge – intro

Lecture 157 #3 color picker challenge – building the HTML

Lecture 158 #3 color picker challenge – adding JavaScript

Lecture 159 #4 custom range picker challenge – intro

Lecture 160 #4 custom range picker challenge – building the HTML

Lecture 161 #4 custom range picker challenge – adding JavaScript

Lecture 162 #5 simple web form challenge – intro

Lecture 163 #5 simple web form challenge – solution

Section 8: Moving away from the element

Lecture 164 Introduction

Lecture 165 What this section is all about

Lecture 166 Non elements

Lecture 167

New Courses

Scroll to Top