Retour au cours

Leçon 33 : Attributs de validation de formulaire (Required, Pattern)

La Masterclass HTML : De Zéro à Développeur Web

33. Attributs de validation de formulaire

Le HTML nous permet de définir des règles de validation de base directement dans le balisage, ce qui fournit une première couche rapide de validation côté client avant même que les données n'atteignent le serveur.

33.1 L'attribut required

S'il est présent, l'utilisateur doit remplir le champ avant de soumettre le formulaire. S'il est laissé vide, le navigateur affiche un message d'erreur standard.

html <label for="username">Nom d'utilisateur :</label> <input type="text" id="username" name="user" required>

33.2 Longueur minimale et maximale (minlength, maxlength)

Utilisé pour les entrées de texte afin de définir le nombre acceptable de caractères.

html <input type="password" name="new_password" minlength="8" maxlength="20" required>

33.3 L'attribut pattern (Expressions régulières)

L'attribut pattern vous permet de spécifier une expression régulière (RegEx) à laquelle la valeur d'entrée doit correspondre. Ceci est utilisé pour des validations complexes, comme les codes postaux ou des formats personnalisés.

html <label for="zip">Code postal (5 chiffres) :</label>

<!-- Le pattern requiert exactement 5 chiffres : [0-9] signifie n'importe quel chiffre, {5} signifie exactement 5 fois --> <input type="text" id="zip" name="zipcode" pattern="[0-9]{5}" title="Code postal à cinq chiffres">

Note : Le title est important ici, car il fournit une info-bulle à l'utilisateur expliquant le format requis.