Testez vos compétences : Formulaires et boutons

L'objectif de ce test de compétences est de vous aider à évaluer si vous comprenez comment fonctionnent les formulaires et boutons HTML.

Note : Pour obtenir de l'aide, consultez notre guide d'utilisation Testez vos compétences. Vous pouvez également nous contacter par l'un de nos canaux de communication.

Formulaires et boutons n°1

Cette tâche commence doucement en vous demandant de créer deux éléments <input>, pour l'identifiant et le mot de passe d'un·e utilisateur·ice, ainsi qu'un bouton d'envoi.

Pour compléter la tâche :

Créez des champs de saisie appropriés pour l'identifiant et le mot de passe.
Vous devez également les associer sémantiquement à leurs étiquettes de texte.
Créez un bouton d'envoi à l'intérieur de l'élément de liste restant, avec le texte du bouton « Se connecter ».

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<form>
  <ul>
    <li>Identifiant utilisateur</li>
    <li>Mot de passe</li>
    <li></li>
  </ul>
</form>

Le formulaire mis à jour doit ressembler à ceci :

Cliquez ici pour afficher la solution

Votre code HTML final doit ressembler à ceci :

html

<form>
  <ul>
    <li>
      <label for="uid">Identifiant utilisateur</label>
      <input type="text" id="uid" name="uid" />
    </li>
    <li>
      <label for="pwd">Mot de passe</label>
      <input type="password" id="pwd" name="pwd" />
    </li>
    <li>
      <button>Se connecter</button>
    </li>
  </ul>
</form>

Formulaires et boutons n°2

La tâche suivante vous demande de créer des ensembles fonctionnels de cases à cocher et de boutons radio, à partir des étiquettes de texte fournies.

Pour compléter la tâche :

Transformez le contenu du premier <fieldset> en un ensemble de boutons radio — vous ne devez pouvoir sélectionner qu'un seul personnage de poney à la fois.
Faites en sorte que le premier bouton radio soit sélectionné au chargement de la page.
Transformez le contenu du deuxième <fieldset> en un ensemble de cases à cocher.
Ajoutez quelques choix de hot-dog supplémentaires de votre cru.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<form>
  <fieldset>
    <legend>Quel est votre poney préféré ?</legend>
    <ul>
      <li>
        <label for="licorne">La petite licorne</label>
      </li>
      <li>
        <label for="soleil">Rayon de soleil</label>
      </li>
      <li>
        <label for="crepuscule">Étoile du crépuscule</label>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Préférences de hot-dog</legend>
    <ul>
      <li>
        <label for="vegan">Végan</label>
      </li>
      <li>
        <label for="onions">Oignons</label>
      </li>
    </ul>
  </fieldset>
  <button>Envoyer</button>
</form>

Le formulaire mis à jour doit ressembler à ceci :

Cliquez ici pour afficher la solution

Votre code HTML final doit ressembler à ceci :

html

<form>
  <fieldset>
    <legend>Quel est votre poney préféré ?</legend>
    <ul>
      <li>
        <label for="licorne">La petite licorne</label>
        <input type="radio" id="licorne" name="pony" value="licorne" checked />
      </li>
      <li>
        <label for="soleil">Rayon de soleil</label>
        <input type="radio" id="soleil" name="pony" value="soleil" />
      </li>
      <li>
        <label for="crepuscule">Étoile du crépuscule</label>
        <input type="radio" id="crepuscule" name="pony" value="crepuscule" />
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Préférences de hot-dog</legend>
    <ul>
      <li>
        <label for="vegan">Végan</label>
        <input type="checkbox" id="vegan" name="hotdog_vegan" />
      </li>
      <li>
        <label for="ognions">Oignons</label>
        <input type="checkbox" id="ognions" name="hotdog_ognions" />
      </li>
      <li>
        <label for="moutarde">Moutarde</label>
        <input type="checkbox" id="moutarde" name="hotdog_moutarde" />
      </li>

      <li>
        <label for="ketchup">Ketchup</label>
        <input type="checkbox" id="ketchup" name="hotdog_ketchup" />
      </li>
    </ul>
  </fieldset>
  <button>Envoyer</button>
