6.1 Attribut required
La validation des données dans les formulaires est un aspect important du développement web qui aide à assurer l'exactitude et l'intégrité des informations saisies. HTML fournit de nombreux attributs intégrés pour vérifier les données saisies, tels que required, pattern, min, max, ainsi que les attributs placeholder et value, qui améliorent l'interaction des utilisateurs avec le formulaire.
L'attribut required indique qu'un champ de saisie est obligatoire. Le navigateur ne permettra pas l'envoi du formulaire si le champ marqué comme required n'est pas rempli.
Syntaxe
<input type="text" name="username" required>
Exemple d'utilisation
<form action="/" method="post">
<label for="username">Nom d'utilisateur :</label>
<input type="text" id="username" name="username" required>
<button type="submit">Envoyer</button>
</form>
Explication
Si l'attribut required est spécifié, l'utilisateur doit remplir le champ avant de soumettre le formulaire. Si le champ est vide, le navigateur affichera un message d'erreur et n'enverra pas le formulaire.
6.2 Attribut pattern
L'attribut pattern permet de définir une expression régulière pour vérifier la saisie des données. Si les données saisies ne correspondent pas au modèle spécifié, le navigateur affichera un message d'erreur et n'enverra pas le formulaire.
Syntaxe
<input type="text" name="username" pattern="[A-Za-z]{3,}">
Exemple d'utilisation
L'attribut pattern définit une expression régulière à laquelle les données saisies doivent correspondre. Dans cet exemple, le nom d'utilisateur doit contenir uniquement des lettres et avoir au moins trois caractères.
<form action="/" method="post">
<label for="username">Nom d'utilisateur (lettres seulement, au moins 3 caractères) :</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
<button type="submit">Envoyer</button>
</form>
6.3 Attributs min et max
Les attributs min et max sont utilisés pour définir les valeurs minimales et maximales acceptables pour les champs numériques et datés.
Syntaxe
<input type="number" name="age" min="18" max="99">
Exemple d'utilisation
Champ numérique
min: définit la valeur minimale acceptable. Dans cet exemple, l'âge minimum est de 18 ansmax: définit la valeur maximale acceptable. Dans cet exemple, l'âge maximum est de 99 ans
<form action="/" method="post">
<label for="birthday">Date de naissance (de 1900-01-01 à 2024-12-31) :</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
<button type="submit">Envoyer</button>
</form>
6.4 Attribut placeholder
L'attribut placeholder définit un texte d'espace réservé qui s'affiche à l'intérieur du champ de saisie tant que l'utilisateur n'a pas commencé à entrer de données. Cet attribut aide les utilisateurs à comprendre quelles données sont attendues dans le champ.
Syntaxe
<input type="text" name="username" placeholder="Entrez le nom d'utilisateur">
Exemple d'utilisation
L'attribut placeholder affiche le texte à l'intérieur du champ de saisie jusqu'à ce que l'utilisateur commence à entrer des données. Dans cet exemple, le texte de l'espace réservé est "Entrez le nom d'utilisateur".
<form action="/" method="post">
<label for="username">Nom d'utilisateur :</label>
<input type="text" id="username" name="username" placeholder="Entrez le nom d'utilisateur" required>
<button type="submit">Envoyer</button>
</form>
6.5 Attribut value
L'attribut value définit la valeur initiale pour un élément d'entrée. Cette valeur sera affichée dans le champ lors du chargement de la page ou de la réinitialisation du formulaire.
Syntaxe
<input type="text" name="username" value="default user">
Exemple d'utilisation
L'attribut value définit la valeur initiale du champ de saisie. Dans cet exemple, le nom d'utilisateur par défaut est "default user".
<form action="/" method="post">
<label for="username">Nom d'utilisateur :</label>
<input type="text" id="username" name="username" value="default user" required>
<button type="submit">Envoyer</button>
</form>
GO TO FULL VERSION