Developed with

The course is part of this learning path

Developing Web Applications with HTML and CSS
Start course


Forms are one of the core parts of HTML functionality. They let users submit key information and are used in every industry and on most websites. They’re a big topic, so in this module we’ll go into a lot of detail. You’ll learn about forms in general, text and push buttons and multi-line inputs. Then we’ll move onto checkbox and radio buttons, as well as list boxes and drop down lists. One of the more detailed lessons in this module comes up next, with a deep dive into some of the input types you can use in your forms. Finally, we’ll end the module off with form validation and a little bit about form validation, server scripting and a few security issues you need to be aware of.


One of the drivers behind HTML5 was actually in browser form validation. Form validation is just all about making sure that the data a user is allowed to enter meets our predefined criteria. This helps us begin our journey to make a secure and robust application. On a website, inbuilt validation is generally applied when the user submits the form. To enable the specific field to be validated, the required attribute needs to be added to it. This is pretty simple for an input tag as required can just be added there.

If we add a Submit button, display the page in a browser and submit without entering any data, we'll get a browser controlled validation message asking us to fill in the field. The form will not submit until all required fields are correctly filled in. Drop-down lists created with the select input need the required attribute added to the select input and not in the nested options. For a radio button group, you only need to add the required attribute to one of the options. And this is usually the first. Additional validation takes place that depends on the type of input.

For instance, a number type will only accept a number and an email type expects to see the @ symbol separating some text. This is great, but doesn't ensure a proper email address where we would expect a dot. So it's not foolproof. If you use the min and max attributes, the value will be checked against these and the form will not submit if the value is outside of the allowed range. For text, the pattern attribute can be used to supply a regular expression that basically masks the string to check if the characters used, their frequency and their position meet a given pattern.

The most commonly used patterns can be found by a simple search online. As you become more experienced, you'll probably want to validate beyond the scope of the HTML5 specification. For this, you'll need to use JavaScript, but you'll need to know how to turn off the browser's own validation. This is by adding the novalidate attribute to the form. And that's it for the HTML5 form validation. And as you've seen, HTML5 pages actually come with built-in validation when a user submits a form.


About the Author
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics