Apprends à créer des formulaires interactifs avec des champs de texte, des champs email, des textareas, des labels et des boutons de soumission pour collecter les données des utilisateurs.
Les formulaires permettent aux utilisateurs d'interagir avec les pages web — s'inscrire à des comptes, soumettre des requêtes de recherche, envoyer des messages, et plus encore. En HTML, tous les contrôles de formulaire sont enveloppés dans un élément <form>.
La balise <form> possède deux attributs importants :
action — l'URL où les données du formulaire seront envoyées lors de la soumissionmethod — la méthode HTTP à utiliser, généralement GET (pour les recherches/filtres) ou POST (pour soumettre des données qui modifient quelque chose sur le serveur)<form action="/submit" method="POST">
<!-- les contrôles de formulaire vont ici -->
</form>Bien que les applications web modernes gèrent souvent la soumission de formulaires avec JavaScript, l'élément <form> reste important pour l'accessibilité et l'amélioration progressive.
L'élément <input> est le contrôle de formulaire le plus polyvalent. Son attribut type détermine quel type de données il accepte :
type="text" — un champ de texte sur une seule ligne (par défaut)type="email" — un champ de texte qui valide le format emailtype="password" — le texte est masqué par des points ou des astérisquestype="number" — accepte uniquement des valeurs numériques, affiche des contrôles d'incrémentation/décrémentationChaque input doit avoir un <label> associé. Les labels sont essentiels pour l'accessibilité — ils indiquent aux utilisateurs de lecteurs d'écran à quoi sert chaque champ, et cliquer sur un label met le focus sur l'input associé.
Tu relies un label à un input en utilisant l'attribut for sur le label et un id correspondant sur l'input :
<label for="username">Nom d'utilisateur :</label>
<input type="text" id="username" name="username">L'attribut name est ce qui est envoyé au serveur — il agit comme la clé dans les données soumises.
<form action="/contact" method="POST">
<label for="name">Nom complet :</label>
<input type="text" id="name" name="name" required>
<label for="email">Adresse email :</label>
<input type="email" id="email" name="email" required>
<label for="age">Âge :</label>
<input type="number" id="age" name="age" min="0" max="150">
<label for="password">Mot de passe :</label>
<input type="password" id="password" name="password" required>
<label for="message">Message :</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">Envoyer le message</button>
</form>Pour une saisie de texte sur plusieurs lignes, utilise l'élément <textarea> plutôt que <input>. Contrairement à input, textarea a une balise fermante, et son contenu par défaut se place entre les balises. Tu peux contrôler sa taille avec les attributs rows et cols.
<textarea name="bio" rows="5" cols="40">Texte par défaut ici</textarea>Pour soumettre un formulaire, ajoute un <button> avec type="submit" ou un <input> avec type="submit". L'approche avec button est plus flexible car tu peux y mettre n'importe quel contenu (texte, icônes, etc.).
HTML5 fournit une validation de formulaire intégrée via des attributs :
required — le champ doit être rempli avant la soumissionminlength / maxlength — longueur minimale et maximale du textemin / max — valeurs minimale et maximale pour les inputs numériquespattern — une expression régulière que la valeur doit respecterCes validations se produisent automatiquement dans le navigateur, donnant aux utilisateurs un retour immédiat sans avoir besoin de JavaScript.
Pourquoi l'élément <label> est-il important pour les inputs de formulaire ?