Skip to main content

Les formulaires en HTML

Choisissez votre classe

Les formulaires sont essentiels dans le développement web. Ils permettent aux utilisateurs de saisir des informations et de les envoyer à un serveur pour traitement. Que ce soit pour un simple formulaire de contact, une inscription à une newsletter, ou un processus de commande, les formulaires sont omniprésents. Ce module va te guider à travers les différents éléments qui composent un formulaire en HTML.

La Balise <form> : Le Conteneur du Formulaire​

La balise <form> est le conteneur principal de tous les éléments d’un formulaire. C’est ici que tu vas regrouper les différents champs (textes, boutons, cases à cocher, etc.) que l’utilisateur peut remplir ou sélectionner.

Attributs principaux de la balise <form> :​

action : Cet attribut spécifie l’URL vers laquelle les données du formulaire seront envoyées une fois que l’utilisateur appuie sur le bouton “Submit”. Par exemple, si ton formulaire envoie des données vers un script PHP pour traitement, tu indiqueras l’URL de ce script ici.

form
<form action="/submit-form" method="post">

method : Cet attribut définit la méthode HTTP utilisée pour envoyer les données. Il y a principalement deux méthodes : GET : Les données du formulaire sont envoyées en tant que paramètres d’URL. C’est une méthode appropriée pour les requêtes simples, mais elle est limitée en taille.

form
<form action="/submit-form" method="get">

POST : Les données du formulaire sont envoyées dans le corps de la requête HTTP. C’est la méthode préférée pour envoyer des informations sensibles ou de grande taille.

form
<form action="/submit-form" method="post">
info

La documentation pour la balise <form> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/form

La Balise <label> : Étiqueter les Champs du Formulaire​

La balise <label> est utilisée pour fournir une description claire des champs de formulaire. Elle permet aux utilisateurs de savoir quel type d’information est attendu dans un champ donné.

Attributs et utilisation :​

for : L’attribut for est utilisé pour associer un <label> à un élément de formulaire particulier, généralement un champ <input>. La valeur de for doit correspondre à l’attribut id de l’élément de formulaire correspondant.

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

L’avantage d’utiliser <label> est qu’il améliore l’accessibilité. Lorsque tu cliques sur le texte d’un label, le champ associé est automatiquement sélectionné, ce qui facilite l’interaction pour les utilisateurs.

Point important

L'attribut for de <label> doit avoir la même valeur que l'attribut name de la balise <input>

info

La documentation pour la balise <label> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/label

La Balise <input> : Différents Types de Champs​

La balise <input> est utilisée pour créer des champs interactifs dans un formulaire, permettant à l’utilisateur de saisir des informations. C’est l’une des balises les plus polyvalentes en HTML car elle supporte de nombreux types de données.

Attributs et types courants :​

type : Cet attribut définit le type de champ de saisie. Les types les plus courants sont :

text : Champ de texte​

Champ standard pour la saisie de texte simple.

form
<input type="text" id="username" name="username">

password : Champ de texte​

Champ de texte qui masque les caractères saisis (utile pour les mots de passe).

form
<input type="password" id="password" name="password">

email : Champ de texte pour la saisie d’une adresse email, avec une validation de format automatique.​

form
<input type="email" id="email" name="email">

number : Champ pour la saisie de nombres. Ce champ peut inclure des boutons pour augmenter ou diminuer la valeur.​

form
<input type="number" id="age" name="age" min="1" max="100">

checkbox : Case à cocher pour les options multiples. L’utilisateur peut cocher plusieurs cases dans un groupe.​

form
<input type="checkbox" id="subscribe" name="subscribe">

radio : Bouton radio pour sélectionner une option parmi plusieurs dans un groupe.​

form
<input type="radio" id="gender-male" name="gender" value="male">
<input type="radio" id="gender-female" name="gender" value="female">

submit : Bouton pour envoyer le formulaire.​

form
<input type="submit" value="Envoyer">

name : Cet attribut est crucial car il identifie le champ de formulaire lors de l’envoi des données. Chaque champ de​

formulaire doit avoir un nom unique ou pertinent.

form
<input type="text" id="username" name="username">

value : Cet attribut spécifie la valeur initiale du champ. Par exemple, pour un champ de texte, la valeur spécifiée​

sera le texte par défaut affiché dans le champ.

form
<input type="text" id="username" name="username" value="Entrez votre nom">
info

La documentation pour la balise <input> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/input

La Balise <button> : Créer des Boutons Interactifs​

Le bouton est l’élément que l’utilisateur clique pour soumettre le formulaire ou déclencher une action spécifique.

Types de Boutons :​

type="submit" : Par défaut, ce type de bouton soumet le formulaire lorsqu’il est cliqué.​

form
<button type="submit">Envoyer</button>

type="button" : Ce bouton peut être utilisé pour exécuter une action personnalisée, souvent avec JavaScript.​

form
<button type="button" onclick="alert('Bouton cliqué!')">Cliquez-moi</button>

type="reset" : Ce bouton réinitialise tous les champs du formulaire à leurs valeurs initiales.​

form
<button type="reset">Réinitialiser</button>

Les boutons peuvent également contenir du texte, des images, ou même des icônes :

form
<button type="submit">
    <img src="icon.png" alt="Envoyer"> Envoyer
</button>
info

La documentation pour la button <button> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/button

Exemple Complet d’un Formulaire en HTML :​

Voici un exemple de formulaire complet qui combine tout ce que nous avons vu :

form
<form action="/submit-form" method="post">
    <label for="username">Nom d'utilisateur :</label>
    <input type="text" id="username" name="username" placeholder="Entrez votre nom d'utilisateur">

    <label for="password">Mot de passe :</label>
    <input type="password" id="password" name="password" placeholder="Entrez votre mot de passe">

    <label for="email">Adresse email :</label>
    <input type="email" id="email" name="email" placeholder="Entrez votre email">

    <label for="age">Âge :</label>
    <input type="number" id="age" name="age" min="1" max="100">

    <label>Genre :</label>
    <input type="radio" id="gender-male" name="gender" value="male">
    <label for="gender-male">Homme</label>
    <input type="radio" id="gender-female" name="gender" value="female">
    <label for="gender-female">Femme</label>

    <label for="subscribe">S'abonner à la newsletter :</label>
    <input type="checkbox" id="subscribe" name="subscribe">

    <button type="submit">Envoyer</button>
    <button type="reset">Réinitialiser</button>
</form>

Avec ce module, tu as maintenant une vue d’ensemble détaillée de ce qu’est un formulaire en HTML et comment l’utiliser pour interagir avec tes utilisateurs. Les formulaires sont la clé pour obtenir des informations et les traiter, et maîtriser leur création est essentiel pour tout développeur web.