Adloun

HTML : structurer le Web (école d'ingénieur) · Chapitre 6 · Exercice de TD

Contraintes de format

Formulaires · niveau 2

Énoncé

Écrire un formulaire avec :

  • un code postal obligatoire de 5 chiffres, avec le clavier numérique sur mobile ;
  • un téléphone fixe facultatif au format 01 45 92 65 00 (un 0, un chiffre de 1 à 9, puis quatre fois une espace et deux chiffres) ;
  • un nombre d'exemplaires de 5 à 50, par multiples de 5.

Lesquelles de ces saisies sont acceptées : 93160, 9316, 01 45 92 65 00, 0145926500, 15, 12 ?

Corrigé


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Adresse</title>
</head>
<body>
  <form action="/adresse" method="post">
    <p>
      <label for="cp">Code postal</label>
      <input type="text" id="cp" name="cp" inputmode="numeric" pattern="[0-9]{5}" title="5 chiffres" autocomplete="postal-code" required>
    </p>
    <p>
      <label for="tel">Téléphone fixe</label>
      <input type="tel" id="tel" name="tel" pattern="0[1-9]( [0-9]{2}){4}" title="Format : 01 45 92 65 00">
    </p>
    <p>
      <label for="exemplaires">Exemplaires (par 5, de 5 à 50)</label>
      <input type="number" id="exemplaires" name="exemplaires" min="5" max="50" step="5" value="5">
    </p>
    <p><button type="submit">Valider</button></p>
  </form>
</body>
</html>
  • 93160 : accepté (5 chiffres) ; 9316 : refusé (4 chiffres seulement).
  • 01 45 92 65 00 : accepté ; 0145926500 : refusé, car le motif exige les espaces. (Un vrai site accepterait les deux formes ; on retiendra surtout qu'un pattern doit correspondre à la valeur entière.)
  • 15 : accepté (entre 5 et 50, et ) ; 12 : refusé, ce n'est pas plus un multiple du pas .

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →