The course is part of this learning path
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.
Lectures
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail.
Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL.
Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.