Build & Master HTML Web forms In 2026
An advanced Web Forms course for everyone! Master URL encoding, form elements, GET vs POST, form validation and more
Lo que serás capaz de hacer
*** THE ULTIMATE COURSE ON WEB FORMS AND HTML FORM ELEMENTS *** HTML Forms : Master the HTML <form> element and attributes to create user-friendly interfaces. Advanced Concepts : Understand URL encoding , date formatting, and the intricacies of the infamous input element. Master Client-Side Validation : Understand progress bars , toggles , checkboxes , ranges , and tons more. Handle Data Like a Pro : Learn how to grab and process form data on the server side using Node.js and PHP. Strap in my dear student, it's going to be a fun ride. Let Me Share My Form-Building Expertise with You! Understanding how forms work is essential for becoming a skilled front-end developer. This course will empower you to implement your creative, dynamic ideas into your web projects. Mastering forms is a critical step toward full-stack development, giving you the control and knowledge to create effective user interactions. In this course, we’ll take a deep dive into web forms and their functionalities. Here are some key questions we’ll explore: Why do we need to wrap our form elements within form tags? How can you include a progress bar in your forms? What are the best practices for customizing toggles and checkboxes? Where does the data go once a user clicks the submit button? How can you perform validation on your forms, both natively and using JavaScript? How can users upload files through your forms? What happens to the data once it arrives at the server? By addressing these questions and more, you'll gain the skills needed to build advanced forms that enhance user engagement and experience. You'll also understand the full-stack process involved in handling form data effectively. What You Will Learn The fundamentals of HTML forms and their importance in web development. You will understand at an advanced level how to create forms natively, and how powerful they can be in increasing conversions. Techniques for creating dynamic forms that enhance interactivity. Strategies for validating user input on both client and server sides. Best practices for customizing form elements to fit your design needs. From understanding the structure of forms to implementing validation techniques, you’ll gain the skills necessary to create dynamic and user-friendly web applications. 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 you Understanding 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 <form> 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 COVERS This course is huge and comprehensive, from basics to advanced 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 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? *** THE MOST comprehensive FORMS course *** 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 approach You 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 the HTML FORM element works 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 <form> element mean, understanding the different <input> types in detail, what URL encoding is, and how data is sent over the wire to a server. Practice makes perfect Theory 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? This course is designed for anyone eager to enhance their web development skills, regardless of your current level. If you find yourself in any of the following categories, this course is perfect for you: Aspiring Developers : You want to explore the world of programming and learn how to create dynamic and interactive web forms. Front-End Enthusiasts : You’re looking to gain a deeper understanding of HTML forms and how they can improve user engagement. Future Full-Stack Developers : You wish to understand how front-end JavaScript interacts with back-end technologies like Node.js and PHP. Curious Learners : You have a basic grasp of web forms but want to dive deeper into advanced concepts like validation, URL encoding, and data handling. Developers Seeking Mastery : You’ve taken other courses but feel you haven't fully grasped the intricacies of form elements and client-server interactions. WHY 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. Let's get crackin'
- Why web forms are the MONEY PAGES of websites
- Build web forms from scratch with pure native HTML, CSS and JavaScript
- Learn how to use AJAX to submit form data to a server
- Learn about HTTP and how it relates to HTML
- Tons of practical examples and fun challenges to make learning easy
- Learn how to send form data to a web server
Temario
UNIDAD 1 - Web Forms - Introduction · 31 leccionesUNIDAD 1 - Web Forms - Introduction
UNIDAD 1 - Web Forms - Introduction
- Web Forms - Section Introduction
- How are web forms created?
- Why do we need to wrap our web form in a <form> element
- Web Forms - facts
- Quick recap on web forms
- Project intro - let's build a web form
- Where can you write code?
- Profile header - setting it up
- Profile header - finishing it off
- Creating our first web form widget <input>
- A little more info about the <input> element
- The <input> element is powerful
- Styling our <input> widget
- Creating an email widget
- Intro to radio buttons
- Radio buttons
- Building our radio button
- Take a step back: radio buttons
- Styling our radio button
- Summary on radio buttons
- Adding a dropdown menu to our web form
- Adding a textarea widget to our web form
- What is the <textarea> element?
- Adding a checkbox to our web form
- Adding a submit button to our web form
- What happens when you submit a form?
- A quick word on the ACTION and METHOD attributes
- Recap of entire section
- Fundamentals of web form design
- Outro
- Quiz: Web Form Fundamentals
UNIDAD 2 - The <form> element · 52 leccionesUNIDAD 2 - The <form> element
UNIDAD 2 - The <form> element
- Introduction
- Table vs 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)
- Summary of the accept-charset attribute
- 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 attribute example - front end example
- Action attribute example - intro to URLSearchParams()
- Action attribute example - making our form dynamic
- Method attribute - GET
- Method attribute - POST
- GET vs POST
- HTTP vs HTML when it comes to METHOD types
- Recap: why does an HTML form only allow GET and POST
- GET method
- POST method
- Viewing HTTP request header and body information
- How are images sent over the internet?
- Enctype attribute - introduction
- Enctype attribute - GET example
- Enctype attribute - POST
- Quick recap
- Enctype attribute - what is boundary?
- Quick word on GET, POST, Enctype and Forms
- More on the Boundary (advanced)
- Enctype example - setting up HTML
- Enctype example - setting up a Node.js server
- Enctype example - analysis of multipart vs application/x-www-form-urlencoded
- Enctype - take a step back
- Submitting files in a web form
- REL attribute
- A little more on rel="noopener"
- Autocomplete attribute
- Autocomplete - example
- Autocomplete - summary
- novalidate - attribute introduction
- novalidate - example
- Target attribute introduction
- Target - example
- Summary of the <form> wrapper
- Outro
- Quiz: <form>
UNIDAD 3 - URL Encoding · 15 leccionesUNIDAD 3 - URL Encoding
UNIDAD 3 - URL Encoding
- URL Encoding - Introduction
- Definition of URL encoding
- Why do we see international characters?
- A little about URLs
- What is a URL
- Understanding hex
- A little more about why we use hex
- How does URL encoding work?
- URL encoding - high level summary
- International characters
- International characters (RFC 3986 vs RFC 3987)
- How does your browser URL encode spaces?
- Custom encoding with JavaScript - example
- encodeURIComponent() - last words
- Quiz: URL Encoding
UNIDAD 4 - The 3 most important web form elements: fieldset, text inputs and labels · 20 leccionesUNIDAD 4 - The 3 most important web form elements: fieldset, text inputs and labels
UNIDAD 4 - The 3 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
- Well done
- The <input> element is like a lime
- Limes and <inputs>
- Where does the <input> element come from?
- <input type="text"> - common attributes and introduction
- Quick word on <input>
- <input type="text"> - spellcheck attribute and value property
- Assignment - web form introduction
- Assignment - solution (without CSS)
- Assignment - solution (with CSS)
- Label attribute
- The most important <input> element
- Adding some heading and styling
- The 3 most common widgets you'll see
UNIDAD 5 - Original <input> types · 31 leccionesUNIDAD 5 - Original <input> types
UNIDAD 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
- Quick word about the pattern attribute
- Regular Expressions - introduction
- Input type=hidden
- URLSearchParams() - introduction
- Hidden input type and databases
- Summary of hidden input fields
- Submitting a timestamp with <input type="hidden">
- Example of why a hidden input may not be safe
- 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
- The radio button list is pre-defined
- :checked pseudo class
- Checkbox Challenge - intro
- 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
- Original Input Types
UNIDAD 6 - Newer <input> types · 20 leccionesUNIDAD 6 - Newer <input> types
UNIDAD 6 - Newer <input> types
- Newer input types - high level
- Email type - introduction
- Email type - validation and benefits
- Search type - intro
- Search type - styling with CSS
- Search type - pseudo classes and pseudo elements
- Tel type
- Url type
- 2 most common events that are fired
- Number type
- Step back
- Range type
- Using JavaScript to display dynamic range values
- Date and time pickers
- Date type - example
- Quick word on datetime-local
- Color type
- Common attributes you'll find on form widgets
- Form Fundamentals
- Newer input types
UNIDAD 7 - Fun Challenges · 13 leccionesUNIDAD 7 - Fun Challenges
UNIDAD 7 - Fun Challenges
- #1 web form email challenge - intro
- #1 web form email challenge - solution
- #2 custom toggle - intro
- #2 custom toggle - building HTML
- #2 custom toggle - finishing off the toggle
- #3 color picker challenge - intro
- #3 color picker challenge - building the HTML
- #3 color picker challenge - adding JavaScript
- #4 custom range picker challenge - intro
- #4 custom range picker challenge - building the HTML
- #4 custom range picker challenge - adding JavaScript
- #5 simple web form challenge - intro
- #5 simple web form challenge - solution
UNIDAD 8 - Moving away from the <input> element · 39 leccionesUNIDAD 8 - Moving away from the <input> element
UNIDAD 8 - Moving away from the <input> element
- Introduction
- What this section is all about
- Non <input> elements
- <textarea> - what is it
- <textarea> vs <input type="text">
- Why are we spending so much time on <textarea>?
- <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>
- Can you hide the value attribute from the <datalist> element dropdown
- Autocomplete - attribute
- More about the autocomplete attribute
- 2 important questions about <datalist>
- Creating a dynamic <datalist> dropdown
- <datalist> vs <select> - summary
- Dropdown menus - summary
- Output element - intro
- 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 - intro
- Progress bar - detail
- Meter bar - intro
- Meter bar - detail
- Meter and progress bar - summary
- Progress bar challenge #1 - intro (video progress)
- Progress bar challenge #1 - solution (video progress)
- Progress bar challenge #2 - intro (form progress)
- Progress bar challenge #2 - solution (form progress) - HTML + CSS
- Progress bar challenge #2 - solution (form progress) - JavaScript
- Outro
- Web Form Controls
UNIDAD 9 - Styling web forms (including pseudo elements and pseudo classes) · 23 leccionesUNIDAD 9 - Styling web forms (including pseudo elements and pseudo classes)
UNIDAD 9 - Styling web forms (including pseudo elements and pseudo classes)
- Section intro
- Styling forms with CSS, pseudo classes and pseudo elements - intro
- Where can you find all pseudo classes?
- Styling web forms
- CSS box model
- Pseudo classes - intro
- Pseudo classes - for forms
- :required
- Building our base web form (also used in future lectures)
- Generated content
- Adding generated content to our form (by using ::after)
- :valid & :invalid
- Adding :valid and :invalid styling to our form (by using ::before)
- :in-range & :out-of-range
- :enabled & :disabled
- Web form example - rundown of the HTML
- Web form example - building our JavaScript
- Radio boxes & checkboxes - :checked state
- Radio boxes & checkboxes - :default state
- Radio boxes & checkboxes - :indeterminate state
- What about the <select> element?
- Pseudo classes - summary
- Styling Web Forms
UNIDAD 10 - Web Form Validation · 13 leccionesUNIDAD 10 - Web Form Validation
UNIDAD 10 - Web Form Validation
- Section intro
- 2 types of client side validation on web forms
- Why you need server side validation?
- Built-in validation - overview
- Quick example - :valid :invalid and required
- Built-in validation - pattern attribute
- JavaScript validation - intro
- JavaScript validation - the Constraint Validation API
- setCustomValidity() method - 2 easy examples
- CHALLENGE INTRO - setCustomValidity() method
- CHALLENGE SOLUTION - setCustomValidity() method
- Security is important (SSL & CSRF attacks)
- Web Form Validation
UNIDAD 11 - Fun Web Form Example · 5 leccionesUNIDAD 11 - Fun Web Form Example
UNIDAD 11 - Fun Web Form Example
- Section intro
- Organizing the assets
- CSS grid - an overview
- Building the HTML
- Finishing off with CSS
UNIDAD 12 - Server side processing of web form data · 14 leccionesUNIDAD 12 - Server side processing of web form data
UNIDAD 12 - Server side processing of web form data
- Section intro
- AJAX vs ACTION
- AJAX - intro
- Want more on AJAX?
- 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
- Node modules
- Outro - WELL DONE
- Server Quiz
UNIDAD 13 - Final Test · 1 leccionesUNIDAD 13 - Final Test
UNIDAD 13 - Final Test
- Web Forms Test
UNIDAD 14 - Where to next? · 1 leccionesUNIDAD 14 - Where to next?
UNIDAD 14 - Where to next?
- Where to next?
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
14 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
12 cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Clyde Matthew.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 14 unidades · 278 lecciones · 60 h
- 12 meses de acceso
- 12 cuestionarios de evaluación
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Clyde Matthew; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.


