WB-AWeb et TIC

HTML — cadres, liens et formulaires (navigation web)

Idée directrice

Dans les devoirs machine TIC de section SI, le premier lot de points porte sur la réalisation du site : page d’accueil en cadres, page de liens avec target, pages de formulaires (name, action, method, onsubmit). Source de forme : contrôle TIC i-c3-03 (Helali, 2015-2016). La syntaxe frameset/frame est celle attestée à l’examen (EasyPHP) — héritage pédagogique, pas une stack de production moderne.

Signature de reconnaissance — l'énoncé se trahit ainsi

« Créer la page Index.Html dont la structure est la suivante »

« form name=… action=… method=post onsubmit=return verif »

« liens … target »

Sujet principal

Exercice — dans l'esprit des sujets du bac

3 questionsCorrigé masqué

La médiathèque du lycée Ibn Rochd veut un mini-site pour gérer les prêts. On travaille sous EasyPHP (dossier de travail dans www). Les pages demandées sont en HTML d’examen (cadres + formulaires).

Écrire le code de la page accueil.html : un frameset en deux lignes (80,*). Le cadre haut (name="menu") charge nav.html ; le cadre bas (name="contenu") est initialement vide.
Écrire nav.html avec deux liens en bleu souligné : « Nouveau prêt » → pret.html et « Chercher un adhérent » → recherche.html, tous deux ouvrant dans le cadre contenu (target).
Écrire pret.html : formulaire name="fp", action="enregistrer.php", method="post", onsubmit="return verifPret()", cible contenu. Champs texte name="numAdh" (n° adhérent), name="codeOuv" (code ouvrage), liste select name="typePret" avec options jour / semaine, boutons submit « Valider le prêt » et reset « Effacer ».

Voir la correction commentéeAprès avoir posé votre démarche

1. Structure HTML — accueil.html (cadres). Syntaxe d’examen héritée (frameset / frame) :

<html><head><title>Médiathèque</title></head>
<frameset rows="80,*">
  <frame name="menu" src="nav.html" scrolling="auto" frameborder="1">
  <frame name="contenu" src="" scrolling="auto" frameborder="1">
</frameset>
</html>

2. Liens avec target — nav.html.

<html><head><title>Navigation</title></head>
<body>
<a href="pret.html" target="contenu" style="color:blue; text-decoration:underline">Nouveau prêt</a>
&nbsp;&nbsp;
<a href="recherche.html" target="contenu" style="color:blue; text-decoration:underline">Chercher un adhérent</a>
</body></html>

3. Formulaire HTML — pret.html. name, action, method="post", onsubmit, champs nommés :

<html><head><title>Prêt</title>
<script src="controles.js"></script></head>
<body>
<form name="fp" action="enregistrer.php" method="post" target="contenu" onsubmit="return verifPret()">
  N° adhérent : <input type="text" name="numAdh" size="10"><br>
  Code ouvrage : <input type="text" name="codeOuv" size="10"><br>
  Type de prêt :
  <select name="typePret" size="2">
    <option value="jour">jour</option>
    <option value="semaine">semaine</option>
  </select><br>
  <input type="submit" name="bOk" value="Valider le prêt">
  <input type="reset" name="bAnn" value="Effacer">
</form>
</body></html>

Remarque. frameset / frame est la syntaxe attendue dans les sujets du bac ; en production moderne on utiliserait une mise en page CSS et des formulaires accessibles (label, required).

Exercices d'entraînement — une nuance à la fois

Entraînement 01 / 02

Drill WB-A.1 — Formulaire de contact d’association

2 questionsCorrigé masqué

L’association culturelle Al-Andalus demande une page contact.html autonome (pas de cadres).

Écrire un formulaire HTML name="fc", action="envoi.php", method="post", onsubmit="return verifContact()" avec : champ texte name="email", champ texte name="objet", zone textarea name="message" (on accepte input type="text" name="message" si le programme n’a pas traité textarea), boutons submit « Envoyer » et reset « Vider ».
Pourquoi chaque contrôle interactif doit-il avoir un attribut name (et non seulement un libellé) ?

Voir la correction commentéeAprès avoir posé votre démarche

1. Formulaire HTML (syntaxe d’examen) :

<form name="fc" action="envoi.php" method="post" onsubmit="return verifContact()">
  Email : <input type="text" name="email" size="30"><br>
  Objet : <input type="text" name="objet" size="40"><br>
  Message : <input type="text" name="message" size="50"><br>
  <input type="submit" name="bSend" value="Envoyer">
  <input type="reset" name="bClear" value="Vider">
</form>

2. Le name est la clé lue par JavaScript (document.fc.email.value) et par PHP ($_POST['email']). Un libellé seul n’identifie pas le champ côté script.

Entraînement 02 / 02

Drill WB-A.2 — Navigation à deux cibles

2 questionsCorrigé masqué

On prépare la page d’accueil d’un club robotique (contexte autonome).

Écrire index.html avec un frameset colonnes 20%,* : cadre gauche name="gauche" source menu.html, cadre droit name="droite" vide.
Dans menu.html, un seul lien « Planning » vers planning.html qui s’affiche dans le cadre droite. Écrire la balise <a …> complète.

Voir la correction commentéeAprès avoir posé votre démarche

1. Structure HTML (cadres) :

<html><head><title>Club robotique</title></head>
<frameset cols="20%,*">
  <frame name="gauche" src="menu.html">
  <frame name="droite" src="">
</frameset>
</html>

2. Lien ciblé :

<a href="planning.html" target="droite">Planning</a>

Sans target="droite", le planning remplace tout le frameset.

Méthode / Automatismes

Nommer chaque frame : les target des liens et du formulaire doivent reprendre ce nom exact.
Tout champ utile à JS/PHP porte un name stable (pas seulement un libellé visible).
onsubmit="return verif…()" : sans return, la validation client ne bloque pas l’envoi.

Pièges classiques

Oublier target="contenu" : le lien remplace toute la fenêtre au lieu du cadre bas.
Écrire method="get" par défaut mental : le sujet machine SI utilise presque toujours post.
Copier un framework React/Vue : hors barème de ce devoir machine.