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
<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
<html><head><title>Navigation</title></head>
<body>
<a href="pret.html" target="contenu">Nouveau prêt</a>
  
<a href="recherche.html" target="contenu">Chercher un adhérent</a>
</body></html>
```

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

```html
<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>
```

Legacy d’examen. `frameset` / `frame` et l’absence de HTML5 sémantique sont la syntaxe attestée des devoirs machine SI 2010s (EasyPHP). En production moderne on utiliserait une mise en page CSS et des formulaires accessibles — ce n’est pas ce que le barème TIC note ici.

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) :

```html
<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
<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é :
```html
<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.