HTML4 : les tableaux et les formulaires

Tout ce qui est dit dans ce chapitre concernant les tableaux HTML et les formulaires est toujours valide en HTML5.

Les tableaux en HTML4

Les balises relatives aux tableaux HTML ne se limitent pas table,tr,th,td. Il en existe d'autres un peu moins connues et que nous allons aborder ici.

Exemple 1

Catalogue
référence	prix HT	taux TVA
BO11	10 €	10%
VI300	20 €	10%
CL040	5 €	20%
EC150	15 €	20%
*****
*****
nbre référence	prix moyen
4	12,5 €

Trois couleurs de fond.
Les cellules du tableau font 50 pixels de haut. Rappel : le texte est par défaut centré verticalement dans chaque cellule.
Des cellules sont masquées. Espacement de 5 pixels entre les cellules.

Le code HTML correspondant

<table>
	<caption>Catalogue</caption>
	<thead>
		<tr><th>référence</th><th>prix HT</th><th>taux TVA</th></tr>
	</thead>
	<tbody>
		<tr><td>BO11</td><td>10 €</td><td>10%</td></tr>
		<tr><td>VI300</td><td>20 €</td><td>10%</td></tr>
		<tr><td>CL040</td><td>5 €</td><td>20%</td></tr>
		<tr><td>EC150</td><td>15 €</td><td>20%</td></tr>
		<tr><td>*****</td><td></td><td></td></tr>
		<tr><td>*****</td><td></td><td></td></tr>
	</tbody>
	<tfoot>
		<tr><th>nbre référence</th><th colspan ="2">prix moyen</th></tr>
		<tr><td>4</td><td colspan ="2">12,5 €</td></tr>
	</tfoot>
</table>

le titre du tableau avec la balise CAPTION
l'en-tête du tableau avec la balise THEAD
le corps du tableau avec la balise TBODY
le pied du tableau avec la balise TFOOT

Dans les deux dernières lignes du corps du tableau (TBODY) il y a à chaque fois deux cellules vides.
Dans les deux lignes du pied de tableau (TFOOT) il n'y a que deux cellules au lieu de trois.
Chaque cellule délimitée par TD(alignement horizontal à gauche) ou TH (centrage horizontal).

Pour fusionner des cellules sur la même ligne (fusion sur plusieurs colonnes) il faut utiliser l'attribut colspan.
Sachez qu'il est possible de fusionner des cellules sur plusieurs lignes avec l'attribut rowspan. Voir le deuxième tableau.

La feuille de style de la page (donc commune aux deux tableaux)

	table {width: 80% ; margin : auto ; border-spacing : 5px ; empty-cells : hide ;}
	tbody {background : lime ;  }
	thead, tfoot{background : skyblue ;}
	tr, caption {height: 50px ; }
	caption {font-size : 20px ; line-height : 50px; background : yellow; }
	th, td, caption {border :1px solid black ; }
	td {padding-left : 5px ; padding-right : 5px ; }

Par défaut le texte est centré verticalement dans chaque cellule TD ou TH mais ce n'est pas le cas avec la balise CAPTION.
Aussi ai-je ajouté pour cette dernière balise line-height : 50px. Ainsi la ligne unique de texte est centrée verticalement dans sa boite (qui fait aussi 50px de haut).

border-spacing : 5px : espacement de 5px entre cellules (par défaut 1px)
empty-cells : hide : cellules vides masquées (c'est pas forcément joli)

Un autre exemple de tableau

BO11	10 €	10%
VI300	20 €	10%
CL040	5 €	20%
EC150	15 €	20%
Fusion de cellules	***	***
Fusion de cellules	***	***

Notez la fusion de cellules sur deux lignes dans la première colonne.

Le code HTML correspondant

<table>
<tr><td>BO11</td><td>10 €</td><td>10%</td></tr>
<tr><td>VI300</td><td>20 €</td><td>10%</td></tr>
<tr><td>CL040</td><td>5 €</td><td>20%</td></tr>
<tr><td>EC150</td><td>15 €</td><td>20%</td></tr>
<tr><td rowspan ="2">Fusion de cellules</td><td>***</td><td>***</td></tr>
<tr><td>***</td><td>***</td></tr>
</table>

Remarque : la dernière ligne TR ne contient que deux balise TD !

HTML4 et les formulaires

HTML 5 apporte de nombreuses nouveautés en ce qui concerne les formulaires mais ne remet en pas en cause tout ce qui existait déjà avec la spécification HTML4. C'est cette dernière que je vais rappeler dans la suite de ce chapitre.

Le conteneur FORM

Le code d'un formulaire se place à l'intérieur du conteneur FORM.

La balise FORM comprend deux attributs obligatoires s'il s'agit d'un formulaire de soumission (envoi de données) : action et method.
Attribut action : précise l'adresse de la page vers laquelle les données sont envoyées (en vue d'un traitement PHP en général).

