Balise de formulaire : <form>

La balise <form> est l'un des éléments les plus importants en HTML pour créer des formulaires interactifs dans une page web. Les formulaires permettent aux utilisateurs de saisir des données et de les envoyer à un serveur web pour traitement. Dans cette section, nous allons explorer en détail la balise <form> et ses attributs.

Structure de base d'une balise <form>

La balise <form> est une balise d'ouverture et de fermeture qui entoure tous les éléments du formulaire. Voici la structure de base d'une balise <form> :

<form action="/traitement" method="post">
    <!-- éléments de formulaire ici -->
</form>

Dans cet exemple, nous avons spécifié deux attributs essentiels pour la balise <form> :

• L'attribut action : Cet attribut spécifie l'URL ou l'emplacement du serveur web qui va traiter les données du formulaire. Lorsque l'utilisateur soumet le formulaire, les données seront envoyées à cette URL pour traitement.
• L'attribut method : Cet attribut indique la méthode d'envoi des données du formulaire au serveur. Les deux méthodes les plus courantes sont post et get. La méthode post envoie les données de manière sécurisée en les incluant dans le corps de la requête HTTP, tandis que la méthode get les envoie en tant que paramètres de l'URL.

Éléments de formulaire

À l'intérieur de la balise <form>, vous pouvez ajouter différents éléments de formulaire pour permettre aux utilisateurs d'interagir avec le formulaire. Voici quelques exemples d'éléments de formulaire couramment utilisés :

Champ de saisie <input>

La balise <input> est utilisée pour créer des champs de saisie où les utilisateurs peuvent entrer du texte, des nombres, des adresses e-mail, etc. Voici un exemple d'utilisation de la balise <input> pour créer un champ de saisie de texte :

<input type="text" name="nom" placeholder="Entrez votre nom" />

Dans cet exemple, nous avons spécifié l'attribut type avec la valeur text pour créer un champ de saisie de texte. L'attribut name est utilisé pour identifier le champ de saisie lors de la soumission du formulaire.

Bouton <button>

La balise <button> est utilisée pour créer des boutons dans le formulaire. Ils peuvent être utilisés pour soumettre le formulaire, réinitialiser les valeurs, ou déclencher des actions spécifiques. Voici un exemple d'utilisation de la balise <button> :

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

Dans cet exemple, nous avons spécifié l'attribut type avec la valeur submit pour créer un bouton qui soumet le formulaire lorsqu'il est cliqué.

Menu déroulant <select> et options <option>

Le menu déroulant est utilisé lorsque les utilisateurs doivent sélectionner une option parmi plusieurs. La balise <select> est utilisée pour créer le menu déroulant et la balise <option> est utilisée pour définir les différentes options. Voici un exemple :

<select name="pays">
    <option value="france">France</option>
    <option value="espagne">Espagne</option>
    <option value="italie">Italie</option>
</select>

Dans cet exemple, nous avons créé un menu déroulant avec trois options : France, Espagne et Italie. L'attribut name est utilisé pour identifier le menu déroulant lors de la soumission du formulaire.

Cases à cocher <input type="checkbox"> et boutons radio <input type="radio">

Les cases à cocher et les boutons radio permettent aux utilisateurs de faire des choix multiples ou uniques. Voici un exemple d'utilisation de ces éléments :

<input type="checkbox" name="langue" value="francais" /> Français
<input type="checkbox" name="langue" value="anglais" /> Anglais
 
<input type="radio" name="genre" value="homme" /> Homme
<input type="radio" name="genre" value="femme" /> Femme

Dans cet exemple, nous avons créé des cases à cocher pour les langues et des boutons radio pour le genre. Les attributs name sont utilisés pour regrouper les choix similaires, tandis que les attributs value sont utilisés pour spécifier la valeur associée à chaque choix.

Conclusion

La balise <form> est essentielle pour créer des formulaires interactifs dans les pages web. En utilisant les attributs action et method, vous pouvez spécifier l'URL de traitement des données et la méthode d'envoi. Les éléments de formulaire tels que les champs de saisie, les boutons, les menus déroulants, les cases

à cocher et les boutons radio permettent aux utilisateurs de fournir des informations et d'interagir avec le formulaire.

Il est important de prendre en compte la sécurité des données lors de la conception des formulaires. Vous pouvez utiliser des techniques de validation côté client et côté serveur pour garantir que les données saisies sont correctes et sécurisées.

Continuez à explorer les différentes possibilités offertes par la balise <form> et les autres éléments de formulaire pour créer des interfaces utilisateur interactives et conviviales.