$course$/QCM de NSI/Première/Événements et formulaires Événements DOM (clic, saisie, soumission), gestion des
événements en JavaScript, balises de formulaire HTML
(<form>, <input>, <button>, <select>), méthodes
HTTP GET et POST, validation côté client.

]]> Événements et formulaires — Q01 : Événement Qu'est-ce qu'un événement dans le contexte
d'une page web ?

]]> Modèle « publication-souscription » : les
éléments publient des événements, les
gestionnaires les écoutent et y réagissent.

]]> 1.0 0.0 0 true true abc Une modification CSS automatique

]]> Une modification CSS
relève de la mise en
forme. Un évènement,
en JavaScript, est un
signal émis par le
navigateur ou l'utilisateur,
auquel le code peut
réagir.

]]> Un fichier média

]]> Un fichier média (image,
son, vidéo) est une
ressource statique,
tandis qu'un évènement
est un signal dynamique
déclenché lors de
l'utilisation de la page.

]]> Une erreur de programmation

]]> Erreur : un bug n'est pas un événement DOM.

]]> Une action déclenchée par l'utilisateur (clic, saisie, mouvement souris...) ou par le navigateur (chargement, redimensionnement...)

]]> Bonne réponse : les événements rendent la
page interactive. JavaScript permet
d'y réagir.

]]> Événements et formulaires — Q02 : Événement de clic Quel est le nom de l'événement déclenché quand
l'utilisateur clique sur un élément ?

]]> Événements souris : click, dblclick,
mousedown, mouseup, mousemove,
mouseenter, mouseleave. Idem au clavier :
keydown, keyup, keypress.

]]> 1.0 0.0 0 true true abc mouseDown

]]> C'est un autre événement (pression
du bouton, sans relâcher).

]]> onclick

]]> C'est l'attribut/propriété d'écoute, pas
le nom de l'événement.

]]> click

]]> Bonne réponse : click est le nom
standard. Pour l'écouter :
el.addEventListener("click", ...).

]]> tap

]]> C'est un événement tactile, distinct.

]]> Événements et formulaires — Q03 : Balise form Quelle balise HTML délimite un formulaire ?

]]> Le formulaire envoie ses données vers
action quand l'utilisateur soumet (par
clic sur <button type="submit"> ou en
validant via Entrée).

]]> 1.0 0.0 0 true true abc <send>

]]> Erreur : balise inexistante.

]]> <form>

]]> Bonne réponse : <form> regroupe les
champs et permet de les soumettre
ensemble. Attributs clés : action
(URL), method (GET/POST).

]]> <input>

]]> Erreur : <input> est un champ de
formulaire, pas un conteneur.

]]> <formulaire>

]]> Erreur : balise inexistante.

]]> Événements et formulaires — Q04 : Champ texte Quelle balise crée un champ de saisie texte ?

]]> Types courants d'<input> : text,
password, email, number, date,
checkbox, radio, submit, file.

]]> 1.0 0.0 0 true true abc <textbox>

]]> Erreur : balise inexistante.

]]> <text />

]]> Erreur : balise inexistante.

]]> <input type="text">

]]> Bonne réponse : <input> est polyvalente,
type détermine son apparence et son
comportement.

]]> <entry>

]]> Erreur : balise inexistante.

]]> Événements et formulaires — Q05 : Bouton Comment créer un bouton « Envoyer » qui
soumet le formulaire ?

]]> Trois types de bouton : submit
(soumission, par défaut dans <form>),
reset (réinitialise les champs), button
(générique, à manipuler en JS).

]]> 1.0 0.0 0 true true abc <button type="submit">Envoyer</button> (ou <input type="submit" value="Envoyer">)

]]> Bonne réponse : <button> est plus
flexible (peut contenir du HTML, des
icônes). <input type="submit"> est
historique mais valide.

]]> <a>Envoyer</a>

]]> Erreur : <a> est un lien, pas un
bouton de soumission.

]]> <click>Envoyer</click>

]]> Erreur : balise inexistante.

]]> <send>Envoyer</send>

]]> Erreur : balise inexistante.

]]> Événements et formulaires — Q06 : Liste déroulante Quelle balise crée une liste déroulante ?

]]> Variantes : <datalist> (suggestions sur un
champ texte), multiple sur <select>
(sélection multiple).

]]> 1.0 0.0 0 true true abc <list>

]]> Erreur : balise inexistante.

]]> <select> contenant des <option>

]]> Bonne réponse : <select> est le
conteneur, chaque choix est une <option
value="...">texte</option>.

]]> <dropdown>

]]> Erreur : balise inexistante.

]]> <combo>

]]> Erreur : balise inexistante.

]]> Événements et formulaires — Q07 : Étiquette À quoi sert la balise <label> ?

]]> Bonne pratique RGAA/WCAG : tout champ doit
avoir un <label> associé. Sans label, les
lecteurs d'écran ne peuvent pas annoncer
correctement le champ.

]]> 1.0 0.0 0 true true abc À associer une étiquette explicative à un champ de formulaire (clic sur l'étiquette = focus sur le champ)

]]> Bonne réponse : améliore l'accessibilité
et l'ergonomie. Lier via
<label for="nomChamp">...</label> et
<input id="nomChamp">.

]]> À mettre du texte en gras

]]> Erreur : c'est <strong> ou <b>.

]]> À créer un titre

]]> Erreur : ce serait <h1>...<h6>.

]]> À étiqueter une variable JavaScript

]]> Une variable JavaScript
n'a pas d'étiquette
accessible aux lecteurs
d'écran. La balise
<label> agit sur la
structure du formulaire
HTML, pas sur le code.

]]> Événements et formulaires — Q08 : Soumission Quel événement se déclenche quand un
formulaire est soumis ?

]]> Pour empêcher la soumission par défaut
(par exemple pour valider en JS) :
event.preventDefault() dans le
gestionnaire.

]]> 1.0 0.0 0 true true abc send

]]> Erreur : événement inexistant.

]]> submit

]]> Bonne réponse : événement submit
déclenché sur le <form>. À écouter pour
intercepter la soumission (validation
côté client, AJAX...).

]]> change

]]> C'est un autre événement (changement de
valeur d'un champ).

]]> click

]]> Le clic sur le bouton déclenche click,
mais l'événement de soumission est
submit.

]]> Événements et formulaires — Q09 : GET ou POST ? Quelle méthode HTTP utilise-t-on pour
envoyer un mot de passe ?

]]> Règle pratique : GET pour récupérer des
données (recherche, lecture), POST pour
modifier l'état du serveur (création, envoi
de formulaire).

]]> 1.0 0.0 0 true true abc Aucune des deux

]]> Pour transmettre un mot
de passe, on choisit
systématiquement la
méthode POST, qui place
les données dans le corps
de la requête plutôt que
dans l'URL.

]]> POST, parce que les données sont dans le corps de la requête, pas dans l'URL

]]> Bonne réponse : POST est plus discret.
Pour les données sensibles, utiliser
POST + HTTPS.

]]> GET, parce que c'est plus rapide

]]> Erreur : GET met les données dans l'URL,
ce qui est visible et logué dans
l'historique. À éviter pour les données
sensibles.

]]> PUT, c'est obligatoire

]]> Erreur : PUT a un autre rôle (mise à jour
d'une ressource REST).

]]> Événements et formulaires — Q10 : Formulaire complet Lequel de ces fragments est un formulaire
valide demandant un nom et l'envoyant en
POST ?

]]> Attribut name essentiel : c'est sous
ce nom que la donnée arrive côté serveur.
Sans name, le champ n'est pas envoyé.

]]> 1.0 0.0 0 true true abc `html
<input type="text">
`

]]> Insuffisant : pas de <form>, pas de
bouton.

]]> `html
<form>Nom: <input></form>
`

]]> Trop minimal : ni name, ni méthode, ni
bouton.

]]> `html
<send name="nom" />
`

]]> Erreur : balise inexistante.

]]> `html
<form action="/save" method="POST">
<label for="nom">Nom :</label>
<input id="nom" name="nom" type="text">
<button type="submit">Envoyer</button>
</form>
`

]]> Bonne réponse : <form> avec action et
method, <label> lié à <input> par
for/id, name (essentiel pour
identifier la donnée envoyée), bouton
submit.

]]> Événements et formulaires — Q11 : Gestionnaire d'événement Quel code attache la fonction handleClick au
clic sur le bouton btn ?

]]> Avantages d'addEventListener sur
onclick = : possibilité d'attacher
plusieurs gestionnaires, options
avancées (once, capture, passive).

]]> 1.0 0.0 0 true true abc btn.onclick(handleClick)

]]> Erreur : onclick est une propriété,
pas une méthode. Il faut écrire
btn.onclick = handleClick.

]]> btn.click(handleClick)

]]> Erreur : btn.click() déclenche le
clic, ne l'écoute pas.

]]> btn.addEventListener("click", handleClick)

]]> Bonne réponse : forme moderne et
recommandée.

]]> btn.handle("click", handleClick)

]]> Erreur : méthode inexistante.

]]> Événements et formulaires — Q12 : Lire la valeur d'un champ Comment récupérer la valeur tapée dans
<input id="nom"> ?

]]> Pour modifier aussi : el.value =
"nouveau". Pour les cases à cocher et les
boutons radio : el.checked (booléen).

]]> 1.0 0.0 0 true true abc document.getElementById("nom").text

]]> Erreur : c'est value, pas text.

]]> document.getElementById("nom").innerHTML

]]> Erreur : innerHTML est pour le contenu
HTML d'éléments génériques, pas pour les
champs de formulaire.

]]> document.getElementById("nom").content

]]> Erreur : propriété inexistante.

]]> document.getElementById("nom").value

]]> Bonne réponse : value est la propriété
standard pour les champs de formulaire
(<input>, <select>, <textarea>).

]]> Événements et formulaires — Q13 : preventDefault À quoi sert event.preventDefault() dans un
gestionnaire ?

]]> Cas typique : valider un formulaire en JS
avant de le soumettre.
`js
form.addEventListener("submit", e => {
if (!valider()) e.preventDefault();
});
`

]]> 1.0 0.0 0 true true abc À empêcher tout événement futur

]]> Erreur : seulement le comportement par
défaut de l'événement courant.

]]> À empêcher le comportement par défaut du navigateur (par exemple, ne pas soumettre le formulaire pour le traiter en JS)

]]> Bonne réponse : très utile pour
intercepter une soumission ou un clic
sur un lien (<a>) afin de gérer
l'action en JavaScript.

]]> À fermer la page

]]> La fermeture d'une page
se demande via window.close().
La méthode preventDefault
ne ferme rien : elle annule
uniquement l'action par
défaut associée à un
évènement.

]]> À effacer la console

]]> L'effacement de la
console se fait avec
console.clear(). La
méthode preventDefault
n'agit que sur l'évènement
en cours, pas sur les
outils du navigateur.

]]> Événements et formulaires — Q14 : Validation HTML5 Comment indiquer qu'un champ est
obligatoire dans le HTML ?

]]> Autres attributs de validation HTML5 :
min, max, minlength, maxlength,
pattern (expression régulière), type="email", etc.

]]> 1.0 0.0 0 true true abc Avec mandatory="true"

]]> Erreur : attribut inexistant.

]]> Avec l'attribut required : <input required>

]]> Bonne réponse : validation native du
navigateur, qui empêche la soumission si
le champ est vide. Affichage d'un message
standard automatiquement.

]]> Avec must-fill

]]> Erreur : attribut inexistant.

]]> Il faut une fonction JavaScript

]]> Possible mais HTML5 offre des
validations natives plus simples.

]]> Événements et formulaires — Q15 : Type d'input adapté Quel type d'<input> est le plus adapté
pour un champ « Âge » ?

]]> Choisir le bon type améliore l'ergonomie
(clavier mobile adapté), accessibilité et
validation. Ne pas négliger ces
« petits détails ».

]]> 1.0 0.0 0 true true abc type="number"

]]> Bonne réponse : restreint à des nombres,
affiche des flèches haut/bas, ouvre un
clavier numérique sur mobile.

]]> type="text"

]]> Possible mais peu pratique. L'utilisateur
pourrait taper du texte.

]]> type="email"

]]> Erreur : pour un courriel.

]]> type="age"

]]> Erreur : type inexistant.

]]> Événements et formulaires — Q16 : Cible de l'événement Dans un gestionnaire d'événement, comment
accéder à l'élément sur lequel l'événement
a eu lieu ?

]]> Distinction event.target (où l'événement
s'est produit) vs event.currentTarget
(où le gestionnaire est attaché). Pour la
délégation d'événements, on utilise
target.

]]> 1.0 0.0 0 true true abc event.dom

]]> Erreur : propriété inexistante.

]]> this.element

]]> Erreur : this peut référencer
l'élément, mais selon le contexte
(fonction fléchée vs régulière), il
peut ne pas marcher.

]]> event.target

]]> Bonne réponse : référence l'élément
ayant déclenché l'événement. Permet de
partager un même gestionnaire entre
plusieurs éléments.

]]> event.element

]]> Erreur : propriété inexistante.

]]> Événements et formulaires — Q17 : Attribut name Pourquoi l'attribut name est-il important
pour un <input> ?

]]> Distinction triple : id (unique, pour CSS
et JS), class (pour CSS et JS, partagé),
name (pour la soumission du formulaire).

]]> 1.0 0.0 0 true true abc Pour le validateur HTML

]]> Indirectement, mais le rôle principal est
autre.

]]> Pour le nom affiché

]]> Erreur : c'est le rôle de <label>.

]]> Parce qu'il identifie la donnée lors de l'envoi du formulaire (clé dans la requête HTTP)

]]> Bonne réponse : sans name, le champ
n'est pas envoyé au serveur. Le
serveur reçoit nom=Alice&age=17 à
partir des name.

]]> Pour la couleur du champ

]]> Erreur : c'est CSS.

]]> Événements et formulaires — Q18 : Zone de texte Quelle balise crée une zone de texte
multiligne ?

]]> Particularité : <textarea> n'est pas
auto-fermante, et son contenu initial
est entre les balises (pas un attribut
value).

]]> 1.0 0.0 0 true true abc <paragraph contenteditable>

]]> Possible mais usage avancé, pas un
formulaire classique.

]]> <textarea>contenu initial</textarea>

]]> Bonne réponse : balise dédiée. Attributs
utiles : rows, cols, placeholder,
maxlength.

]]> <text>multiligne</text>

]]> Erreur : balise inexistante.

]]> <input type="text" multiline>

]]> Erreur : multiline n'existe pas comme
attribut de <input>.

]]> Événements et formulaires — Q19 : Événement input vs change Quelle est la différence entre les événements
input et change sur un <input type="text"> ?

]]> Choix selon le besoin : aperçu en direct →
input ; validation à la fin → change ;
soumission complète → submit (sur le
formulaire).

]]> 1.0 0.0 0 true true abc input se déclenche à chaque modification (chaque touche), change seulement quand le champ perd le focus avec une nouvelle valeur

]]> Bonne réponse : input est plus
réactif (auto-complétion en temps réel),
change plus économe.

]]> change plante toujours

]]> L'évènement change
fonctionne parfaitement
et n'a aucune raison
structurelle d'échouer.
Il sert simplement à
réagir lorsque la
nouvelle valeur est
confirmée par l'utilisateur.

]]> Aucune

]]> Erreur : différence de fréquence.

]]> input n'existe pas

]]> Erreur : événement standard.

]]> Événements et formulaires — Q20 : Requête HTTP Quand on soumet un formulaire en POST vers
/save, que se passe-t-il côté
navigateur ?

]]> L'AJAX (Asynchronous JavaScript And XML)
permet d'envoyer la requête en arrière-plan
et de mettre à jour la page sans la
recharger. Schéma moderne (fetch API).

]]> 1.0 0.0 0 true true abc Le navigateur ouvre un autre site

]]> Le navigateur ne quitte
pas le domaine courant
de sa propre initiative.
Il envoie simplement
une requête vers l'URL
indiquée par l'attribut
action du formulaire.

]]> Le formulaire reste affiché

]]> Pas par défaut : la page change.

]]> Le navigateur envoie une requête HTTP POST vers /save avec les données dans le corps, puis affiche la réponse du serveur

]]> Bonne réponse : c'est le mécanisme
fondamental du formulaire. Sans
JavaScript, la page change. Avec JS, on
peut intercepter pour faire de l'AJAX
(sans rechargement).

]]> Rien

]]> Erreur : la soumission est l'action
principale.

]]> Événements et formulaires — Q21 : Validation client vs serveur Faut-il valider les données d'un formulaire
côté client (JavaScript), côté serveur
ou les deux ?

]]> Mantra de sécurité : « Never trust user
input. » La validation côté client améliore
l'expérience, mais la validation côté
serveur est non négociable.

]]> 1.0 0.0 0 true true abc Aucune des deux : faire confiance

]]> Erreur : recette pour les bugs et failles.

]]> Les deux : côté client pour l'ergonomie (retour immédiat), côté serveur pour la sécurité (autorité)

]]> Bonne réponse : règle d'or. Toute
donnée venant du client est suspecte
jusqu'à validation par le serveur.

]]> Côté serveur uniquement

]]> Possible mais peu ergonomique :
l'utilisateur doit attendre la réponse
du serveur pour voir une erreur.

]]> Côté client uniquement (plus rapide)

]]> Erreur : la validation client peut être
contournée (l'utilisateur peut
désactiver JS, modifier le HTML,
envoyer une requête falsifiée). Pas de
sécurité.

]]> Événements et formulaires — Q22 : Délégation d'événements On a une liste de 100 boutons. Quelle est la
meilleure façon d'écouter leurs clics ?

]]> Modèle de délégation : « les événements
remontent (bubble) », donc on peut les
attraper en haut. Cas typique : liste
d'éléments dynamiques.

]]> 1.0 0.0 0 true true abc Utiliser une variable globale

]]> Une variable globale ne
sert pas à intercepter
des évènements. La bonne
approche reste la
délégation : un seul
gestionnaire posé sur
le parent commun.

]]> Attacher un seul écouteur sur le parent et utiliser event.target pour identifier le bouton cliqué (« délégation d'événements »)

]]> Bonne réponse : schéma recommandé.
Avantages : un seul gestionnaire,
fonctionne pour les boutons ajoutés
dynamiquement après coup.

]]> Modifier le HTML pour ajouter onclick à chaque bouton

]]> Erreur : 100 attributs onclick = code
fragile.

]]> Mettre addEventListener sur chacun des 100 boutons

]]> Fonctionne mais coûteux en mémoire et à
maintenir, surtout si la liste change
dynamiquement.

]]> Événements et formulaires — Q23 : Bug formulaire Mon formulaire en POST envoie au serveur, mais
le champ « nom » est vide côté serveur.
Quelle est la cause la plus probable ?

]]> Réflexe de débogage : ouvrir l'onglet
Network des outils développeur, regarder la
requête envoyée et son contenu (« Form
Data »).

]]> 1.0 0.0 0 true true abc L'attribut name manque sur l'<input> (donc le champ n'est pas inclus dans la requête)

]]> Bonne réponse : c'est le piège classique.
<input id="nom"> ne suffit pas ; il
faut <input name="nom"> (l'id n'est
pas envoyé).

]]> Le bouton submit est cassé

]]> Possible mais peu probable si la requête
arrive au serveur.

]]> Le serveur est en panne

]]> Possible mais cela donnerait une autre
erreur.

]]> Le navigateur n'autorise pas POST

]]> Erreur : POST est standard.

]]> Événements et formulaires — Q24 : Sécurité d'un formulaire Quelle est l'attaque classique consistant à
faire soumettre un formulaire à un
utilisateur à son insu sur un autre site ?

]]> Trois grandes attaques web : XSS
(injection de script), CSRF (requêtes
forgées), SQLi (injection SQL).
Connaissance essentielle pour développer
sereinement.

]]> 1.0 0.0 0 true true abc SQL injection

]]> Existe, mais concerne les bases de
données.

]]> CSRF (Cross-Site Request Forgery)

]]> Bonne réponse : un site malveillant
incite l'utilisateur (déjà authentifié
ailleurs) à faire une requête vers le
site légitime, exploitant ses cookies.
Protection : tokens CSRF, attribut
SameSite sur les cookies.

]]> Spam

]]> Pas le terme technique.

]]> XSS (Cross-Site Scripting)

]]> Existe, mais c'est une attaque par
injection de script, différente.

]]> Événements et formulaires — Q25 : Synthèse Parmi les affirmations suivantes, laquelle
est fausse ?

]]> Mnémonique sécurité : « Never trust user
input + always use HTTPS pour les données
sensibles ».

]]> 1.0 0.0 0 true true abc La méthode HTTP GET est préférable pour transmettre un mot de passe

]]> Faux (donc bonne réponse) : GET met les
données dans l'URL (visibles, loguées).
Pour un mot de passe, utiliser POST sur
HTTPS.

]]> Toute donnée client doit être revalidée côté serveur

]]> Vrai : règle d'or de sécurité.

]]> Un événement DOM peut être écouté avec addEventListener

]]> Cette affirmation est
exacte : addEventListener
est la méthode standard
pour attacher un
gestionnaire à un
évènement. Ce n'est
donc pas la mauvaise
affirmation recherchée.

]]> L'attribut name d'un champ est essentiel pour la soumission au serveur

]]> Vrai : sans name, pas envoyé.

]]> Événements et formulaires — Q26 : Type d'input pour une adresse e-mail Quel attribut type choisir pour un champ destiné à
la saisie d'une adresse électronique ?

]]> Choisir le bon type apporte un triple bénéfice :
validation native du navigateur, clavier adapté
sur mobile, et meilleure information aux
technologies d'assistance. Quelques types utiles :
email, tel, url, number, date, color,
password.

]]> 1.0 0.0 0 true true abc type="contact"

]]> Erreur : contact n'est pas un type d'input
valide. La liste exhaustive des types est
fixée par le standard HTML.

]]> type="email"

]]> Bonne réponse : ce type indique au navigateur
qu'il s'agit d'une adresse électronique. Cela
déclenche une validation de base (présence
d'un @), affiche un clavier adapté sur
mobile et améliore l'accessibilité.

]]> type="text"

]]> Erreur : un champ texte fonctionne, mais
n'apporte aucune validation automatique. On
perd les vérifications de format et le clavier
spécialisé sur mobile.

]]> type="address"

]]> Erreur : aucun type address n'est défini par
le standard HTML. Le type spécifique aux
adresses électroniques est email.

]]> Événements et formulaires — Q27 : Validation côté navigateur Quel attribut HTML5 rend un champ de formulaire
obligatoire, en empêchant la soumission tant
qu'il est vide ?

]]> Autres attributs de validation native :
pattern="..." (motif d'expression régulière à respecter),
minlength/maxlength (longueur de la chaîne),
min/max (valeur numérique ou date). La
validation côté navigateur n'exempte pas d'une
revalidation côté serveur.

]]> 1.0 0.0 0 true true abc obligatoire

]]> Erreur : les attributs HTML sont en anglais.
Le bon attribut est required.

]]> empty=false

]]> Erreur : aucune syntaxe de ce type n'existe en
HTML. L'attribut required se passe de
valeur : sa simple présence suffit.

]]> required

]]> Bonne réponse : ajouter required à un champ
empêche le navigateur de soumettre le
formulaire tant qu'il est vide. Un message
d'erreur s'affiche automatiquement.

]]> mandatory

]]> Erreur : aucun attribut mandatory n'est
défini dans le standard HTML. C'est required
qui joue ce rôle.

]]>