Zoom sur tableaux et les formulaires

Les tableaux HTML

Afin de structurer le contenu de vos pages vous aurez souvent recours à des tableaux.
Les balises utiles sont :

  • <table>…</table> définit un début et une fin de tableau
  • <th>…</th> encadre l’entête d’une colonne
  • <tr> </tr> encadre une ligne du tableau
  • <td>…</td> encadre la valeur d’une cellule (une case du tableau)
  • les attributs ‘rowspan’ et ‘colspan’ permettent de fusionner respectivement lignes et colonnes

voici un exemple simple de tableau à 2 lignes et 3 colonnes :

<TABLE BORDER= »1″>
<TR>
<TD>1ere case</TD> <TD>2eme case</TD> <TD>3eme case</TD>
</TR>
<TR>
<TD>4eme case</TD> <TD>5eme case</TD> <TD>6eme case</TD>
</TR>
</TABLE>

Vous trouverez un tutoriel simple pour réaliser vos premiers tableaux sur : http://www.tutosite.com/html/tuto5.php


Et pour vous exercer concrètement…faites l’exercice sur les tableaux


Les formulaires HTML

Les formulaires sont également très importants en HTML dans la mesure où ils permettent (et c’est pratiquement le seul moyen) d’intéragir avec l’utilisateur.

Ils servent à :

  • faire des recherches multi-critères
  • envoyer des informations � un programme
  • envoyer des données � une base de données

Les balises utiles pour définir le formulaire lui-même sont :

  • <FORM name=… method=”POST” action= “url_du_script_cgi”>…</FORM>
    début et fin d’une FORM avec méthode POST
  • <FORM method=”GET” action=”url_du_script_cgi”>…</FORM>
    début et fin d’une FORM avec méthode GET

et pour définir les différents objets contenus dans le formulaire

  • <INPUT NAME= »nom_du_champ » VALUE= »contenu_du_champ » TYPE = « type_du_champ »>
    définition d’un champ de type texte, bouton d’envoi, case � cocher, radio bouton, password, zone cachée et annulation TYPE aura respectivement les valeurs : text, submit, checkbox, radio, password, hidden ou reset
  • <SELECT NAME=nom_liste> … </SELECT>début et fin d’une
    liste déroulante d’une FORM <OPTION> valeur_option définit
    les différentes valeurs de la liste déroulante (doit être
    imbriqué dans les balises précédentes)voici un tout petit exemple :

<FORM name= »formulaire_1″ ACTION= »traite_form.php » METHOD= »put »>
Votre nom <INPUT TYPE= »text » NAME= »nom » >
<BR>
<INPUT TYPE= »checkbox » NAME= »pays » VALUE= »France » CHECKED> France
<INPUT TYPE= »checkbox » NAME= »pays » VALUE= »Canada » > Canada
<INPUT TYPE= »checkbox » NAME= »pays » VALUE= »Suisse »> Suisse
<BR>
<INPUT TYPE= »submit »> <INPUT TYPE=reset>.
</FORM>

Cela donnera à l’écran

petit formulaire

Pour aller un peu plus loin, un tutoriel simple sur les formulaires est disponible sur

http://www.tutosite.com/html/tuto6.php

et vous pourrez faire ensuite l’exercice sur les formulaires