Accueil

Traduction

Tutoriel HTML - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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érenceprix HTtaux TVA
BO1110 €10%
VI30020 €10%
CL0405 €20%
EC15015 €20%
*****
*****
nbre référenceprix moyen
412,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

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)

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

Un autre exemple de tableau

BO1110 €10%
VI30020 €10%
CL0405 €20%
EC15015 €20%
Fusion de cellules******
******

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

Le code HTML correspondant

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 tout ce chapitre.
Mais rassurez vous, il y a dans ce tuto tout un chapitre sur les nouveauté apportés par HTML5 en matière de formulaire : : HTML5 - des formulaires nettement améliorés

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 !

Les zones de saisie

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

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

Une fiche de renseignements en ligne

Le code CSS (extrait)

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)

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.

Testez ce formulaire !

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

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

D'ailleurs ce script est incomplet. En effet comme on peut cocher plusieurs sports le traitement du tableau est plus délicat ... Pour le traitement des cases à cocher voir la fin de ce chapitre.

Si vous voulez vous initier à PHP : Débuter en 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

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"

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.

Testez le formulaire d'upload d'image !

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

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

Le code de la page cible "livredor.php"

Ici aussi je me contente d'afficher les données soumissionnées.

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

Testez le livre d'or !

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.

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 JS qui est souvent associé au formulaire : JavaScript et les formulaires HTML

Récupérer les valeurs saisies dans un groupe de cases à cocher

On peut cocher plusieurs cases dans un groupe de cases à cocher. Donc le résultat retourné est un tableau !
Le traitement PHP est donc un peu particulier.

Je vous propose un formulaire qui vous demande d'indiquer vos couleurs préférées via un groupe de cases à cocher.

Le code de la page unique


En effet le formulaire et le script PHP se trouvent dans la même page. Ce qui n'est pas interdit ...
L'extension de la page doit alors être obligatoirement .php !

Commentaire et test de ce ce code

Code du formulaire :
Notez la valeur de l'attribut action. J'aurais pu indiquer le nom de la page ("cases_a_cocher.php").
Le nom d'un groupe de cases à cocher doit être celui d'un tableau puisque on peut saisir plusieurs valeurs. Ici gout[] voir aucune ...

Traitement PHP :

Le script PHP est lancé dès que le tableau associatif $_POST['gout'] est créé (lors de la soumission) grâce à un test.
Sinon vous aurez un message d'erreur qui peut être pertubant pour le visiteur ...
Ce script comprend une boucle qui parcourt ledit tableau et affiche donc la valeur des caches cochées.

Testez ce code contenu dans une page unique.