L'outil formulaire peut aussi être utilisé pour les entrées-sorties dans le cadre d'une application JS en ligne. Dans ce cas les attributs de la balise FORM sont inutiles !

méthode GET : les informations apparaissent dans la barre d'adresse du navigateur, c'est génant ...
méthode POST : les informations n'apparaissent pas dans la barre d'adresse du navigateur

des zones de saisie
des légendes (pour indiquer à l'internaute ce qu'il doit saisir)
des boutons de commande

Les zones de saisie

les champs de saisie ordinaires (input type ="text")
les champs de saisie pour les mots de passe ; la saisie est masquée (input type ="password")
Les champs masqués : input type ="hidden"
les zones de saisie extensibles (conteneur TEXTAREA)
les listes déroulantes (conteneur SELECT)
les cases à cocher (input type = "checkbox")
les boutons radio (input type ="radio")

Grâce aux champs masqués le visiteur peut adresser à son insu des informations ...

Les légendes

On associe en général à chaque zone de saisie une légende grâce au conteneur LABEL.

Les boutons de commande

button

input

type = 'submit' : bouton de soumission ; pour envoyer les données (vers une autre page ou la même page)
type ='reset' : bouton pour effacer le contenu du formulaire
type = 'button' : type générique associé en général à une fonction JS

La balise FORM est de type block. les autres balises utilisées au sein d'un formulaire (input, label,etc.) sont par défaut de type inline.
Remarque : il est souvent utile de transformer ces éléments inline en éléments inline-block c'est à dire en boites sans saut de ligne.

Autres zones de saisie

La saisie ne se fait pas forcément via un champ de saisie (input type ='text' ou input type ='password')

les cases à cocher
les boutons radio
les listes déroulantes
les zones de texte extensibles (ou multi-lignes)

Une fiche de renseignements en ligne

Le code CSS (extrait)

	...
	label, input,span {display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% 10px 1% ;    }
	input[type = checkbox], input[type = radio], span {width : 7% ; height : 20px ;  }
	...

Après avoir défini pour l'ensemble des INPUT une largeur interne de 44% et une hauteur de 30px, on réduit la largeur pour les cases à cocher, les boutons radio et les span.
Notez bien comment, en CSS, on cible certaines balises en fonction d'une valeur d'attribut.

Le code du formulaire (code HTML)

<form name="form1" action = "renseignements.php"  method="get"
		target ="_blank"> 
<h2>Fiche de renseignements en ligne</h2>
	<label>Nom : </label><input type ="text"  name = "nom" >
	<label>Prénom : </label><input type ="text" name ="prenom" >
	<label>Civilité : </label>
		<span>Monsieur</span><input type ='radio' value = 'M'  name = 'civilite' checked>
		<span>Madame</span><input type ='radio' value = 'Mme'  name = 'civilite'>
	
	<label>Votre tranche d'âge :</label><select name = 'age'>
		<option value = 't1'>Moins de 20 ans </option>
		<option value = 't2'>Entre 20 et 40 ans </option>
		<option value = 't3'>Entre 40 et 60 ans  </option>
		<option value = 't4'>Plus de 60 ans </option>
	</select>
	
	<label>sports pratiqués :</label>
	<br>
		<span>aucun</span><input type ='checkbox' value = 'A'  name = 'sports[]' checked  >
		<span>vélo</span><input type ='checkbox' value = 'V'  name = 'sports[]'>
		<span>football</span><input type ='checkbox' value = 'F'  name = 'sports[]'>
		<span>natation</span><input type ='checkbox' value = 'N'  name = 'sports[]'>
		<span>autres</span><input type ='checkbox' value = 'D'  name = 'sports[]'>
	
	<label>Vos coordonnées :</label>
	<br>
		<label>Adresse : </label><input type ='text'  name ="adresse1" >
		<label>Adresse : </label><input type ='text'  name ="adresse2" >
		<label>Adresse  : </label><input type ='text'  name ="adresse3" >
		<label>Téléphone : </label>	<input type ="tel"   name ="tel" maxlength ='10'>
		<label>Adresse mail : </label><input type ="text"  maxlength ="30"  name ="email">
		<input type ="reset" value ="videz le formulaire" >
		<input type ="submit" value ="envoyez" >