</form>

Formulaires et boutons n°3

Dans cette tâche, vous allez explorer des types d'entrée plus spécifiques. Nous voulons que vous créiez des entrées appropriées pour qu'un·e utilisateur·ice puisse mettre à jour ses informations :

Courriel
Site web
Numéro de téléphone
Couleur préférée

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<form>
  <h2>Modifier vos préférences</h2>
  <ul>
    <li>
      <label for="courriel">Courriel</label>
    </li>
    <li>
      <label for="site-web">Site web</label>
    </li>
    <li>
      <label for="telephone">Numéro de téléphone</label>
    </li>
    <li>
      <label for="couleur-fav">Couleur préférée</label>
    </li>
    <li>
      <button>Mettre à jour les préférences</button>
    </li>
  </ul>
</form>

Le formulaire mis à jour doit ressembler à ceci :

Cliquez ici pour afficher la solution

Votre code HTML final doit ressembler à ceci :

html

<form>
  <h2>Modifier vos préférences</h2>
  <ul>
    <li>
      <label for="courriel">Courriel</label>
      <input type="email" id="courriel" name="courriel" />
    </li>
    <li>
      <label for="site-web">Site web</label>
      <input type="url" id="site-web" name="site-web" />
    </li>
    <li>
      <label for="telephone">Numéro de téléphone</label>
      <input type="tel" id="telephone" name="telephone" />
    </li>
    <li>
      <label for="couleur-fav">Couleur préférée</label>
      <input type="color" id="couleur-fav" name="couleur-fav" />
    </li>
    <li>
      <button>Mettre à jour les préférences</button>
    </li>
  </ul>
</form>

Formulaires et boutons n°4

Maintenant, il est temps d'essayer de mettre en place un menu déroulant, pour permettre à un·e utilisateur·ice de choisir son plat préféré parmi les options fournies.

Pour compléter la tâche :

Créez une structure de boîte de sélection de base.
Associez-la sémantiquement avec l'étiquette « nourriture » fournie.
À l'intérieur de la liste, divisez les choix en 2 sous-groupes — "plats principaux" et "snacks".

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<form>
  <ul>
    <li>
      <label for="nourriture">Choisissez votre nourriture préférée :</label>

      Salade Curry Pizza Fajitas Biscuits Chips Fruit Bâtonnets de pain
    </li>
    <li>
      <button>Envoyer le choix</button>
    </li>
  </ul>
</form>

Le formulaire mis à jour doit ressembler à ceci :

Cliquez ici pour afficher la solution

Votre code HTML final doit ressembler à ceci :

html

<form>
  <ul>
    <li>
      <label for="nourriture">Choisissez votre nourriture préférée :</label>
      <select name="nourriture" id="nourriture">
        <optgroup label="plats principaux">
          <option>Salade</option>
          <option>Curry</option>
          <option>Pizza</option>
          <option>Fajitas</option>
        </optgroup>
        <optgroup label="snacks">
          <option>Biscuits</option>
          <option>Chips</option>
          <option>Fruit</option>
          <option>Bâtonnets de pain</option>
        </optgroup>
      </select>
    </li>
    <li>
      <button>Envoyer le choix</button>
    </li>
  </ul>
</form>

Formulaires et boutons n°5

Dans cette tâche, nous voulons que vous structuriez les fonctionnalités de formulaire fournies.

Pour compléter la tâche :

Séparez les deux premiers champs de formulaire et les deux derniers en deux conteneurs distincts, chacun avec une légende descriptive (utilisez "Détails personnels" pour les deux premiers, et "Informations sur le commentaire" pour les deux derniers).
Marquez chaque étiquette de texte avec un élément approprié afin qu'elle soit sémantiquement associée à son champ de formulaire respectif.
Ajoutez un ensemble approprié d'éléments structurels autour des paires étiquette/champ pour les séparer.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<form>
  Nom :
  <input type="text" id="nom" name="nom" />

  Âge :
  <input type="number" id="age" name="age" />

  Commentaire :
  <input type="text" id="commentaire" name="commentaire" />

  Courriel :
  <input type="email" id="courriel" name="courriel" />
