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.
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
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.