Exercice 1 — analyse et interprétation du code HTML, dans l’esprit des sessions 2022–2025
Le site du service de vélos en libre-service VéloCité (Sfax) comporte les fichiers abonnement.html, styleVelo.css, controleVelo.js et abonnement.php. La page abonnement.html permet de demander un abonnement (figure 1) ; son code HTML, incomplet, est donné ci-dessous (figure 2).
Figure 2 — code HTML de abonnement.html (les lignes en pointillés et les attributs ① à ⑤ sont à compléter) :
1 <!DOCTYPE html>
2 <html lang="fr">
3 <head>
4 <meta charset="utf-8">
5 <meta name="description" content="Abonnement au service VéloCité de Sfax">
6 <title>VéloCité - Abonnement</title>
7 ………………………………………
8 <script src="controleVelo.js"></script>
9 </head>
10 <body onload="initialiser()">
11 <header>
12 <h1>VéloCité : vélos en libre-service à Sfax</h1>
13 <nav>
14 <a href="index.html">Accueil</a>
15 <a href="stations.html" target="_blank">Carte des stations</a>
16 <a href="#abo">S'abonner</a>
17 </nav>
18 </header>
19 <section id="abo">
20 <form id="f" name="f" action="…①…" method="…②…" onsubmit="…③…">
21 <fieldset>
22 ………………………………………
23 <label>Nom et prénom :</label> <input type="text" id="nom" name="nom" required><br>
24 <label>Téléphone :</label> <input type="text" id="tel" name="tel" maxlength="8"><br>
25 <label>E-mail :</label> <input type="…⑤…" id="mail" name="mail"><br>
26 ………………………………………
27 <select id="formule" name="formule">
28 <option>Choisir une formule</option>
29 <option value="F1">Journalier</option>
30 <option value="F2">Mensuel</option>
31 <option value="F3">Annuel</option>
32 </select><br>
33 <label>Vélo préféré :</label>
34 <input type="radio" name="classique" value="C">Classique
35 <input type="radio" name="electrique" value="E">Électrique<br>
36 <label>Trajets par semaine :</label>
37 <input type="range" id="nbTrajets" name="nbTrajets" min="0" max="14" value="0" onchange="afficher()">
38 <span id="valeur">0</span><br>
39 <input type="hidden" name="canal" value="web">
40 <hr>
41 <img src="velo.png" width="120" height="80" alt="Vélo VéloCité en libre-service">
42 <div>
43 <input type="…④…" value="Envoyer la demande">
44 ………………………………………
45 </div>
46 </fieldset>
47 </form>
48 </section>
49 ………………………………………
50 </body>
51 </html>1. Indiquer devant chaque rôle le numéro de la ligne contenant le code HTML qui lui correspond :
- Lier un fichier de scripts externe à la page web.
- Exécuter une fonction JavaScript dès que la page web est entièrement chargée.
- Définir un conteneur pour le contenu d’introduction de la page (titre et menu).
- Créer un lien vers une partie de la même page.
- Transmettre au serveur une donnée que l’utilisateur ne voit pas et ne saisit pas.
- Créer une liste déroulante.
- Créer un conteneur en ligne dont le contenu sera modifié par un script.
- Fournir une description de la page utilisée par les moteurs de recherche.
2. Sachant que le clic sur le bouton de la ligne 43 doit appeler la fonction verifier() du fichier controleVelo.js, puis envoyer les données au fichier abonnement.php sans les afficher dans la barre d’adresse du navigateur, et seulement si verifier() renvoie la valeur vraie ; et que le champ de la ligne 25 ne doit accepter qu’une adresse électronique (format contrôlé par le navigateur), compléter le tableau par la valeur de chacun des attributs ① à ⑤.
| Attribut | ① | ② | ③ | ④ | ⑤ |
|---|---|---|---|---|---|
| Valeur |
3. Pour compléter le code HTML par les balises ci-dessous, écrire devant chaque balise le numéro de la ligne dans laquelle elle doit être insérée :
- <input type="reset" value="Effacer">
- <legend>Demande d'abonnement</legend>
- <footer>VéloCité Sfax - 2026</footer>
- <label>Formule :</label>
- <link rel="stylesheet" href="styleVelo.css">
4. Pour chacune des affirmations ci-dessous, mettre une croix (X) dans la case correspondant à la proposition correcte :
a. Avec method="POST" (ligne 20), les données du formulaire sont : ☐ ajoutées à l’adresse URL après un « ? » ☐ transmises dans le corps de la requête HTTP ☐ enregistrées dans un cookie du navigateur
b. La balise <hr> (ligne 40) insère : ☐ un retour à la ligne ☐ une ligne dans un tableau ☐ une ligne horizontale de séparation
c. L’élément <input type="range"> (ligne 37) permet de : ☐ sélectionner une valeur dans une plage définie par min et max ☐ saisir librement un nombre au clavier ☐ choisir plusieurs valeurs à la fois
d. L’attribut alt (ligne 41) sert à : ☐ définir le texte d’une info-bulle au survol de l’image ☐ définir un texte alternatif affiché si l’image ne peut pas être chargée ☐ définir la légende affichée sous l’image
e. L’attribut required (ligne 23) : ☐ désactive la saisie dans le champ ☐ empêche l’envoi du formulaire tant que le champ est vide ☐ remplit le champ par une valeur par défaut
f. L’attribut target="_blank" (ligne 15) permet : ☐ d’ouvrir stations.html dans le même onglet ☐ d’ouvrir stations.html dans un nouvel onglet ou une nouvelle fenêtre ☐ de n’ouvrir stations.html que si la page est vide
5. Expliquer les deux comportements suivants.
a. Une première version du formulaire portait onsubmit="verifier()". Un utilisateur saisit un téléphone de 5 chiffres : verifier() affiche une alerte puis renvoie false. Le fichier abonnement.php est-il quand même appelé ? Justifier.
b. Un utilisateur arrive à cocher à la fois « Classique » et « Électrique » (lignes 34 et 35). Expliquer pourquoi, puis réécrire ces deux lignes pour qu’un seul bouton puisse être coché.
Voir la correction commentéeAprès avoir posé votre démarche
1. Idée : pour chaque rôle, nommer d’abord la balise ou l’attribut qui le réalise, puis chercher sa ligne dans le code.
| Rôle | Balise / attribut | Ligne |
|---|---|---|
| Lier un fichier de scripts externe à la page web. | <script src="controleVelo.js"> | 8 |
| Exécuter une fonction JavaScript dès que la page web est entièrement chargée. | <body onload="initialiser()"> | 10 |
| Définir un conteneur pour le contenu d’introduction de la page (titre et menu). | <header> | 11 |
| Créer un lien vers une partie de la même page. | <a href="#abo"> (ancre interne) | 16 |
| Transmettre au serveur une donnée que l’utilisateur ne voit pas et ne saisit pas. | <input type="hidden"> | 39 |
| Créer une liste déroulante. | <select> | 27 |
| Créer un conteneur en ligne dont le contenu sera modifié par un script. | <span id="valeur"> | 38 |
| Fournir une description de la page utilisée par les moteurs de recherche. | <meta name="description"> | 5 |
2. Idée : chaque phrase de la consigne désigne un attribut — « envoyer au fichier » → action, « sans les afficher dans la barre d’adresse » → method, « seulement si verifier() renvoie vrai » → return dans onsubmit.
| Attribut | Valeur | Justification |
|---|---|---|
| ① action | abonnement.php | page serveur qui reçoit les données |
| ② method | POST | données transmises dans le corps de la requête, invisibles dans l’URL |
| ③ onsubmit | return verifier() | l’envoi n’a lieu que si verifier() renvoie true |
| ④ type | submit | bouton d’envoi du formulaire |
| ⑤ type | email | le navigateur refuse un texte qui n’a pas la forme d’une adresse électronique |
3. Idée : chaque balise a une seule place possible — <link> dans <head>, <legend> juste après <fieldset>, le libellé juste avant la liste qu’il annonce, le bouton reset à côté du bouton submit, <footer> après la section et avant </body>.
| Balise | Ligne |
|---|---|
<input type="reset" value="Effacer"> | 44 |
<legend>Demande d'abonnement</legend> | 22 |
<footer>VéloCité Sfax - 2026</footer> | 49 |
<label>Formule :</label> | 26 |
<link rel="stylesheet" href="styleVelo.css"> | 7 |
4. a. transmises dans le corps de la requête HTTP : elles n’apparaissent pas dans la barre d’adresse (c’est la méthode GET qui les ajoute à l’URL après « ? ») ; b. une ligne horizontale de séparation (le retour à la ligne est <br>, la ligne de tableau <tr>) ; c. sélectionner une valeur dans une plage définie par min et max : un curseur, ici de 0 à 14 trajets ; d. définir un texte alternatif affiché si l’image ne se charge pas (et lu par les lecteurs d’écran) ; l’info-bulle est donnée par title ; e. empêche l’envoi du formulaire tant que le champ est vide (le navigateur signale le champ obligatoire) ; f. d’ouvrir stations.html dans un nouvel onglet ou une nouvelle fenêtre ; la page abonnement.html reste ouverte.
5.a Idée : sans return, la valeur renvoyée par verifier() est perdue. Oui, abonnement.php est appelé : onsubmit="verifier()" exécute la fonction (l’alerte s’affiche) mais ne transmet pas son résultat au navigateur ; l’envoi a donc lieu quelle que soit la valeur retournée. Seul onsubmit="return verifier()" bloque l’envoi quand la fonction renvoie false.
5.b Idée : des boutons radio ne s’excluent que s’ils ont le même name. Les deux boutons ont des name différents (« classique » et « electrique ») : le navigateur les traite comme deux groupes indépendants, chacun pouvant être coché. Correction :
<input type="radio" name="velo" value="C">Classique
<input type="radio" name="velo" value="E">Électrique<br>Les value restent différentes : c’est elles qui indiquent au serveur le vélo choisi (velo=C ou velo=E).