</form>

Les données seront envoyées vers la page "renseignements.php".
La page cible doit avoir pour extension .php car elle contient un script dans ce langage.
Les données sont soumissionnées ici avec la méthode GET donc les données saisies apparaissent dans la barr d'URL de la page cible.
La page cible s'affiche dans un nouvel onglet (grâce à l'attribut target ="_blank" de la balise form. Vous pouvez donc basculer du formulaire à la page cible.

Pour créer une liste déroulante il faut utiliser le conteneur SELECT contenant plusieurs fois la balise double OPTION.
Ne confondez pas la "value" d'une option et la légende de l'option.
<option value = 't1'>Moins de 20 ans </option> : la légende de l'option est "moins de 20 ans" ; la value de l'option est 't1'. Donc si sous sélectionnez cet item vous envoyez la valeur "t1" à la page cible !

Dans un groupe de boutons radio (input type ="radio"), on ne peut cocher qu'un bouton. Pour créer un groupe de boutons radio il faut donner le même nom aux différents boutons.

Pour créer un groupe de cases à cocher il faut donner le même nom à tous les input type ='checkbox' .
Dans un groupe de cases à cocher on peut cocher plusieurs cases. Donc les réponses constituent un tableau de valeurs. C'est pour cette raison que le nom du groupe est celui dun tableau : sports[]

Pour chaque case à cocher ou bouton radio il faut utiliser l'attribut value. Ainsi si vous cochez la première et la dernière case à cocher vous envoyez les valeurs A et D. Donc la variable SPORTS est en fait un tableau de valeurs.
Une case à cocher ou un bouton radio peut être coché par défaut avec l'attribut checked.
Pour légender les boutons radio et les cases à cocher on a utilisé la balise double SPAN.

Le rendu dans un Iframe

Le code de la page cible : "renseignements.php" (extraits)

<h3>Bravo ! Vous avez renseigné le formulaire
	<br>Les données soumissionnées seront traitées ici</h3>
<?php
	echo "Votre nom est  : " .$_GET['nom'].  "<br>";
	echo "Votre prénom est  : " .$_GET['prenom'].  "<br>";
	echo "Votre civilité est  : " .$_GET['civilite'].  "<br>";
	echo "Votre âge est  : " .$_GET['age'].  "<br>";
	echo "Saisie dans le groupe de case à cocher 'sports' non traitée car trop complexe" . "<br>"; 
	echo "Votre adresse est  : " .$_GET['adresse1'].  "<br>";
	echo "Votre adresse-suite  est  : " .$_GET['adresse2'].  "<br>";
	echo "Votre adresse-ter  est  : " .$_GET['adresse3'].  "<br>";
	echo "Votre téléphone est  : " .$_GET['mobile'].  "<br>";
	echo "Votre mail est  : " .$_GET['email'].  "<br>";
?>

Il y a donc dans la page cible, un script PHP.

Adresser une pièce jointe

Vous pouvez souhaiter envoyer un fichier présent sur votre disque dur, par exemple une image. Il faut alors utiliser la balise input avec le type file

Avec l'attribut accept vous pouvez préciser le type de fichier susceptible d'être envoyé.

Avec input type = "file" vous créez un champ qui est suivi d'un bouton légendé "choisissez un fichier".
Ce bouton permet d'ouvrir une boite de dialogue "Open" pour choisir le fichier.

Attention dans le cas d'envoi de fichiers l'attribut enctype devient obligatoire !

Formulaire qui permet d'envoyer une image

Le code du formulaire

...
<p class ="remarque">Envoi d'une image
<form  action = "envoi_image.php" method = "post" 
	enctype ="multipart/form-data" name ="envoi_image"> 
	<label>Choix de l'image</label>	
		<input type = "file"  accept ="image/gif, image/jpeg, image/jpg" 
			size ="30"  name ="choix_image"/>
	<label></label><input type ="submit" value ="Validez">
</form>

Pour l'envoi d'un fichier il faut donner la valeur "multipart/form-data" à l'attribut enctype de la balise FORM.
Si vous oubliez cet attribut dans le cadre d'un envoi de fichier le destinataire ne recevra qu'une chaine de caractères contenant le nom et le chemin de ce fichier dans le disque dur de l'expéditeur.

