TP3 : Image cliquable et formulaires en HTML

Objectif :

Toujours en respectant les standarts du W3C, nous allons apprendre à créer des images cliquables et des formulaires.

Matériel :

Un PC sous Linux ou Windows relié à internet.
Un Serveur Web pour déposer les pages créées ( venus ).
Un navigateur Internet Chrome, firefox, opéra ou autre.
Un Editeur de texte ( bloc note, kedit, emac ).
Le site http://www.w3schools.com/ contient un bon didacticiel et de nombreux exemples qui vous aideront à répondre aux questions.

Travail à réaliser.

Une image cliquable.

HTML permet de définir dans une image des zones actives. Un clic de la souris dans une zone déclenche un lien particulier vers une autre page, ou une autre section d’une même page. Pour réaliser une telle opération, le navigateur relève les coordonnées de la souris dans l’image et les compare aux valeurs qui se trouvent dans une table pour connaître le lien à effectuer.

Description :

La table est définie entre les balises <map> et </map>. L’attribut id permet de nommer cette table. Chaque zone clicquable est définit par une entrée dans la table <area>, les attributs sont:

« COORDS » coordonnées et dimensions de la zone.
« HREF » lien .
« SHAPE » type de la zone ( « circle », « rectangle », « polygon », « default » ).
- default URL : URL which is used if click is in none of the given shapes. This should always be set!
- circle (x,y) r URL : Circle with center point (x,y) and radius r.
- rect (x1,y1) (x2,y2) URL : Rectangle with (any) two opposite corners having coordinates (x1,y1) and (x2,y2).
- polygon (x1,y1) (x2,y2) ... (xn,yn) URL : Polygon having adjacent vertices (xi,yi). If the path given is not closed (first and last coordinate pairs aren't the same) the first and last coordinate pairs will be connected by htimage. So first point is added also as the last one if necessary.

L’appel de la table se fait par l’attribut usemap=« url de la table » lors de l’affichage de l’image.

exemple :

<html> 
 <head> 
 <title>Images clicquables</title> 
 </head> 
<body> 
 <map name='wel'> 
 <area shape='circle' coords="90,146,27" href="jsom.htm"> 
 <area shape='circle' coords="181,43,27" href="present.htm"> 
 <area shape='circle' coords="400,47,27" href="mail.htm"> 
 <area shape='default' href="welcome.htm"> 
 </map> 
 <img src="home.jpg" usemap="#wel" title='une image cliquable'> 
</body>
</html>

A l’aide d’un outils de retouche d’image type photoshop ou GIMP, dessiner dans une image un certain nombre de zones et relever les coordonnées de ces zones.
Ecrire la page HTML qui affiche cette image, ainsi que les pages de liens.
Imaginez une page de votre site CV avec cette technique.

Remarque : Cette technique de navigation très graphique possède deux inconvénients, l'image principale est souvent volumineuse ce qui pénalise la vitesse du site. Enfin il faut prévoir une alternative pour les terminaux non graphiques.

Formulaire.

Un formulaire est défini entre les marqueurs <form> et </form> et permet de présenter toutes sortes de zones pour relever des informations, en voici quelque unes :

Zone de saisie <input type=" text" name=" champsnoX ">.
Boites à cocher type="chekbox".
Boite à cocher avec choix unique type="radio".
Liste déroulant : <select name=" nom du champ " > suivie d'une ou de plusieurs balises <option value=" valeur de la liste "> pour chaque rubrique de la liste. Ne pas oublier de terminer par </select>.
L'envoi des saisies au serveur se fait grâce à la balise <input type=" submit " value=" envoyer au serveur "> qui crée un bouton pour déclencher l'envoi des données vers le serveur.
Le type=" reset " permet de créer un bouton qui efface les données du formulaire.

Les attributs du marqueur form définissent l'action à effectuer sur le serveur :

methode = "get" effectue le transfert des données avec l'URL du programme qui doit les interpréter. Les données qui forment une chaîne de caractère se retrouve au niveau du serveur dans une variable QUERY_STRING. Cette chaîne est alors limité à 256 caractères.
methode = "post" effectue le transfert des données avec l'URL du programme qui doit les interpréter. Les données qui forment une chaîne de caractère se retrouvent au niveau du serveur sur l'entrée standard.
action = " URL du script qui va exploiter les données du formulaire ".

Faites un formulaire pour receuillir les impressions des utilisateurs sur votre site.

Celui ci contiendra une zone de saisie pour le nom name='nom'.
Une zone pour le prénom name='prenom'
Une liste déroulante dans laquelle l'utilisateur pourra choisir sa couleur favorite name='couleur'.
Un champs de saisie de texte pour déposer ses impressions sur votre site.
Ajouter un bouton pour valider la saisie et un bouton de remise à zéro des champs.
L'action enverra les données par la méthode POST vers le formulaire traitement.php suivant que vous recopierez sur votre partition.

<html>
  <head>
  <title>réponse du serveur</title>
  </head>
  <body>
  <?php print "bonjour monsieur ";
  print $_POST["nom"] ;
  print " ";
  print $_POST["prenom"];
  print "<BR><BR><HR>";
  print " votre couleur favorite est le ";
  print $_POST["couleur"];
	print " Nous avons bien noté vos commentaires, merci de votre visite";
  ?>
  </body>
</html>

Remarque : Si vous utilisez la méthode GET, vous accédez aux variables avec une commande du type $_GET["nom"] Vous verrez en informatique comment réaliser des scriptes en PHP pour traiter des données sur le serveur.