Accueil

Traduction

Tutoriel HTML - sommaire

Tutoriel HTML5 - 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 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.

Les zones de saisie

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

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.

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.

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

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

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

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.

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