Quels sont les meilleurs éléments et attributs de formulaire HTML pour valider votre code ?

Use <input> with attributes like required, type, pattern, min, max, and <select> with required for validation. For text, use <textarea> with maxlength. The <form> tag can disable validation with novalidate when needed.

During your experience as a Software Developer, you'll encounter validation every day. Without it, the user could enter any value, and populate the database with irrelevant data, which in fact will not be helpful for the company to take metrics over the data. The point is the data your system must accept, the format of it, maybe text, numeric, alphanumeric, and so on, and the size for it, like the number of characters, maximum and minimum values, and also the pattern of characters, for instance in passwords. Each day, the leader of my team makes a point to emphasize the use of validation, which takes place both on the graphic interface, and the API or microservice that will handle the data.

If you've coded some HTML, just for fun or for a real project, you probably noticed that after trying to send a form that contains a required attribute in any of its fields, the field then displays a little message, that basically tells you the need to fill the form field with the required information. As you get more experience, you can even customize the appearance of the message, once each browser has a slightly different graphic design, it might not look so fancy for the final user. In summary, the required attribute ensures that an important and not nullable field of your form will be successfully submitted.

The pattern attribute allows you to limit the set of characters used, as well as determine the order in which they are used. For example, When using type="email" normally, the browser will consider options such as "login@domain" or "123%123@domain.com" to be valid. To fix this problem you can use pattern. In normal use of type="url" the browser will consider something like "abcd:efgh" to be valid. To allow only http: and https: you should also use pattern.

The min, max and step attributes are used with the input tag inside the form. Here a simplified example of How to use it: <form action="/action_page.php"> <input type="number" min="2" max="6" step="2"> <input type="submit"> </form> In this example, when you click on the submit button, if the number is not between 2 and 6 and not a multiple of 2, it will give you a validation error! In other words, the number should be 2 or 4 or 6! Note: The max, min and step attributes works with the following input types: number, range, date, datetime-local, month, time and week.