Aller au contenu principal

TP4 - Les formulaires

Objectif

Manipuler des formulaires.

Memento de balises

Un mémento sur les balises à utiliser ainsi que leurs attributs est disponible sur ce lien.

Memento CSS

Un mémento des propriétés CSS est disponible sur ce lien.

Memento JS

Un mémento de l'utilisation du JS est disponible sur ce lien

Les formulaires HTML sont utilisés pour collecter des informations auprès des utilisateurs, telles que des noms, des adresses e-mail, des commentaires, des préférences, etc.
Une fois que l'utilisateur remplit le formulaire, il peut l'envoyer à un serveur pour être traité (en général via une méthode d'envoi, tels que POST ou GET).

Les formulaires HTML sont créés à l'aide de la balise <form>. À l'intérieur de ce formulaire, on pourra mettre différents types de champs d'entrée tels que des champs de texte, des boutons radio, des cases à cocher, des menus déroulants, etc.

Voici la structure basique d'un formulaire :

<form action="traitement.php" method="POST">
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom" required>

  <label for="email">Email :</label>
  <input type="email" id="email" name="email" required>

  <label for="commentaire">Commentaire :</label>
  <textarea id="commentaire" name="commentaire"></textarea>

  <button type="submit">Envoyer</button>
</form>
  • <form> : Élément principal qui définit le début et la fin du formulaire.
  • action : L'URL du script qui traitera les données soumises (ex. traitement.php).
  • method : Méthode utilisée pour envoyer les données. Les deux principales sont POST (envoi des données de manière sécurisée) et GET (envoi des données dans l'URL).
  • <label> : Étiquette pour associer un champ d'entrée à une description lisible. L'attribut for doit correspondre à l'attribut id du champ d'entrée auquel il est lié, ce qui améliore l'accessibilité.
  • <input> : Champ pour saisir des données.
  • type : Définit le type d'entrée (ex. text, email, password, etc.).
  • name : Nom du champ, utilisé pour envoyer la donnée au serveur.
  • required : Indique que le champ est obligatoire.
  • <textarea>: Champ de texte multi-lignes pour des commentaires ou des messages longs.
  • <button> : Bouton pour envoyer le formulaire.

Différents types d'input​

Le champ <input> peut avoir différents types, chacun permettant de saisir des données dans des formats spécifiques :

  • Texte : <input type="text"> Pour saisir du texte normal.
  • Email : <input type="email"> Pour saisir une adresse e-mail. Il valide la structure de l'adresse (ex. exemple@domaine.com).
  • Mot de passe : <input type="password"> Pour saisir un mot de passe. Le texte est masqué.
  • Case à cocher : <input type="checkbox"> Permet à l'utilisateur de sélectionner plusieurs options.
  • Boutons radio : <input type="radio"> Permet à l'utilisateur de choisir une seule option parmi un ensemble.
  • Nombre : <input type="number"> Permet de saisir uniquement des nombres.
  • Date : <input type="date"> Permet de sélectionner une date.
  • File : <input type="file"> Permet de sélectionner un fichier à télécharger.

Exemple d’utilisation de boutons radio et de cases à cocher :

<form>
  <label for="genre">Genre :</label><br>
  <input type="radio" id="homme" name="genre" value="homme">
  <label for="homme">Homme</label><br>
  <input type="radio" id="femme" name="genre" value="femme">
  <label for="femme">Femme</label><br>

  <label for="langues">Langues parlées :</label><br>
  <input type="checkbox" id="francais" name="langues" value="francais">
  <label for="francais">Français</label><br>
  <input type="checkbox" id="anglais" name="langues" value="anglais">
  <label for="anglais">Anglais</label><br>

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

Autres éléments​

  • <select> et <option> : Liste déroulante (menu déroulant).
    Exemple : 
    <form>
        <label for="pays">Choisissez votre pays :</label>
        <select id="pays" name="pays">
            <option value="france">France</option>
            <option value="allemagne">Allemagne</option>
            <option value="espagne">Espagne</option>
        </select>
        <button type="submit">Envoyer</button>
    </form>
  • <textarea>: Zone de texte multi-lignes pour les commentaires.
    Exemple : 
    <form>
        <label for="message">Message :</label><br>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br>
        <button type="submit">Envoyer</button>
    </form>

Validation des formulaires​

HTML5 propose plusieurs attributs pour valider automatiquement les données des formulaires avant l'envoi :

  • required : Indique qu'un champ est obligatoire.
  • pattern : Permet de spécifier un motif (expression régulière) que la valeur doit correspondre.
  • min, max : Définit les valeurs minimales et maximales pour les champs numériques ou de date.
  • maxlength : Limite le nombre de caractères qu'un champ peut contenir.

Exemple de validation de formulaire :

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

  <label for="email">Email :</label>
  <input type="email" id="email" name="email" required><br>

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

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

Envoi des données​

Lorsque l'utilisateur soumet le formulaire, les données sont envoyées à l'URL spécifiée dans l'attribut action du formulaire. Cela peut se faire de deux manières :

  • Méthode GET : Les données sont envoyées dans l'URL (visible et limitée en taille). Exemple : example.com?nom=John&email=john@example.com ;
  • Méthode POST : Les données sont envoyées dans le corps de la requête HTTP (plus sécurisé et aucune limite de taille).

Exercices​

1. Formulaire de contact simple​

Objectif : Créer un formulaire permettant à un utilisateur de contacter un site web. Le formulaire doit contenir :

  • Un champ pour le nom ;
  • Un champ pour l'email ;
  • Un champ de texte pour le message ;
  • Un bouton pour soumettre.

Instructions :

  1. Utiliser les éléments form, label, input, textarea, et button.
  2. S'assurer que les champs "nom" et "email" sont obligatoires à remplir avant l'envoi du formulaire.
  3. Le champ email doit être validé automatiquement pour s'assurer qu'il respecte le format d'une adresse email valide.

2. Formulaire d'inscription​

Objectif : Créer un formulaire d'inscription avec les champs suivants :

  • Prénom ;
  • Nom ;
  • Email ;
  • Mot de passe ;
  • Confirmation du mot de passe ;
  • Un bouton pour soumettre.

Instructions :

  1. Les champs "prénom", "nom", "email", et "mot de passe" sont obligatoires.
  2. Le champ "mot de passe" doit être validé pour une longueur minimale de 8 caractères.
  3. Le champ "confirmation du mot de passe" doit être identique au champ "mot de passe".
  4. Le champ "email" doit respecter le format d'une adresse e-mail valide.

3. Formulaire avec des cases à cocher​

Objectif : Créer un formulaire pour demander à un utilisateur de choisir ses préférences de communication via des cases à cocher.

Champs à inclure :

  • Case à cocher pour recevoir des newsletters ;
  • Case à cocher pour être informé des promotions ;
  • Case à cocher pour accepter les termes et conditions.

Instructions :

  1. Les cases "accepter les termes et conditions" doivent être obligatoires.
  2. Ajoutez un bouton de soumission à la fin du formulaire.