HTML(Formulaire) : Exercices corrigés

  1. Créer un formulaire de contact avec nom, prénom, adresse e-mail et message :
<form action="#" method="post">
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom" required><br>

  <label for="prenom">Prénom :</label>
  <input type="text" id="prenom" name="prenom" required><br>

  <label for="email">Adresse e-mail :</label>
  <input type="email" id="email" name="email" required><br>

  <label for="message">Message :</label>
  <textarea id="message" name="message" required></textarea><br>

  <input type="submit" value="Envoyer">
</form>
  1. Créer un formulaire d’inscription avec nom d’utilisateur, mot de passe et confirmation de mot de passe :
<form action="#" method="post">
  <label for="username">Nom d'utilisateur :</label>
  <input type="text" id="username" name="username" required><br>

  <label for="password">Mot de passe :</label>
  <input type="password" id="password" name="password" required><br>

  <label for="confirm-password">Confirmez le mot de passe :</label>
  <input type="password" id="confirm-password" name="confirm-password" required><br>

  <input type="submit" value="S'inscrire">
</form>
  • Créer un formulaire de sondage avec des cases à cocher pour plusieurs choix possibles :
  • <form action="#" method="post">
      <p>Quel est votre plat préféré ?</p>
    
      <input type="checkbox" id="plat1" name="plat" value="Pizza">
      <label for="plat1">Pizza</label><br>
    
      <input type="checkbox" id="plat2" name="plat" value="Burger">
      <label for="plat2">Burger</label><br>
    
      <input type="checkbox" id="plat3" name="plat" value="Sushi">
      <label for="plat3">Sushi</label><br>
    
      <input type="checkbox" id="plat4" name="plat" value="Pâtes">
      <label for="plat4">Pâtes</label><br>
    
      <input type="submit" value="Voter">
    </form>
    1. Créer un formulaire de réservation avec des champs pour le nom, l’adresse, la date d’arrivée, la date de départ et le nombre de personnes :
    <form action="#" method="post">
      <label for="nom">Nom :</label>
      <input type="text" id="nom" name="nom" required><br>
    
      <label for="adresse">Adresse :</label>
      <input type="text" id="adresse" name="adresse" required><br>
    
      <label for="date-arrivee">Date d'arrivée :</label>
      <input type="date" id="date-arrivee" name="date-arrivee" required><br>
    
      <label for="date-depart">Date de départ :</label>
      <input type="date" id="date-depart" name="date-depart" required><br>
    
      <label for="nombre-personnes">Nombre de personnes :</label>
      <input type="number" id="nombre-personnes" name="nombre-personnes" min="1" max="10" required><br>
    
      <input type="submit" value="Réserver">
    </form>
    1. Créer un formulaire de recherche avec un champ de texte pour le terme de recherche et une liste déroulante pour sélectionner une catégorie de recherche :
    <form action="#" method="get">
      <label for="recherche">Rechercher :</label>
      <input type="text" id="recherche" name="recherche" required><br>
    
      <label for="categorie">Catégorie :</label>
      <select id="categorie" name="categorie">
        <option value="tous">Tous</option>
        <option value="livres">Livres</option>
        <option value="musique">Musique</option>
        <option value="films">Films</option>
      </select><br>
    
      <input type="submit" value="Rechercher">
    </form>
    1. Créer un formulaire d’inscription avec nom, prénom, adresse e-mail, mot de passe et confirmation de mot de passe, en utilisant des champs de texte et de mot de passe :
    <form action="#" method="post">
      <label for="nom">Nom :</label>
      <input type="text" id="nom" name="nom" required><br>
    
      <label for="prenom">Prénom :</label>
      <input type="text" id="prenom" name="prenom" required><br>
    
      <label for="email">Adresse e-mail :</label>
      <input type="email" id="email" name="email" required><br>
    
      <label for="password">Mot de passe :</label>
      <input type="password" id="password" name="password" required><br>
    
      <label for="confirm-password">Confirmez le mot de passe :</label>
      <input type="password" id="confirm-password" name="confirm-password" required><br>
    
      <input type="submit" value="S'inscrire">
    </form>
    1. Créer un formulaire de contact avec des champs pour le nom, l’adresse e-mail, le sujet et le message :
    <form action="#" method="post">
      <label for="nom">Nom :</label>
      <input type="text" id="nom" name="nom" required><br>
    
      <label for="email">Adresse e-mail :</label>
      <input type="email" id="email" name="email" required><br>
    
      <label for="sujet">Sujet :</label>
      <input type="text" id="sujet" name="sujet" required><br>
    
      <label for="message">Message :</label>
      <textarea id="message" name="message" required></textarea><br>
    
      <input type="submit" value="Envoyer">
    </form>
    1. Créer un formulaire d’inscription à une newsletter avec un champ pour l’adresse e-mail et une case à cocher pour confirmer l’inscription :
    <form action="#" method="post">
      <label for="email">Adresse e-mail :</label>
      <input type="email" id="email" name="email" required><br>
    
      <label for="confirmation">Je confirme mon inscription à la newsletter :</label>
      <input type="checkbox" id="confirmation" name="confirmation" required><br>
    
      <input type="submit" value="S'inscrire">
    </form>
    1. Créer un formulaire de commande en ligne avec des cases à cocher pour les options de commande et des boutons radio pour la sélection du mode de paiement :
    htmlCopy code<form action="#" method="post">
      <label for="pizza">Pizza :</label>
      <input type="checkbox" id="pizza" name="pizza" value="1"><br>
    
      <label for="pates">Pâtes :</label>
      <input type="checkbox" id="pates" name="pates" value="1"><br>
    
      <label for="boisson">Boisson :</label>
      <input type="checkbox" id="boisson" name="boisson" value="1"><br>
    
      <label for="mode-paiement">Mode de paiement :</label>
      <input type="radio" id="carte-credit" name="mode-paiement" value="carte-credit" required>
      <label for="carte-credit">Carte de crédit</label>
    
      <input type="radio" id="paypal" name="mode-paiement" value="paypal" required>
      <label for="paypal">Paypal</label><br>
    
      <input type="submit" value="Commander">
    </form>
    1. Créer un formulaire d’inscription avec des champs pour le nom, l’adresse e-mail, le mot de passe et la confirmation du mot de passe :
    <form action="#" method="post">
      <label for="nom">Nom :</label>
      <input type="text" id="nom" name="nom" required><br>
    
      <label for="email">Adresse e-mail :</label>
      <input type="email" id="email" name="email" required><br>
    
      <label for="mot-de-passe">Mot de passe :</label>
      <input type="password" id="mot-de-passe" name="mot-de-passe" required><br>
    
      <label for="confirmation-mot-de-passe">Confirmation du mot de passe :</label>
      <input type="password" id="confirmation-mot-de-passe" name="confirmation-mot-de-passe" required><br>
    
      <input type="submit" value="S'inscrire">
    </form>
    1. Créer un formulaire de réservation avec des champs pour le nom, la date de réservation, le nombre de personnes et les commentaires :
    <form action="#" method="post">
      <label for="nom">Nom :</label>
      <input type="text" id="nom" name="nom" required><br>
    
      <label for="date">Date de réservation :</label>
      <input type="date" id="date" name="date" required><br>
    
      <label for="nombre-personnes">Nombre de personnes :</label>
      <input type="number" id="nombre-personnes" name="nombre-personnes" min="1" max="10" required><br>
    
      <label for="commentaires">Commentaires :</label>
      <textarea id="commentaires" name="commentaires"></textarea><br>
    
      <input type="submit" value="Réserver">
    </form>
    1. Créer un formulaire de connexion avec des champs pour l’adresse e-mail et le mot de passe :
    <form action="#" method="post">
      <label for="email">Adresse e-mail :</label>
      <input type="email" id="email" name="email" required><br>
    
      <label for="mot-de-passe">Mot de passe :</label>
      <input type="password" id="mot-de-passe" name="mot-de-passe" required><br>
    
      <input type="submit" value="Se connecter">
    </form>