HTML & CSS

Support de cours élaboré par : Youssef CHAFAI

Date : 18 mai 2025 | Version : 1.0

Exercices HTML – Section 6: Formulaires

Exercice 1 – Créer un formulaire de contact simple

Créez un formulaire de contact avec des champs pour le nom (texte), l'email (email), et un message (zone de texte multilignes). Ajoutez un bouton d'envoi.

<!-- Votre code ici -->

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulaire de Contact</title>
  <style>
    form { margin-top: 1em; padding: 1em; border: 1px dashed #ccc; border-radius: 4px;}
    label { display: block; margin-bottom: 0.5em; font-weight: bold;}
    input[type="text"], input[type="email"], textarea {
        display: block;
        width: calc(100% - 1em);
        padding: 0.5em;
        margin-bottom: 1em;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    button[type="submit"] {
        background-color: #0077cc;
        color: white;
        border: none;
        padding: 0.6rem 1.3rem;
        border-radius: 5px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    button[type="submit"]:hover {
        background-color: #005f99;
    }
  </style>
</head>
<body>
  <form action="/submit" method="post">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">

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

    <label for="message">Message :</label>
    <textarea id="message" name="message" rows="4"></textarea>

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

Exercice 2 – Ajouter des champs obligatoires

Reprenez le formulaire de l'exercice 1 et rendez les champs "Nom" et "Email" obligatoires.

<!-- Votre code ici -->

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulaire Obligatoire</title>
  <style>
    form { margin-top: 1em; padding: 1em; border: 1px dashed #ccc; border-radius: 4px;}
    label { display: block; margin-bottom: 0.5em; font-weight: bold;}
    input[type="text"], input[type="email"], textarea {
        display: block;
        width: calc(100% - 1em);
        padding: 0.5em;
        margin-bottom: 1em;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
     button[type="submit"] {
        background-color: #0077cc;
        color: white;
        border: none;
        padding: 0.6rem 1.3rem;
        border-radius: 5px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    button[type="submit"]:hover {
        background-color: #005f99;
    }
  </style>
</head>
<body>
  <form action="/submit" 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="message">Message :</label>
    <textarea id="message" name="message" rows="4"></textarea>

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

Exercice 3 – Utiliser différents types d'input

Créez un formulaire avec les champs suivants : un nom d'utilisateur (texte avec placeholder), un mot de passe (password), un âge (number avec min/max), et une date de rendez-vous (date).

<!-- Votre code ici -->

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Types d'Input</title>
  <style>
    form { margin-top: 1em; padding: 1em; border: 1px dashed #ccc; border-radius: 4px;}
    label { display: block; margin-bottom: 0.5em; font-weight: bold;}
    input[type="text"], input[type="password"], input[type="number"], input[type="date"] {
        display: block;
        width: calc(100% - 1em);
        padding: 0.5em;
        margin-bottom: 1em;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
     button[type="submit"] {
        background-color: #0077cc;
        color: white;
        border: none;
        padding: 0.6rem 1.3rem;
        border-radius: 5px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    button[type="submit"]:hover {
        background-color: #005f99;
    }
  </style>
</head>
<body>
  <form action="/submit" 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">

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

    <label for="rendezvous">Date de rendez-vous :</label>
    <input type="date" id="rendezvous" name="rendezvous">

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

Exercice 4 – Ajouter des boutons radio et une case à cocher

Ajoutez à un formulaire des options pour choisir un genre (boutons radio) et une case à cocher pour s'inscrire à une newsletter.

<!-- Votre code ici -->

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radio et Checkbox</title>
   <style>
    form { margin-top: 1em; padding: 1em; border: 1px dashed #ccc; border-radius: 4px;}
    label { display: block; margin-bottom: 0.5em; font-weight: bold;}
     input[type="radio"], input[type="checkbox"] {
         margin-right: 0.5em;
     }
     fieldset {
         margin-bottom: 1em;
         padding: 1em;
         border: 1px solid #ccc;
         border-radius: 4px;
     }
     legend {
         font-weight: bold;
         padding: 0 0.5em;
     }
     button[type="submit"] {
        background-color: #0077cc;
        color: white;
        border: none;
        padding: 0.6rem 1.3rem;
        border-radius: 5px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    button[type="submit"]:hover {
        background-color: #005f99;
    }
  </style>
</head>
<body>
  <form action="/submit" method="post">
    <fieldset>
      <legend>Genre :</legend>
      <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>
      <input type="radio" id="autre" name="genre" value="autre">
      <label for="autre">Autre</label>
    </fieldset>

    <label for="newsletter">S'inscrire à la newsletter :</label>
    <input type="checkbox" id="newsletter" name="newsletter" value="oui">

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

Exercice 5 – Utiliser un menu déroulant (select)

Créez un menu déroulant pour choisir un pays dans une liste de quelques options.

<!-- Votre code ici -->

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Déroulant</title>
   <style>
    form { margin-top: 1em; padding: 1em; border: 1px dashed #ccc; border-radius: 4px;}
    label { display: block; margin-bottom: 0.5em; font-weight: bold;}
     select {
         display: block;
         width: calc(100% - 1em);
         padding: 0.5em;
         margin-bottom: 1em;
         border: 1px solid #ccc;
         border-radius: 4px;
     }
     button[type="submit"] {
        background-color: #0077cc;
        color: white;
        border: none;
        padding: 0.6rem 1.3rem;
        border-radius: 5px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    button[type="submit"]:hover {
        background-color: #005f99;
    }
  </style>
</head>
<body>
  <form action="/submit" method="post">
    <label for="pays">Choisissez un pays :</label>
    <select id="pays" name="pays">
      <option value="">-- Sélectionnez un pays --</option>
      <option value="france">France</option>
      <option value="canada">Canada</option>
      <option value="belgique">Belgique</option>
      <option value="suisse">Suisse</option>
    </select>

    <button type="submit">Envoyer</button>
  </form>
</body>
<html>
```
↑ Sommaire