HTML : tableaux et 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 cellules.

HTML4 et les formulaires

HTML5 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 norme que je vais rappeler dans la suite de ce chapitre.

On parle de formulaire de soumission lorsque les données saisies sont adressées dans une autre page en vue d'un traitement (le plus souvent effectué en langage PHP).

L'outil formulaire peut aussi être utilisé pour les entrées-sorties dans le cadre d'une micro application JS en ligne.

L'élément FORM

Le code d'un formulaire est contenu à l'intérieur du conteneur FORM.

La balise FORM comprend deux attributs obligatoires lorsqu'il s'agit d'un formulaire de soumission (envoi de données) : action et method.
l'attribut action : précise l'URL de la page cible.

method

get : les informations apparaissent dans la barre d'adresse du navigateur, c'est génant ...
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 ...

Liste déroulante

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.
Exemple : <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 !

Vous pouvez affecter à une option de liste l'attribut selected : valeur par défaut.

Boutons radio

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.

Cases à cocher

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[] par exemple.

Vous pouvez affecter à un bouton radio ou une case à cocher l'attribut checked : valeur par défaut.

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

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

Une fiche de renseignements en ligne - première solution

Une première page ("renseignements.htm") contient un formulaire.
Les données sont envoyées à la page "renseignements.php" en vue d'un traitement PHP.

Le code de la page cible : "renseignements.php"

La page cible doit avoir pour extension .php car elle contient un script dans ce langage. <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>"; ?>

Je vous communique ce code pour info, le langage PHP n'est pas l'objet de ce tuto.

Première solution pour la page d'origine

Le code

Il ne contient que du 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' selected>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[]'> <input type ="submit" value ="envoyez" > </form>

action = "renseignements.php" : précise la page cible (qui reçoit les données soumissionnées) ; cette page
method = "get" : les données saisies apparaitront dans la barre d'URL suite à la soumission.
target = "_blank" : la page cible s'affiche dans un nouvel onglet

Le rendu dans un Iframe

Même si vous laissez des champs vides vous pouvez cependant soumissionner ...
Il n'y a donc aucun contrôle de saisie "côté client".

La page d'origine - deuxième solution

Il faut prévoir un contrôle de saisie "côté client" grâce à un script JS.

Le code HTML

Identique à la solution précédente sauf la dernière instruction :
<input type ="button" value ="envoyez" onclick ="fcontrole()" >
Le bouton devient type "button" et appelle une fonction JS sur clic.

Le script

function fcontrole()
	{
		var reg1 = new RegExp("^[A-Z]{2,20}$");
		var reg2 = new RegExp("^[a-z]{2,20}$");
		if(reg1.test(form1.nom.value) && reg2.test(form1.prenom.value)) 
			{ form1.submit() ; alert("soumission effectuée"); }
		else
			alert("erreur de saisie")
	}

le nom doit être une chaine de lettres majuscules entre 2 et 20 caractères.
le prénom doit être une chaine de lettres minuscules entre 2 et 20 caractères.

Si les saisies correspondent à ces gabarits il y a soumission via la méthode submit() de JS.
Sinon affichage d'une message d'erreur.

Le rendu dans un Iframe

Si le champ "nom" contient des minuscules et le champ "prenom" des majuscules la soumission est bloquée ; un message avertit d'une erreur de saisie.

Compléments sur les formulaires

Il y a beaucoup de choses à dire sur les formulaires ...

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 !

Exemple : formulaire qui adresse une image

...
<p>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 rendu dans un Iframe

Zone de texte extensibles & champs masqués

Un formulaire peut contenir dans zones de texte extensibles 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 valeur de ce champ qui est soumissionnée à l'insu du visiteur.
textarea : zone de texte extensible pour saisir un long texte.

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

La spécification HTML 4 ne prévoyait aucun contrôle de saisie en HTML (contrôle "navigateur"). Aussi il fallait souvent associer au formulaire un script de contrôle.

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 types de nouveaux attributs pour permettre un véritable contrôle de saisie "navigateur". Le plus souvent il sera suffisant pour le contrôle "côté client". HTML5 - des formulaires nettement améliorés

Dans ce chapitre le traitement en PHP des données soumissionnées est juste évoqué mais dans mon site il existe un tuto d'initiation au PHP.
Pour en savoir davantage : Traiter les données soumissionnées en PHP

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

La spécification HTML 5

Des API HTML utiles très pratiques

Tutoriel HTML5 - recherche

L'auteur : Patrick Darcheville

HTML : tableaux et 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

L'élément FORM

Les zones de saisie

Liste déroulante

Boutons radio

Cases à cocher

Les légendes

Les boutons de commande

Une fiche de renseignements en ligne - première solution

Le code de la page cible : "renseignements.php"

Première solution pour la page d'origine

Le code

Le rendu dans un Iframe

La page d'origine - deuxième solution

Le code HTML

Le script

Le rendu dans un Iframe

Compléments sur les formulaires

Adresser une pièce jointe

Exemple : formulaire qui adresse une image

Le rendu dans un Iframe

Zone de texte extensibles & champs masqués

Le code du formulaire

Le code de la page cible "livredor.php"

Le rendu dans un Iframe

Pour en savoir davantage