Les formulaires en HTML constituent un élément essentiel dans la conception de sites web interactifs. Ils permettent aux utilisateurs de saisir et de soumettre des données, ce qui est crucial pour l'interaction avec le site. Dans cet article, nous allons explorer en détail les formulaires en HTML, ainsi que les différents types de champs disponibles pour la collecte de données.
Un formulaire HTML est une zone de votre page web qui contient des champs (ou éléments) permettant à l'utilisateur de saisir des informations.
Un champ (ou champ de formulaire) est un élément interactif d’un formulaire HTML qui permet à l’utilisateur de saisir, sélectionner ou envoyer des données.
Chaque champ correspond à une balise HTML spécifique comme <input>, <select>, <textarea>, etc. Il est souvent lié à un nom (name) qui servira d’identifiant pour récupérer la donnée côté serveur.
Lorsque l'utilisateur soumet le formulaire, les données saisies sont généralement envoyées à un serveur web pour traitement ultérieur. Les formulaires sont largement utilisés pour la collecte d'informations telles que les coordonnées, les commentaires, les préférences utilisateur, etc.
Voici la structure de base d'un formulaire HTML :
<form action="/url-du-traitement" method="post">
<!-- Champs du formulaire -->
</form>action : L'attribut action spécifie l'URL vers laquelle les données du formulaire seront envoyées pour traitement.method : L'attribut method définit la méthode HTTP utilisée pour envoyer les données du formulaire (plus d'informations dans un cours suivant).
<input type="text" name="...">Le champ de texte permet à l'utilisateur de saisir du texte sur une seule ligne.
Exemple :
<label for="nom">Nom :</label>
<input type="text" name="nom_complet">
<input type="password" name="...">Le champ de mot de passe masque les caractères saisis par l'utilisateur, utile pour la saisie de mots de passe sensibles.
Exemple :
<label for="motdepasse">Mot de passe :</label>
<input type="password" name="motdepasse">
<label for="motdepasse">Confirmez le mot de passe :</label>
<input type="password" name="confirmation">
<textarea>
</textarea>Le champ de texte multiligne permet à l'utilisateur de saisir du texte sur plusieurs lignes. Contrairement aux autres champs, la textarea possède une balise ouvrante et fermante.
Exemple :
<label for="commentaire">Votre commentaire :</label>
<textarea id="commentaire" name="commentaire" rows="4" cols="50"></textarea>
<input type="checkbox" name="...">Une case à cocher (checkbox) permet à l’utilisateur de cocher ou décocher une option binaire : oui / non, vrai / faux, activé / désactivé, etc.
C’est un champ de type booléen : il peut être coché (valeur envoyée) ou non coché (aucune valeur envoyée).
Les cases à cocher permettent aussi à l'utilisateur de sélectionner une ou plusieurs options parmi une liste proposée.
Exemples :
<label>
<input type="checkbox" name="conditions" value="ok"> J'accepte les conditions générales
</label>
Centres d'intérêt:
<label><input type="checkbox" name="cours[]" value="sport"></label>
<label><input type="checkbox" name="cours[]" value="musique"></label>
<label><input type="checkbox" name="cours[]" value="techno"></label>Dans le cas où plusieurs valeurs peuvent être sélectionnées, il faut ajouter des crochets [] au champ name. Cela indique au serveur qu'il va recevoir un tableau de valeurs.
💡 Le fait d'entourer votre checkbox avec une balise <label> permet à l'utilisateur de cliquer sur le texte pour (dé)cocher votre case.
<input type="radio" name="...">Les boutons radio permettent à l'utilisateur de sélectionner une seule option parmi plusieurs.
Exemple :
Genre :<br>
<label><input type="radio" name="genre" value="homme"> Homme</label>
<label><input type="radio" name="genre" value="femme"> Femme</label>
<label><input type="radio" name="genre" value="autre"> Autre</label>Vous pouvez utiliser l'attribut name pour regrouper plusieurs options dans un même groupe. Dans l'exemple ci-dessus (genre), vous ne pouvez choisir qu'un seul genre parmi les propositions car les 3 input ont le même name.
<select name="..." [multiple]>
<option value="..."></option>
<option value="..."></option>
...
</select>La liste déroulante permet à l'utilisateur de sélectionner une ou plusieurs options dans un menu déroulant.
Exemple :
<label for="pays">Pays :</label>
<select id="pays" name="pays" multiple>
<option value="be">Belgique</option>
<option value="fr">France</option>
<option value="ca">Canada</option>
</select>La valeur qui se trouve entre les balises <option> sera affichée dans la liste déroulante. La valeur de l'attribut value sera envoyée au serveur.
L'attribut optionnel multiple permet d'indiquer que l'utilisateur peut sélectionner plusieurs éléments dans la liste. S'il n'est pas spécifié, l'utilisateur ne pourra sélectionner qu'un seul élément.
Les formulaires en HTML permettent d'interagir avec les utilisateurs et collecter des données sur les sites web. En utilisant les différents types de champs disponibles, vous pouvez créer des interfaces utilisateur riches et intuitives. N'hésitez pas à expérimenter avec les formulaires HTML pour répondre aux besoins spécifiques de votre site web.