1. A propos des formulaire HTML
Les formulaires HTML sont un élément essentiel dans le développement web, car ils permettent aux utilisateurs d'envoyer des données au serveur pour traitement. Ces derniers peuvent inclure des champs de texte, des cases à cocher, des boutons radio, etc. Dans ce chapitre nous allons vous fournir un tutoriel complet sur les formulaires HTML. Mais il faut noter que la validation d'un formulaire n'est réalisée qu'à l'aide d'un langage Backend comme PHP, NodeJS... Nous traitons ici juste la création et la description d'un formulaire HTML. Vous devez donc apprendre un langage Backend pour voir comment valider un formulaire.
2. Structure de base d'un formulaire
Un formulaires HTML est encapsulé dans la balise <form>. Vous pouvez spécifier la méthode d'envoi (GET ou POST) et l'action (URL du script de traitement) dans les attributs de la balise <form>.
Exemple
|
1 2 3 |
<form action="traitement.php" method="post"> <!-- Éléments de formulaire seront placés ici --> </form> |
3. Éléments de formulaire courants
3.1. Champ de texte
Pour créer un champ de texte simple, on utilise la balise <input> avec l'attribut type="text".
|
1 2 |
<label for="nom">Nom :</label> <input type="text" id="nom" name="nom"> |
3.2 Zone de texte (Textarea)
Pour créer une zone de texte multi-ligne, on utilise la balise <textarea>.
|
1 2 |
<label for="commentaire">Commentaire :</label> <textarea id="commentaire" name="commentaire" rows="4" cols="50"></textarea> |
3.3. Cases à cocher (Checkbox)
Les cases à cocher permettent aux utilisateurs de sélectionner une ou plusieurs options. Ces dernières peuvent être crées à l'aide de l'attribut type="checkbox" de la balise <input>
|
1 2 |
<label for="option1">Option 1 :</label> <input type="checkbox" id="option1" name="options[]" value="Option 1"> |
3.4. Boutons radio (Radio buttons)
Les boutons radio permettent aux utilisateurs de choisir une option parmi plusieurs. Elles peuvent être crées à l'aide de l'attribut type="radio" de la balise <input>
|
1 2 3 4 |
<label for="homme">Homme</label> <input type="radio" id="homme" name="sexe" value="Homme"> <label for="femme">Femme</label> <input type="radio" id="femme" name="sexe" value="Femme"> |
3.5. Menu déroulant (Select)
Pour créer un menu déroulant, on utilise la balise <select>.
|
1 2 3 4 5 6 7 8 9 |
<form> <label for="pays">Sélectionnez le Pays :</label> <select id="pays" name="pays"> <option value="france">France</option> <option value="espagne">Espagne</option> <option value="belgique">Belgique</option> <!-- Autres options --> </select> </form> |
Ce qui affiche au navigateur:
3.6. Bouton d'envoi (Submit button)
Il nous reste finalement un bouton d'envoi pour soumettre le formulaire. Ce dernier peut être crée à l'aide de la balise <button>.
|
1 |
<button type="submit">Envoyer</button> |
Exemple
|
1 2 3 4 5 6 7 8 9 |
<form> <pre> <label for="nom">Nom :</label> <input type="text" id="nom" name="nom"> <label for="commentaire">Commentaire :</label> <textarea id="commentaire" name="commentaire" rows="4" cols="50"></textarea> <button type="submit">Envoyer</button> </pre> </form> |
Ce qui affiche au navigateur:
4. Envoi de données à un serveur
Lorsque l'utilisateur soumet le formulaire, les données sont envoyées au serveur. L'attribut action de la balise <form> spécifie l'URL de traitement. L'attribut method spécifie la méthode d'envoi (GET ou POST).
5. Validation côté client
Pour rendre un champ obligatoire, on utilise l'attribut required . On peut également utiliser des attributs comme pattern pour définir des expressions régulières de validation.
6. Exemple de formulaire complet
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<form action="traitement.php" method="post"> <label for="nom">Nom :</label> <input type="text" id="nom" name="nom" required><br> <label for="email">Email :</label> <input type="email" id="email" name="email" required><br> <label for="sexe">Sexe :</label> <input type="radio" id="homme" name="sexe" value="Homme" required> <label for="homme">Homme</label> <input type="radio" id="femme" name="sexe" value="Femme" required> <label for="femme">Femme</label><br> <label for="pays">Pays :</label> <select id="pays" name="pays"> <option value="france">France</option> <option value="espagne">Espagne</option> <!-- Autres options --> </select><br> <button type="submit">Envoyer</button> </form> |
Ce qui affiche au navigateur:
Remarque
Comme déjà mentionné ci-dessus, afin que le formulaire soit opérationnel, il est nécessaire de créer un script de traitement côté serveur en PHP, NodeJS... pour gérer les données envoyées par le formulaire.
Younes Derfoufi
CRMEF OUJDA
1 thought on “Les Formulaires En HTML”