</form>

Le formulaire mis à jour doit ressembler à ceci :

Cliquez ici pour afficher la solution

Votre code HTML final doit ressembler à ceci :

html

<form>
  <fieldset>
    <legend>Détails personnels</legend>
    <ul>
      <li>
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" />
      </li>
      <li>
        <label for="age">Âge :</label>
        <input type="number" id="age" name="age" />
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Informations sur le commentaire</legend>
    <ul>
      <li>
        <label for="commentaire">Commentaire :</label>
        <input type="text" id="commentaire" name="commentaire" />
      </li>
      <li>
        <label for="courriel">Courriel :</label>
        <input type="email" id="courriel" name="courriel" />
      </li>
    </ul>
  </fieldset>
</form>

Dans cette tâche, nous vous fournissons un formulaire simple de demande de support, et nous voulons que vous y ajoutiez certaines fonctionnalités de validation. Cette tâche nécessite des connaissances que nous n'enseignons pas dans l'article « Formulaires et boutons en HTML », vous devez donc peut-être faire des recherches ailleurs.

Pour compléter la tâche :

Rendez tous les champs de saisie obligatoires avant que le formulaire puisse être envoyé.
Changez le type des champs "Adresse e-mail" et "Numéro de téléphone" pour que le navigateur applique une validation plus spécifique adaptée aux données demandées.
Donnez au champ « Nom d'utilisateur » une longueur requise comprise entre 5 et 20 caractères, au champ "Numéro de téléphone" une longueur maximale de 15 caractères, et au champ "Commentaire" une longueur maximale de 200 caractères.

Essayez d'envoyer votre formulaire — il doit refuser de s'envoyer tant que les contraintes ci-dessus ne sont pas respectées, et afficher des messages d'erreur appropriés.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

html

<form>
  <h2>Entrez votre demande de support</h2>
  <ul>
    <li>
      <label for="uname">Nom d'utilisateur :</label>
      <input type="text" name="uname" id="uname" />
    </li>
    <li>
      <label for="courriel">Adresse e-mail :</label>
      <input type="text" name="courriel" id="courriel" />
    </li>
    <li>
      <label for="telephone">Numéro de téléphone :</label>
      <input type="text" name="telephone" id="telephone" />
    </li>
    <li>
      <label for="commentaire">Commentaire :</label>
      <textarea name="commentaire" id="commentaire"> </textarea>
    </li>
    <li>
      <button>Envoyer le commentaire</button>
    </li>
  </ul>
</form>

Nous n'avons pas fourni de contenu final pour cette tâche, car il ressemble au point de départ.

Cliquez ici pour afficher la solution

Votre code HTML final doit ressembler à ceci :

html

<form>
  <h2>Entrez votre demande de support</h2>
  <ul>
    <li>
      <label for="uname">Nom d'utilisateur :</label>
      <input
        type="text"
        name="uname"
        id="uname"
        required
        minlength="5"
        maxlength="20" />
    </li>
    <li>
      <label for="courriel">Adresse e-mail :</label>
      <input type="email" name="courriel" id="courriel" required />
    </li>
    <li>
      <label for="telephone">Numéro de téléphone :</label>
      <input
        type="tel"
        name="telephone"
        id="telephone"
        required
        maxlength="15" />
    </li>
    <li>
      <label for="commentaire">Commentaire :</label>
      <textarea
        name="commentaire"
        id="commentaire"
        required
        maxlength="200"></textarea>
    </li>
    <li>
      <button>Envoyer le commentaire</button>
    </li>
  </ul>
</form>

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 15 juin 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Testez vos compétences : Formulaires et boutons

Formulaires et boutons n°1

Formulaires et boutons n°2

Formulaires et boutons n°3

Formulaires et boutons n°4

Formulaires et boutons n°5

Formulaires et boutons n°6

Aider à améliorer MDN