La carte de fidélité — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 6)

La carte de fidélité

Formulaires · niveau 2

Énoncé

Écrire le formulaire de demande de carte de fidélité : nom complet, date de naissance, courriel et téléphone, nombre approximatif de livres achetés par an (entier entre 0 et 200), photo (JPEG ou PNG). Les trois premiers champs sont obligatoires. Choisir pour chaque champ le meilleur type et la bonne valeur d'autocomplete. Quel attribut faut-il ajouter à <form> pour que la photo soit réellement envoyée ?

Corrigé


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Carte de fidélité</title>
</head>
<body>
  <h1>Demander la carte de fidélité</h1>
  <form action="/fidelite" method="post">
    <p>
      <label for="nom">Nom complet</label>
      <input type="text" id="nom" name="nom" autocomplete="name" required>
    </p>
    <p>
      <label for="naissance">Date de naissance</label>
      <input type="date" id="naissance" name="naissance" required>
    </p>
    <p>
      <label for="courriel">Courriel</label>
      <input type="email" id="courriel" name="courriel" autocomplete="email" required>
    </p>
    <p>
      <label for="tel">Téléphone</label>
      <input type="tel" id="tel" name="tel" autocomplete="tel">
    </p>
    <p>
      <label for="livres">Livres achetés par an (environ)</label>
      <input type="number" id="livres" name="livres" min="0" max="200" step="1">
    </p>
    <p>
      <label for="photo">Photo pour la carte</label>
      <input type="file" id="photo" name="photo" accept="image/jpeg, image/png">
    </p>
    <p><button type="submit">Demander ma carte</button></p>
  </form>
</body>
</html>

Le formulaire doit porter enctype="multipart/form-data" (avec method="post", déjà présent) : sans cet attribut, le navigateur n'envoie que le nom du fichier choisi. Le nombre de livres est un number (c'est bien une quantité), la date un date (calendrier, et valeur au format AAAA-MM-JJ).