Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Tout ce qui est dit dans ce chapitre concernant les tableaux HTML et les formulaires est toujours valide en HTML5.
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.
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.
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.
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).
BO11 | 10 € | 10% |
VI300 | 20 € | 10% |
CL040 | 5 € | 20% |
EC150 | 15 € | 20% |
Fusion de cellules | *** | *** |
*** | *** |
Notez la fusion de cellules sur deux lignes dans la première colonne.
Remarque : la dernière ligne TR ne contient que deux balise TD !
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 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 !
Grâce aux champs masqués le visiteur peut adresser à son insu des informations ...
On associe en général à chaque zone de saisie une légende grâce au conteneur LABEL.
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.
La saisie ne se fait pas forcément via un champ de saisie (input type ='text' ou input type ='password')
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.
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.
Il y a donc dans la page cible, un script PHP.
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 !
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 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.
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.
Les données sont adressées à "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.
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 contrôle de saisie via un script : JavaScript et les formulaires HTML
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