Suggestions d'auteurs — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 6)

Suggestions d'auteurs

Formulaires · niveau 1 (application)

Énoncé

Écrire un champ « Auteur » qui suggère Camus, Saint-Exupéry, Cormen et Monier, tout en permettant de taper un autre nom. Quelle différence avec une liste déroulante <select> ?

Corrigé


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Auteur</title>
</head>
<body>
  <form action="/catalogue" method="get">
    <label for="auteur">Auteur</label>
    <input type="text" id="auteur" name="auteur" list="auteurs" autocomplete="off">
    <datalist id="auteurs">
      <option value="Camus"></option>
      <option value="Saint-Exupéry"></option>
      <option value="Cormen"></option>
      <option value="Monier"></option>
    </datalist>
    <button type="submit">Chercher</button>
  </form>
</body>
</html>

Un <select> impose un choix parmi les options ; un champ relié à une <datalist> les suggère seulement : on peut taper « Hugo » même s'il n'est pas dans la liste. autocomplete="off" évite que les saisies passées du navigateur se mêlent aux suggestions.