NEW Web Forms 2023 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 2023 Build Master Web forms
File Size :
14.64 GB
Total length :
21h 54m



Clyde Matthew


Last update




NEW Web Forms 2023 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 2023 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 Quick word on GET, POST, Enctype and Forms

Lecture 57 More on the Boundary (advanced)

Lecture 58 Enctype example – setting up HTML

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

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

Lecture 61 Enctype – take a step back

Lecture 62 REL attribute

Lecture 63 A little more on rel=”noopener”

Lecture 64 Autocomplete attribute

Lecture 65 Autocomplete – example

Lecture 66 Autocomplete – summary

Lecture 67 novalidate – attribute introduction

Lecture 68 novalidate – example

Lecture 69 Target attribute introduction

Lecture 70 Target – example

Lecture 71 Summary of the


Lecture 72 Outro

Section 3: URL Encoding

Lecture 73 URL Encoding – Introduction

Lecture 74 Definition of URL encoding

Lecture 75 Why do we see international characters?

Lecture 76 A little about URLs

Lecture 77 What is a URL

Lecture 78 Understanding hex

Lecture 79 A little more about why we use hex

Lecture 80 How does URL encoding work?

Lecture 81 URL encoding – high level summary

Lecture 82 International characters

Lecture 83 International characters (RFC 3986 vs RFC 3987)

Lecture 84 How does your browser URL encode spaces?

Lecture 85 Custom encoding with JavaScript – example

Lecture 86 encodeURIComponent() – last words

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

Lecture 87 The structure of a web form

Lecture 88

– introduction

Lecture 89

– examples

Lecture 90

– attributes

Lecture 91

– using the form attribute

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

Lecture 93 Well done

Lecture 94 The element is like a lime

Lecture 95 Limes and

Lecture 96 Where does the element come from?

Lecture 97 – common attributes and introduction

Lecture 98 Quick word on

Lecture 99 – spellcheck attribute and value property

Lecture 100 Assignment – web form introduction

Lecture 101 Assignment – solution (without CSS)

Lecture 102 Assignment – solution (with CSS)

Lecture 103 Label attribute

Section 5: Original types

Lecture 104 What are the original types

Lecture 105 Keep going! Web Forms are Awesome!

Lecture 106 Input type=password

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

Lecture 108 Password does not help us with security

Lecture 109 Quick word about the pattern attribute

Lecture 110 Regular Expressions – introduction

Lecture 111 Input type=hidden

Lecture 112 URLSearchParams() – introduction

Lecture 113 Hidden input type and databases

Lecture 114 Summary of hidden input fields

Lecture 115 Submitting a timestamp with

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

Lecture 117 Buttons – two ways to create buttons

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

Lecture 119 Different button types – fun example

Lecture 120 Checkable items

Lecture 121 Checkbox

Lecture 122 Radio buttons

Lecture 123 The radio button list is pre-defined

Lecture 124 :checked pseudo class

Lecture 125 Checkbox Challenge – intro

Lecture 126 Checkbox Challenge – solution

Lecture 127 Checkbox Challenge – solution with check mark

Lecture 128 Image type

Lecture 129 Image type – heatmap example

Lecture 130 File type

Lecture 131 File type – how to style it

Lecture 132 File type – using JavaScript to improve UI

Lecture 133 Outro

Section 6: Newer types

Lecture 134 Newer input types – high level

Lecture 135 Email type – introduction

Lecture 136 Email type – validation and benefits

Lecture 137 Search type – intro

Lecture 138 Search type – styling with CSS

Lecture 139 Search type – pseudo classes and pseudo elements

Lecture 140 Tel type

Lecture 141 Url type

Lecture 142 2 most common events that are fired

Lecture 143 Number type

Lecture 144 Step back

Lecture 145 Range type

Lecture 146 Using JavaScript to display dynamic range values

Lecture 147 Date and time pickers

Lecture 148 Date type – example

Lecture 149 Quick word on datetime-local

Lecture 150 Color type

Lecture 151 Common attributes you’ll find on form widgets

Section 7: Fun Challenges

Lecture 152 #1 web form email challenge – intro

Lecture 153 #1 web form email challenge – solution

Lecture 154 #2 custom toggle – intro

Lecture 155 #2 custom toggle – building HTML

Lecture 156 #2 custom toggle – finishing off the toggle

Lecture 157 #3 color picker challenge – intro

Lecture 158 #3 color picker challenge – building the HTML

Lecture 159 #3 color picker challenge – adding JavaScript

Lecture 160 #4 custom range picker challenge – intro

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

Lecture 162 #4 custom range picker challenge – adding JavaScript

Lecture 163 #5 simple web form challenge – intro

Lecture 164 #5 simple web form challenge – solution

Section 8: Moving away from the element

Lecture 165 Introduction

Lecture 166 What this section is all about

Lecture 167 Non elements

Lecture 168

New Courses

Scroll to Top