Grâce à la valeur de l'attribut accept il y aura filtrage !
Ainsi si vous sélectionnez un dossier contenant des images vectorielles (*.svg) celles-ci ne vont pas apparaitre puisque vous n'autorisez que les fichiers gif, jpg et jpeg.

Le code de la page cible "envoi_image.php"

	...
	<h2>Bravo !
	<br>L'image a bien été soumissionnée !</h2>
	...

Le traitement en PHP de l'envoi de fichier n'est pas évoqué ici ! Dans la page cible je contente d'indiquer la bonne réception.

Le rendu dans un Iframe

Zone de texte multiligne & champs masqués

Un formulaire peut contenir dans zones de texte multilignes et des champs masqués.
Nous allons créer un "livre d'or" pour recueillir les critiques et suggestions des clients.

Le code du formulaire

<form name ="form1"  action = "livredor.php" method = "post" > 
	<input type ="hidden"  value = "message pour livre d'or" name ='provenance' />
	<label>* Votre pseudonyme (4 lettres mini):</label>	<input type ="text" maxlength ="8"   name ='pseudo' />
	<label>Votre message : </label>	
	<textarea  name ='message'></textarea>
	<label>* Votre adresse mail :</label>	<input type = "text" 	 name ='email' />
	<label></label><input type ="submit"  value ="validez" />
</form>

Les données sont adressées à "livredor.php"

input type ="hidden" : champ masqué ; C'est la "value" de ce champ qui est adressé au site à l'insu du visiteur.
textarea : zone de texte extensible pour saisir un long texte. A la différence de INPUT il s'agit d'une balise double

Le code de la page cible "livredor.php"

Ici aussi je me contente d'afficher les données soumissionnées. <h1>Vos remarques sont prises en compte</h2> <?php echo "Votre avis est pris en compte !" . "<br>"; echo "Votre pseudonyme est : " .$_POST['pseudo']. "<br>"; echo "Votre email est : " .$_POST['email']. "<br>"; echo "Votre message est : " .$_POST['message']. "<br>"; ?>

Comme les données ont été soumissionnées avec la méthodes post, elles sont stockées dans le tableau $_POST.

Le rendu dans un Iframe

Pour en savoir davantage

Les limites des formulaires HTML4

La spécification HTML 4 ne prevoyait aucun contrôle de saisie en HTML.
Ainsi vous avez pu saisir n'importe quelle chaine en matière d'adresse mail, de numéro de mobile, etc.
Vous pouvez aussi laisser des champs vides.

côté client avec du JS (dans la page contenant le formulaire)
coté serveur avec du PHP (dans la page cible)

Dans ce tuto il y a un autre chapitre sur les toutes les nouveautés relatives aux formulaires apportées par la spécification HTML5. Vous verrez que les éléments INPUT ont été considérablement enrichis par de nouveaux attributs pour permettre un véritable contrôle de saisie côté client et évite, le plus souvent, de devoir recourir à une routine JS. : HTML5 : des formulaires nettement améliorés

Si vous voulez en savoir plus sur le contrôle de saisie via un script : JavaScript et les formulaires HTML

Le traitement des données en PHP

Le traitement en PHP des données soumissionnées est juste survolé dans ce chapitre.
Pour en savoir davantage : Traiter les données du formulaire de soumission en PHP

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

HTML5 : nouvelles balises et nouveaux attributs

Des API HTML utiles - des applications monopages

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

HTML4 : les tableaux et les formulaires

Les tableaux en HTML4

Exemple 1

Le code HTML correspondant

La feuille de style de la page (donc commune aux deux tableaux)

Un autre exemple de tableau

Le code HTML correspondant

HTML4 et les formulaires

Le conteneur FORM

Les zones de saisie

Les légendes

Les boutons de commande

Autres zones de saisie

Une fiche de renseignements en ligne

Le code CSS (extrait)

Le code du formulaire (code HTML)

Le rendu dans un Iframe

Le code de la page cible : "renseignements.php" (extraits)

Adresser une pièce jointe

Formulaire qui permet d'envoyer une image

Le code du formulaire

Le code de la page cible "envoi_image.php"

Le rendu dans un Iframe

Zone de texte multiligne & champs masqués

Le code du formulaire

Le code de la page cible "livredor.php"

Le rendu dans un Iframe

Pour en savoir davantage

Les limites des formulaires HTML4

Le traitement des données en PHP