Testez vos compétences : les contrôles de base

Le but de cette évaluation est de vérifier que vous avez compris l'article sur les contrôles de formulaire natifs de base.

Note : Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut être plus utile de télécharger le code et de passer par un éditeur en ligne comme CodePen, JSFiddle ou Glitch pour travailler sur les exercices.

Si vous bloquez, demandez-nous de l'aide : voir la section Évaluation et aide en bas de cette page.

Contrôles de base 1

Cet exercice démarre en douceur et demande la création de deux éléments <input>, le premier qui devra permettre de saisir un identifiant d'une utilisatrice ou d'un utilisateur et le second dans lequel on pourra saisir un mot de passe. Il faudra également ajouter un élément pour envoyer le formulaire.

  1. Créez les éléments <input> appropriés pour l'identifiant et le mot de passe.
  2. Associez sémantiquement ces éléments avec leur libellé.
  3. Créez un bouton d'envoi à l'intérieur de l'élément restant, qui doit faire apparaître le texte « Connexion ».

Essayez de modifier le code qui suit pour recréer l'exemple complet :

Note : Vous pouvez télécharger les fichiers de base pour cet exercice si vous préférez utiliser votre propre éditeur ou un éditeur en ligne.

Contrôles de base 2

L'exercice qui suit porte sur la création d'ensemble de cases à cocher et de boutons radio, ainsi que celle des libellés associés.

  1. Transformez le contenu du premier élément <fieldset> en un ensemble de boutons radio, on ne doit pouvoir sélectionner qu'un seul personnage à la fois.
  2. Faites le nécessaire pour que le premier bouton radio soit sélectionné au chargement de la page.
  3. Transformez le contenu du deuxième élément <fieldset> en un ensemble de cases à cocher.
  4. Ajouter quelques choix supplémentaires pour les différents sandwiches.

Essayez de modifier le code qui suit pour recréer l'exemple complet :

Note : Vous pouvez télécharger les fichiers de base pour cet exercice si vous préférez utiliser votre propre éditeur ou un éditeur en ligne.

Contrôles de base 3

Dans ce dernier exercice, vous devrez créer un sélecteur de fichier.

  1. Créez un sélecteur de fichier simple.
  2. Ajoutez ce qu'il faut pour permettre la sélection de plusieurs fichiers à la fois.
  3. Transformez le sélecteur de fichier pour accepter uniquement les images JPG et PNG.

Essayez de modifier le code qui suit pour recréer l'exemple complet :

Note : Vous pouvez télécharger les fichiers de base pour cet exercice si vous préférez utiliser votre propre éditeur ou un éditeur en ligne.

Évaluation et aide

Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page.

Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :

  1. Enregistrez votre travail dans un éditeur en ligne partageable, du type CodePen, JSFiddle ou Glitch. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus.

  2. Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie « Apprentissage » (Learning) du forum Discourse de MDN. Votre message doit inclure :

    • Un titre explicite, par exemple « Évaluation demandée pour le test de modèle de boîte CSS 1 ».
    • Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail.
    • Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code !
    • Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide.