Les formulaires HTML occupent une place centrale dans les interactions entre l’utilisateur et une application web.
Ils permettent de collecter des informations, de valider des choix et de déclencher des actions essentielles.
Dans les études en développement web, les examens techniques et les concours, la maîtrise des formulaires est considérée comme une compétence fondamentale, car elle combine structure, validation et accessibilité.
Les QCM proposés abordent les notions clés liées à la saisie utilisateur, au contrôle des données et à l’expérience d’utilisation.
Ils mettent en lumière l’importance d’une validation claire, d’un balisage sémantique précis et d’un retour visuel adapté.
Ces éléments contribuent à créer des formulaires fiables, compréhensibles et accessibles à tous.
L’objectif est d’aider le lecteur à comprendre les mécanismes qui rendent un formulaire efficace, tout en respectant les bonnes pratiques modernes du web.
Les formulaires HTML occupent une place centrale dans les interactions entre l’utilisateur et une application web.
Ils permettent de collecter des informations, de valider des choix et de déclencher des actions essentielles.
Dans les études en développement web, les examens techniques et les concours, la maîtrise des formulaires est considérée comme une compétence fondamentale, car elle combine structure, validation et accessibilité.
Les QCM proposés abordent les notions clés liées à la saisie utilisateur, au contrôle des données et à l’expérience d’utilisation.
Ils mettent en lumière l’importance d’une validation claire, d’un balisage sémantique précis et d’un retour visuel adapté.
Ces éléments contribuent à créer des formulaires fiables, compréhensibles et accessibles à tous.
L’objectif est d’aider le lecteur à comprendre les mécanismes qui rendent un formulaire efficace, tout en respectant les bonnes pratiques modernes du web.
QCM
1
Corrigé
Quel attribut HTML5 permet de rendre la saisie d'un champ obligatoire avant l'envoi du formulaire ?
A. validate
B. required
C. mandatory
D. check
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'attribut 'required' déclenche une validation native du navigateur qui bloque l'envoi si le champ est vide.
QCM
2
Corrigé
Quelle balise permet de lier sémantiquement un texte à un champ de saisie pour l'accessibilité ?
A. <text>
B. <span>
C. <label>
D. <caption>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La balise <label> avec l'attribut 'for' permet aux lecteurs d'écran d'identifier la fonction du champ.
QCM
3
Corrigé
Quel attribut ARIA est indispensable pour associer une erreur de validation textuelle à un champ spécifique ?
A. aria-label
B. aria-describedby
C. aria-linked
D. aria-help
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
aria-describedby lie l'ID de l'élément d'erreur au champ, permettant au lecteur d'écran de lire l'erreur.
QCM
4
Corrigé
Quelle pseudo-classe CSS cible un input dont la valeur ne respecte pas le format défini (ex: type='email') ?
A. :wrong
B. :error
C. :invalid
D. :not-valid
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La pseudo-classe :invalid s'active automatiquement dès que les contraintes de validation ne sont pas remplies.
QCM
5
Corrigé
Comment s'appelle l'attribut qui permet de définir un motif de validation via une expression régulière (Regex) ?
A. regex
B. format
C. pattern
D. match
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'attribut 'pattern' permet de valider des formats complexes (ex: codes postaux, mots de passe spécifiques).
QCM
6
Corrigé
Quelle balise HTML est utilisée pour regrouper logiquement plusieurs champs (ex: Coordonnées) ?
A. <group>
B. <section>
C. <fieldset>
D. <box>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<fieldset> regroupe les champs et est souvent accompagné d'une balise <legend>.
QCM
7
Corrigé
Quel attribut permet de désactiver la complétion automatique suggérée par le navigateur ?
A. autocomplete='off'
B. no-history='true'
C. suggest='none'
D. private='on'
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
L'attribut 'autocomplete' peut être placé sur un <input> ou sur le <form> entier.
QCM
8
Corrigé
Quelle propriété CSS permet de modifier la couleur du curseur de texte (la barre qui clignote) ?
A. cursor-color
B. caret-color
C. text-focus-color
D. pointer-style
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
caret-color permet de personnaliser l'apparence du curseur d'insertion de texte.
QCM
9
Corrigé
Quel input HTML5 permet de sélectionner une valeur dans une plage définie via un curseur glissant ?
A. <input type='slider'>
B. <input type='range'>
C. <input type='scroll'>
D. <input type='level'>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'input 'range' affiche un potentiomètre linéaire.
QCM
10
Corrigé
Pour l'accessibilité, quelle est la taille minimale recommandée pour une zone cliquable sur mobile (WCAG) ?
A. 20x20px
B. 32x32px
C. 44x44px
D. 60x60px
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Une cible d'au moins 44 pixels évite les erreurs de clic pour les utilisateurs tactiles.
QCM
11
Corrigé
Quelle pseudo-classe cible un champ qui est actuellement en train de recevoir de la saisie ?
A. :active
B. :focus
C. :hover
D. :selected
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:focus indique l'élément qui possède l'attention du clavier/système.
QCM
12
Corrigé
Quelle est la fonction de l'attribut 'placeholder' ?
A. Remplacer le label
B. Afficher un exemple de saisie dans le champ vide
C. Définir la valeur par défaut envoyée au serveur
D. Masquer le mot de passe
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le placeholder ne remplace pas le label car il disparaît dès la saisie.
QCM
13
Corrigé
Comment styliser un input seulement s'il possède une valeur (non vide) en pur CSS ?
A. input:not(:placeholder-shown)
B. input:value
C. input:not(:empty)
D. input:active
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
:placeholder-shown permet de détecter indirectement si l'utilisateur a tapé quelque chose.
QCM
14
Corrigé
Quel attribut HTML permet de limiter le nombre de caractères autorisés dans un textarea ?
A. limit
B. maxlength
C. size
D. length-max
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
maxlength bloque physiquement la saisie au-delà de la limite définie.
QCM
15
Corrigé
Quelle balise permet de proposer une liste de suggestions auto-complétées à un input ?
A. <suggestions>
B. <datalist>
C. <select>
D. <listbox>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<datalist> offre une liste d'options tout en laissant l'utilisateur libre de saisir autre chose.
QCM
16
Corrigé
Quelle propriété CSS permet de désactiver la poignée de redimensionnement en bas d'un textarea ?
A. resize: none;
B. overflow: hidden;
C. user-resize: false;
D. fixed-size: true;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Cela fige les dimensions du champ de texte multi-lignes.
QCM
17
Corrigé
En accessibilité, que fait 'aria-required="true"' ?
A. Il rend le champ obligatoire pour le navigateur
B. Il indique aux technologies d'assistance que le champ est obligatoire
C. Il change la couleur du champ en rouge
D. Il ajoute une étoile automatique
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Il double l'attribut 'required' pour une meilleure compatibilité avec certains lecteurs d'écran.
QCM
18
Corrigé
Quel sélecteur cible un bouton radio ou une checkbox sélectionnée ?
A. :active
B. :selected
C. :checked
D. :on
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
:checked est spécifique aux éléments de type toggle (radio/checkbox/option).
QCM
19
Corrigé
Que permet de définir l'attribut 'step' sur un input de type 'number' ?
A. Le nombre de chiffres après la virgule
B. L'incrément lors de l'utilisation des flèches
C. La vitesse de défilement
D. Le nombre d'étapes de validation
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Si step='10', cliquer sur la flèche passera de 0 à 10, puis 20, etc.
QCM
20
Corrigé
Quelle propriété CSS permet de modifier la couleur de l'accentuation des cases à cocher natives ?
A. checkbox-color
B. accent-color
C. control-color
D. widget-tint
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
accent-color est une propriété moderne pour styliser les contrôles natifs simplement.
QCM
21
Corrigé
Quel attribut doit-on ajouter à une image décorative pour qu'elle soit ignorée par les lecteurs d'écran ?
A. alt='decorative'
B. alt='' (vide)
C. aria-hidden='false'
D. role='image'
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Un attribut alt vide signale au lecteur d'écran que l'image n'apporte pas d'information.
QCM
22
Corrigé
Lequel de ces types d'input n'existe PAS en HTML5 ?
A. type='date'
B. type='color'
C. type='search'
D. type='address'
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Il n'existe pas de type 'address' natif, on utilise 'text' ou 'textarea' avec autocomplete.
QCM
23
Corrigé
Quelle pseudo-classe CSS cible un input qui ne peut pas être modifié par l'utilisateur ?
A. :disabled
B. :read-only
C. :locked
D. :static
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:read-only cible les champs avec l'attribut 'readonly', contrairement à :disabled qui grise le champ.
QCM
24
Corrigé
Comment s'appelle l'effet qui entoure un champ lors de la navigation au clavier (souvent un cadre bleu) ?
A. Border
B. Outline
C. Shadow
D. Highlight
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'outline ne doit jamais être supprimé (outline: none) sans proposer d'alternative visuelle.
QCM
25
Corrigé
Quel attribut HTML permet de forcer le clavier mobile à afficher le pavé numérique pour un champ texte ?
A. inputmode='numeric'
B. type='digit'
C. keyboard='number'
D. mode='decimal'
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
inputmode permet de contrôler l'interface clavier indépendamment du type d'input.
QCM
26
Corrigé
Que fait la pseudo-classe ':focus-within' sur un formulaire ?
A. Elle cible l'input ayant le focus
B. Elle cible le conteneur parent si l'un de ses enfants a le focus
C. Elle cible uniquement les formulaires invalides
D. Elle interdit le focus
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Très utile pour mettre en évidence tout un groupe de champs ou un formulaire quand on commence à le remplir.
QCM
27
Corrigé
Quelle propriété CSS permet de cacher visuellement un label tout en le laissant lisible par les lecteurs d'écran ?
A. display: none;
B. visibility: hidden;
C. Positionnement hors-écran (ex: left: -9999px)
D. opacity: 0;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Les classes 'sr-only' (screen reader only) utilisent souvent des propriétés de clip ou de positionnement extrême.
QCM
28
Corrigé
Quel attribut définit la valeur minimale acceptée dans un input de type 'date' ?
A. min
B. start
C. date-min
D. from
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
On utilise 'min' et 'max' pour limiter les plages de dates (ex: empêcher de choisir une date passée).
QCM
29
Corrigé
Quelle est l'utilité de la balise <legend> ?
A. Créer une infobulle
B. Donner un titre au groupe de champs défini par <fieldset>
C. Expliquer les erreurs de saisie
D. Afficher les CGU
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elle est l'étiquette sémantique du conteneur fieldset.
QCM
30
Corrigé
Que permet la propriété 'appearance: none;' en CSS ?
A. Rendre l'élément invisible
B. Supprimer le style natif du système d'exploitation pour le personnaliser
C. Supprimer les bordures
D. Désactiver le clic
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Essentiel pour styliser totalement les balises <select> ou les boutons natifs.
QCM
31
Corrigé
Quelle est la fonction du sélecteur ':focus-within' ?
A. Il cible un élément uniquement lorsqu'il est cliqué avec la souris.
B. Il s'applique à un élément parent si l'un de ses descendants a le focus.
C. Il empêche le focus de sortir d'un formulaire.
D. Il cible l'élément qui a reçu le focus juste avant l'actuel.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
':focus-within' est idéal pour mettre en surbrillance un formulaire entier ou une ligne de tableau lorsqu'un champ interne est activé.
QCM
32
Corrigé
En CSS, que permet de définir la propriété 'image-rendering' ?
A. La vitesse de chargement d'une image de fond.
B. L'algorithme de mise à l'échelle pour éviter le flou (ex: pixel-art).
C. La conversion automatique d'une image en noir et blanc.
D. La compression des données de l'image côté client.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La valeur 'pixelated' permet de conserver des bords nets lors de l'agrandissement d'images de petite résolution.
QCM
33
Corrigé
Quelle est la particularité de l'unité 'svh' par rapport à 'vh' ?
A. Elle est fixe et ne change jamais selon l'appareil.
B. Elle correspond à 10% de la largeur du viewport.
C. Elle s'adapte dynamiquement à la présence ou non des barres d'outils du navigateur mobile.
D. Elle est réservée aux écrans Retina haute définition.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'svh' (Small Viewport Height) garantit que le contenu n'est pas caché sous l'interface rétractable des navigateurs mobiles.
QCM
34
Corrigé
Dans quel but utilise-t-on la propriété 'hanging-punctuation' ?
A. Pour forcer le texte à s'afficher verticalement.
B. Pour placer les signes de ponctuation (guillemets, points) en dehors de la boîte de texte.
C. Pour supprimer les points à la fin de chaque paragraphe.
D. Pour souligner uniquement les signes de ponctuation.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est une propriété typographique avancée qui permet d'aligner visuellement le bord du texte en décalant la ponctuation dans la marge.
QCM
35
Corrigé
Quel sélecteur permet de cibler un élément qui ne contient aucun enfant (ni élément, ni texte, ni commentaire) ?
A. :blank
B. :void
C. :null
D. :empty
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Le sélecteur ':empty' est strict : le moindre espace blanc ou retour à la ligne à l'intérieur de la balise invalide la sélection.
QCM
36
Corrigé
Que fait la propriété 'forced-color-adjust' ?
A. Elle sature les couleurs pour les rendre plus vives.
B. Elle permet de préserver certaines couleurs dans le mode 'Contraste élevé' de Windows.
C. Elle force le navigateur à ignorer le mode sombre de l'utilisateur.
D. Elle ajuste automatiquement la luminosité des images.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Utile pour l'accessibilité, elle permet de garder le contrôle sur des éléments critiques quand le système impose ses propres couleurs.
QCM
37
Corrigé
Quelle est la valeur par défaut de la propriété 'flex-direction' ?
A. column
B. row-reverse
C. row
D. column-reverse
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Par défaut, un conteneur Flex dispose ses éléments horizontalement, de la gauche vers la droite (en mode LTR).
QCM
38
Corrigé
À quoi sert la propriété 'contain-intrinsic-size' ?
A. À définir une taille par défaut pour un élément dont le rendu est différé par 'content-visibility'.
B. À limiter la taille d'une image à sa résolution d'origine.
C. À empêcher un élément enfant de sortir de son parent.
D. À forcer un ratio d'aspect 1:1 sur tous les blocs.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Elle évite les sauts de mise en page (layout shifts) en réservant l'espace avant que le contenu ne soit réellement dessiné.
QCM
39
Corrigé
Quelle est l'utilité du mot-clé 'safe' dans une propriété d'alignement (ex: align-items: safe center) ?
A. Il empêche l'élément de déborder de son parent s'il est trop grand.
B. Il active la protection contre les injections de code CSS.
C. Il garantit que l'alignement reste lisible pour les malvoyants.
D. Il s'assure que le contenu reste accessible s'il dépasse du conteneur (pas de coupure en haut).
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Le mot-clé 'safe' bascule l'alignement vers 'start' si le centrage risque de rendre une partie du contenu inatteignable.
QCM
40
Corrigé
Comment cibler un élément <input> qui a été modifié par l'utilisateur mais n'a pas encore été soumis ?
A. :dirty
B. :user-invalid
C. :modified
D. :placeholder-shown
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
':user-invalid' (et ':user-valid') permet de styliser les erreurs de formulaire uniquement après que l'utilisateur a interagi avec le champ.
Mots & Définitions
Consultez les définitions des termes importants.
La validation HTML5 permet de contrôler automatiquement les données saisies dans un formulaire avant son envoi. Elle repose sur des attributs intégrés qui réduisent les erreurs de saisie. Cela améliore à la fois l’expérience utilisateur et la qualité des données.
L’attribut required indique qu’un champ doit obligatoirement être rempli. Le navigateur empêche l’envoi du formulaire si ce champ est vide. C’est une base essentielle de la validation côté client.
Le label associe un texte descriptif à un champ de saisie. Il améliore l’accessibilité et facilite l’utilisation au clavier ou avec des lecteurs d’écran. Un bon label rend un formulaire plus clair et plus utilisable.
L’accessibilité des formulaires vise à rendre la saisie compréhensible et utilisable par tous les utilisateurs. Elle prend en compte le clavier, les lecteurs d’écran et les aides techniques. C’est un critère fondamental des normes actuelles.
Les attributs ARIA fournissent des informations supplémentaires aux technologies d’assistance. Ils complètent le HTML lorsque la sémantique native ne suffit pas. Leur usage améliore la compréhension des champs et des messages.
Les pseudo-classes de formulaire permettent de cibler les champs selon leur état. Elles indiquent par exemple si un champ est actif, invalide ou sélectionné. Elles facilitent un retour visuel clair pour l’utilisateur.
Le pattern définit une règle de saisie basée sur une expression régulière. Il permet de contrôler le format des données attendues. Cette méthode renforce la cohérence des informations saisies.
Le fieldset sert à regrouper logiquement plusieurs champs de formulaire. Il améliore la structure et la compréhension globale du formulaire. Il est particulièrement utile pour les formulaires complexes.
La balise legend donne un titre explicite à un groupe de champs. Elle explique le rôle de l’ensemble sans alourdir l’interface. Elle renforce la clarté et l’accessibilité.
L’autocomplétion permet au navigateur de suggérer des valeurs déjà connues. Elle accélère la saisie mais peut être désactivée dans certains contextes sensibles. Son usage doit être réfléchi.
Ce type de champ permet de sélectionner une valeur à l’aide d’un curseur. Il est souvent utilisé pour des réglages progressifs. Il rend l’interaction plus visuelle et intuitive.
Le focus clavier indique l’élément actuellement actif lors de la navigation sans souris. Il est indispensable pour les utilisateurs utilisant le clavier. Un focus visible améliore fortement l’accessibilité.
L’outline est un contour visuel affiché lorsqu’un élément reçoit le focus. Il n’affecte pas la mise en page. Il joue un rôle clé dans la navigation au clavier.
Le placeholder affiche un exemple de saisie dans un champ vide. Il aide l’utilisateur à comprendre ce qui est attendu. Il ne remplace cependant jamais un label.
Datalist permet de proposer des suggestions de saisie tout en laissant l’utilisateur libre. Il combine flexibilité et assistance. C’est un outil pratique pour guider la saisie.
Accent-color permet de personnaliser la couleur des contrôles natifs comme les cases à cocher. Elle respecte le comportement du navigateur tout en harmonisant le design. Elle facilite la cohérence visuelle.
Une image décorative n’apporte aucune information essentielle au contenu. Elle doit être ignorée par les lecteurs d’écran. Cela évite une surcharge inutile pour les utilisateurs non voyants.
Inputmode suggère au navigateur le type de clavier le plus adapté. Il améliore la saisie sur mobile sans changer le type de champ. C’est un détail important pour l’ergonomie.
Focus-within cible un conteneur lorsque l’un de ses champs est actif. Il permet de mettre en valeur un groupe de champs. Cette approche améliore la lisibilité des formulaires.
Appearance permet de neutraliser le style natif imposé par le système. Elle donne plus de liberté pour personnaliser les champs. Son usage est courant dans les interfaces modernes.
À propos de ce QCM
Les concepts évalués dans ces QCM couvrent l’ensemble des bonnes pratiques liées aux formulaires HTML et à leur stylisation CSS.
Ils reposent d’abord sur la validation des données, qui permet d’éviter les erreurs de saisie et d’assurer la cohérence des informations envoyées.
Cette validation côté client améliore la fluidité de l’expérience utilisateur tout en réduisant les traitements inutiles.
Une autre dimension essentielle concerne l’accessibilité.
Associer correctement les champs à leurs descriptions, signaler les erreurs de manière compréhensible et assurer une navigation fluide au clavier sont des exigences incontournables.
Ces aspects garantissent que les formulaires restent utilisables par tous, y compris les personnes utilisant des technologies d’assistance.
Les QCM mettent également en avant la personnalisation visuelle des champs.
Grâce aux propriétés CSS modernes, il est possible d’adapter l’apparence des contrôles tout en conservant leur comportement natif.
Cela permet d’allier identité graphique et ergonomie.
Les états visuels, comme le focus ou la sélection, jouent un rôle clé dans la compréhension des interactions.
Enfin, l’adaptation aux usages mobiles est pleinement intégrée.
Le choix du clavier, la taille des zones cliquables et la gestion des suggestions contribuent à une saisie plus rapide et plus confortable.
Travailler ces notions développe des compétences solides en conception de formulaires, utiles aussi bien pour les examens que pour les projets professionnels.
Conclusion
Ces QCM constituent un support pédagogique complet pour maîtriser les formulaires HTML modernes et accessibles.
Ils permettent de consolider des notions essentielles liées à la validation, à l’ergonomie et à l’accessibilité.
En s’entraînant régulièrement, l’apprenant affine sa compréhension des mécanismes de saisie et améliore la qualité de ses interfaces.
Cette progression favorise des formulaires plus fiables, plus inclusifs et plus professionnels, répondant aux attentes actuelles du web.
