Le langage HTML | Chapitre 6 : Les formulaires

Introduction aux formulaires HTML

Les formulaires HTML sont des éléments cruciaux pour toute application web qui nécessite des interactions avec les utilisateurs. Que ce soit pour collecter des données, recevoir des commentaires ou permettre aux utilisateurs de s’inscrire à un service, les formulaires sont omniprésents. Dans ce chapitre, nous allons explorer les différentes balises et attributs utilisés pour créer des formulaires efficaces.

Les balises de base d’un formulaire

Pour commencer, la balise principale qui contient toutes les autres est la balise <form>. Elle peut inclure divers attributs tels que method et action. L’attribut method spécifie comment les données seront envoyées (GET ou POST), tandis que action indique l’URL où les données seront envoyées.

Voici un exemple simple d’un formulaire de contact :

<form action='submit.php' method='POST'>
 <label for='name'>Nom:</label>
 <input type='text' id='name' name='name'>
 <label for='email'>Email:</label>
 <input type='email' id='email' name='email'>
 <input type='submit' value='Envoyer'>
</form>

Les types d’input

Les formulaires HTML utilisent différents types d’entrées grâce à la balise <input>. Voici quelques types courants :

• text – Pour les entrées de texte standard.
• email – Pour les adresses e-mail, ce type validera automatiquement le format.
• password – Pour les mots de passe, le texte saisi sera caché.
• checkbox – Pour des options que l’utilisateur peut cocher.
• radio – Pour permettre à l’utilisateur de choisir une seule option parmi plusieurs.

Examinons un exemple d’un champ de mot de passe :

<form>
 <label for='password'>Mot de passe:</label>
 <input type='password' id='password' name='password'>
</form>

Les éléments de formulaire supplémentaires

En plus des inputs standard, il existe d’autres éléments comme <textarea> pour les zones de texte plus grandes, et <select> pour les listes déroulantes.

Voici comment créer une zone de texte :

<form>
 <label for='message'>Message:</label>
 <textarea id='message' name='message' rows='4' cols='50'></textarea>
</form>

Validation des formulaires

HTML5 a introduit des attributs de validation qui aident à garantir que les données soumises sont correctes. Des attributs comme required et pattern peuvent être très utiles. L’attribut required rend un champ obligatoire, tandis que pattern permet de définir une expression régulière que l’entrée doit correspondre.

Voici un exemple avec l’attribut required :

<form>
 <label for='email'>Email (obligatoire) :</label>
 <input type='email' id='email' name='email' required>
</form>

Accessibilité et bonnes pratiques

L’accessibilité est un aspect souvent négligé dans le développement des formulaires. Il est essentiel de fournir des étiquettes claires pour chaque champ et d’utiliser des attributs comme for pour lier les étiquettes aux champs correspondants. Cela aide non seulement les utilisateurs avec des handicaps, mais améliore également l’expérience d’utilisation générale.

Conclusion

Les formulaires HTML sont un outil puissant et flexible pour interagir avec les utilisateurs. En utilisant les balises et attributs appropriés, vous pouvez créer des formulaires qui non seulement collectent des informations, mais sont également accessibles et conviviaux.