FORMULAIRES EN XHTML

Transcription

1 FORMULAIRES EN XHTML Objectifs Etre capable de réaliser un formulaire dans une page Web Compléments nécessaires Un éditeur pour XHTML (HTML-Kit, etc.) Niveau de compétences en pré-requis Connaissance des bases de l'écriture de pages en XHTML Ce document d'enseignement est diffusé librement, pour usage individuel. Il est librement téléchargeable sur le site de l'auteur *. Michel Cartereau - Décembre 2008 AgroParisTech - UFR d'informatique - 16, rue Claude Bernard - F PARIS CEDEX 05 agroparistech.fr - Téléphone : Télécopie : *

2 SAVEZ-VOUS? Répondre soit par vrai ou faux. 1. Les renseignements issus dans un formulaire sont toujours transmis en clair. 2. Toute donnée issue d'un formulaire est identifiée par un nom de zone. 3. Il est possible de choisir plusieurs options à la fois dans une zone de liste. 4. Une zone cachée de formulaire sert à placer un commentaire pour l'auteur. 5. Dans le cas d'un bouton à image, le serveur reçoit les coordonnées du clic. 6. XHTML facilite le regroupement de zones d'un formulaire. 7. XHTML permet de regrouper des options dans une liste de formulaire. 8. Le mode de transmission des données est défini par l'attribut «method». 9. On peut définir un texte initial pour une zone de saisie sur plusieurs lignes. 10. L'activation initiale d'une case à cocher s'obtient avec l'attribut «selected». Formulaires en XHTML - Page 2

3 UTILISATION D'UN FORMULAIRE UN EXEMPLE DE RECUEIL DE RENSEIGNEMENTS FORMULAIRE Nom Adresse Catégorie Envoi znom=tarzan Albert zadresse=jungle zcategorie=homme FORMULAIRE D'ENREGISTREMENT RENSEIGNEMENTS TRANSMIS PRINCIPES INDICATION DE LA DESTINATION DES RENSEIGNEMENTS traitement par un programme sur un serveur (en général), ou envoi par messagerie dans une boîte aux lettres (sous réserves) exemple : envoyer les renseignements au programme en CONSTRUCTION DU FORMULAIRE D'ACQUISITION assemblage à l'aide de différents types de zone, exemple : une zone de saisie d'un texte sur une ligne IDENTIFICATION DE CHAQUE RENSEIGNEMENT par un nom spécifique attribué à la zone de saisie exemple : zone de l'adresse identifiée par le nom zadresse Formulaires en XHTML - Page 3

4 PARAMÉTRAGE DU FORMULAIRE CARACTÉRISTIQUES GÉNÉRALES PARAMÈTRAGE DÉFINI DANS UN ENTÊTE (<form>) destination et mode de transmission des renseignements DESTINATION DES RENSEIGNEMENTS ISSUS DU FORMULAIRE (action="") soit envoi à un programme de traitement sur un serveur (URL) soit envoi 1 par messagerie : mailto: MODE D'ENCODAGE DES DONNÉES (enctype="") a priori, codage : application/x-www-form-urlencoded 2 ou en cas d'envoi avec fichier joint : multipart/form-data ou en cas d'envoi en clair dans un message : text/plain MODE DE TRANSMISSION DES DONNÉES AU SERVEUR (method="") soit "get" : envoi avec l'adresse de destination (a priori), soit "post" : envoi en dehors de l'adresse (données invisibles) 3 CAS DE LA TRANSMISSION VERS UNE BOÎTE AUX LETTRES ENVOI D'UN MESSAGE À UNE ADRESSE ÉLECTRONIQUE Attention! cela dépend des possibilités du navigateur PARAMÈTRAGE action... mailto:adresse méthode... post type d'encodage... text/plain EXEMPLE DE BALISE D'ENTÊTE <form method="post" action="mailto:compte@la.bas.fr" enctype="text/plain" > 1 Envoi conditionné aux possibilités réelles du navigateur sur le poste de travail 2 Mode de codage appliqué automatiquement en cas d'absence d'indication 3 Conseillé dans le cas général car peu de contraintes sur la nature des informations transmises Formulaires en XHTML - Page 4

5 EXEMPLE DE FORMULAIRE ORDINAIRE zone de texte (1 seule ligne) znom zcommentaire zone de liste zone de texte (plusieurs lignes) case d'option zage boutons de choix exclusif zetudiant zsexe bouton d'annulation bouton de validation Formulaires en XHTML - Page 5

6 FORMULAIRE AVEC HTML-KIT CAS DE LA VERSION 1.0 ("BUILD" 292) DE HTML-KIT 1 CRÉATION DU FORMULAIRE 1) Commande ACTIONS FORMS FORM 2) Indiquer la destination en paramètre de action="" 3) Ajouter l'attribut du mode d'envoi : method="" et si besoin, du type de codage : enctype="" <form method="get" action=" BARRE D'OUTILS SPÉCIALISÉE onglet FORMS de la barre d'actions 2 formulaire zone de liste option d'une liste texte sur une ligne case à cocher bouton de choix exclusif texte sur plusieurs lignes bouton de commande Voir aussi le menu ACTIONS FORMS 1 Outil sous Windows gratuit, disponible en 2 Cette barre s'obtient via la commande AFFICHAGE BARRE D'ACTIONS Formulaires en XHTML - Page 6

7 ZONES DE SAISIE DE TEXTE SUR UNE SEULE LIGNE <input type="text" /> ou <input type="password" /> nom de la donnée associée à la zone 1, obligatoire (name="..."), valeur initiale optionnelle (value="..."), taille en caractère de l'affichage optionnelle (size="..."), longueur maximale du texte optionnelle (maxlength="..."), saisie en aveugle optionnelle (<input type="password" />) mais aucune garantie sur la confidentialité de la transmission! exemples : <input type="text" name="znom" size="40" /> <input type="password" name="zpasse" size="80" /> SUR PLUSIEURS LIGNES : <textarea></textarea> nom de la donnée associée à la zone 1, obligatoire (name="..."), taille de l'affichage optionnelle mais conseillée : en lignes (rows="...") et en colonnes (cols="..."), texte initial optionnel (éventuellement sur plusieurs lignes) : <textarea> texte </textarea> lors de l'envoi, le saut de ligne est codé par «%0D%0A» exemple : <textarea name="zdivers" rows="2" cols="18"> exprimez-vous! </textarea> 1 Le nom est défini dans la balise de la zone par l'attribut d'identification name et non pas id. Formulaires en XHTML - Page 7

8 ZONE DE LISTE CHOIX DANS UNE LISTE : <select> et <option> DÉFINITION GLOBALE DE LA LISTE (<select>) nom de la donnée associée à la zone, obligatoire 1 (name="..."), taille optionnelle de la liste affichée (size="...") : un seul élément est affiché si elle n'est pas précisée, option de choix multiple dans la liste (multiple="multiple"), envoi du couple «nom=valeur» pour chaque valeur sélectionnée 2 DÉFINITION D'UN ÉLÉMENT DE LA LISTE (<option>) chaque élément de la liste est défini par un libellé affiché, le libellé est transmis en résultat quand sélectionné, sauf si une valeur a été indiquée (value="valeur") en option sélection automatique lors de l'affichage (selected="selected"), sinon c'est le premier élément de la liste EXEMPLE : <select name="zage" size="1"> <option value="-18">moins de 18 ans</option> <option value="18-40">entre 18 et 40 ans</option> <option value="40-60">entre 40 et 60 ans</option> <option value="+60" selected="selected">plus de 60 ans</option> </select> 1 Le nom est défini dans la balise de la zone par l'attribut d'identification name et non pas id. 2 Modalités de sélection multiple variables selon les postes ; cas de Windows : Ctrl+clic Formulaires en XHTML - Page 8

9 BOUTON DE RADIO ET CASE À COCHER BOUTONS DE RADIO : <input type="radio" /> boutons offrant un choix exclusif entre plusieurs options nom de la donnée associée à la zone 1, obligatoire et identique pour chacune des options (name="...") pour chaque bouton, valeur transmise obligatoire (value="..."), activation initiale, en option (checked="checked") exemple : <input type="radio" name="sexe" value="h" />masculin <input type="radio" name="sexe" value="f" />féminin CASE À COCHER : <input type="checkbox" /> nom de la donnée associée à la zone 2, obligatoire (name="..."), valeur obligatoire (value="..."), envoyée seulement si case cochée, activation initiale, en option (checked="checked") exemple : <input type="checkbox" name="zetudiant" value="oui" /> ici, une information ne sera transmise qu'en cas de cochage ; ce sera alors : zetudiant=oui 1 Le nom est défini dans la balise de la zone par l'attribut d'identification name et non pas id. Formulaires en XHTML - Page 9

10 ZONES DE COMMANDE BOUTON DE VALIDATION : <input type="submit" /> 1 provoque la transmission des renseignements, libellé affiché (value="..."), si non défini fixé par le navigateur, nom d'une donnée associée à la zone (name="...") optionnel, possibilité de plusieurs boutons exemple : <input type="submit" value="envoyer" /> BOUTON AVEC UNE IMAGE : <input type="image" /> 1 provoque implicitement la transmission des renseignements, indication obligatoire de l'adresse de l'image (src="..."), libellé (alt="...") de remplacement si image non visible, nom d'une donnée associée à la zone (name="...") optionnel, le serveur reçoit aussi les coordonnées du clic sur l'image exemple : <input type="image" src="lettre.gif" alt="envoyer" /> BOUTON D'ANNULATION : <input type="reset" /> 1 provoque l'effacement des informations déjà saisies et le rétablissement des valeurs initiales dans chaque zone, libellé affiché (value="...") optionnel, exemple : <input type="reset" value="effacer" /> 1 Autre possibilité avec la balise <button> mais déconseillée (non reconnue par de vieux navigateurs et avenir de cette balise incertain dans de futures normes). Formulaires en XHTML - Page 10

11 ZONES SPÉCIALES CES ZONES NE S'UTILISENT QUE DANS DES CAS TRÈS PARTICULIERS BOUTON D'ACTIVATION DE SCRIPT : <input type="button" /> 1 activation d'un script quand le bouton est pressé, indication du libellé affiché sur le bouton (value="..."), le script est associé à l'événement onclick exemple : <input type="button" value="spécial" onclick="faire();" /> BOUTON POUR JOINDRE UN FICHIER : <input type="file" /> cas de l'envoi d'un fichier choisi par l'usager, codage spécial : multipart/form-data associé à POST (chaque autre renseignement est transmis séparément) nom de zone indispensable (name=""), taille d'affichage optionnelle (size=""), le bouton et son libellé sont en fait définis par le navigateur, Attention! mécanisme assez mal géré par les navigateurs exemple : <form action=" enctype="multipart/form-data" method="post"> <input type="file" name="zdocument" /> ZONES CACHÉES : <input type="hidden" /> renseignement ni saisi par l'usager ni affiché dans la page, nom de la donnée associée à la zone 2 (name="...") et valeur (value="...") obligatoires, exemple : <input type="hidden" name="zpays" value="fr" /> 1 Autre possibilité avec la balise <button> mais déconseillée (non reconnue par de vieux navigateurs et avenir de cette balise incertain dans de futures normes). 2 Le nom est défini dans la balise de la zone par l'attribut d'identification name et non pas id. Formulaires en XHTML - Page 11

12 REGROUPEMENT DE ZONES RENFORCEMENT DE LA LISIBILITÉ DU FORMULAIRE 1 légende encadrement REGROUPEMENT DE ZONES : <fieldset> balise de regroupement d'une partie d'un formulaire, signalé à l'affichage généralement par un cadre englobant ATTRIBUTION D'UNE LÉGENDE : <legend> balise de définition d'une légende d'un regroupement, doit être placée juste après le début de regroupement (<fieldset>), affichage dans le coin supérieur gauche du cadre englobant EXEMPLE <fieldset> <legend>important</legend> nom <input name="znom" type="text" /> prénom <input name="zprenom" type="text" /> </fieldset> 1 Notamment pour les malvoyants ; mécanisme introduit dans la version n 4 d'html Formulaires en XHTML - Page 12

13 REGROUPEMENT D'OPTIONS RENFORCEMENT DE LA LISIBILITÉ D'UNE LONGUE LISTE 1 libellé d'un groupe d'options REGROUPEMENT D'OPTIONS : <optgroup> balise de définition d'un groupe d'options d'une liste, avec un libellé du groupe obligatoire (label="...") signalé à l'affichage généralement par une mise en forme du libellé et par un décalage des options du groupe EXEMPLE <select name="zarbre" multiple="multiple" size="9"> <option selected="selected" label="aucun" value="?">aucun</option> <optgroup label="conifère"> <option value="pinus">pin</option> <option value="larix">mélèze</option> <option value="thuya">thuya</option> </optgroup> <optgroup label="feuillu"> <option value="quercus">chêne</option> <option value="fagus">hêtre</option> <option value="castanea">châtaignier</option> </optgroup> </select> 1 Mécanisme introduit dans la version n 4 d'html Formulaires en XHTML - Page 13

14 ETIQUETTES DE ZONES RENFORCEMENT DE L'ACCESSIBILITÉ AU FORMULAIRE 1 sélection par clic sur le libellé PRINCIPE DE L'ÉTIQUETTE DE ZONE : <label> Spécification du libellé associé à une zone à renseigner mécanisme de liaison entre le texte du libellé et la zone Renforcement de l'accessibilité à la zone sélection via le libellé et indication non-visuelle aux malvoyants ETIQUETTE DE ZONE IMPLICITE Enrobage de la zone et son libellé 2 par la balise <label> <label> zone avec libellé </label> Exemple <p><label>ville : <input type="text" name="zville" /></label> - <label>pays : <input type="text" name="zpays" /></label></p> ETIQUETTE DE ZONE EXPLICITE Association indirecte via une identification de la zone : attribut id="nom" dans la balise de la zone, <label for="nom"> libellé </label> Exemple <p>sexe : <input type="radio" name="zsexe" value="m" id="sexem" /> <label for="sexem">masculin</label> - <input type="radio" name="zsexe" value="f" id="sexef" /> <label for="sexef">féminin</label> </p> 1 Notamment pour les malvoyants ; mécanisme introduit dans la version n 4 d'html 2 Attention à ce que la balise <label> ne recouvre qu'une seule zone de saisie. Formulaires en XHTML - Page 14

15 ATTRIBUTS SUPPLÉMENTAIRES CES ATTRIBUTS ONT ÉTÉ INTRODUITS DANS LA VERSION N 4 D'HTML TOUCHE DE RACCOURCI : accesskey="symbole" Affectation d'une touche 1 de raccourci à la zone, attention! il y a une distinction entre lettre minuscule et majuscule exemple : <input type="reset" accesskey="z" /> IDENTIFICATION D'UNE ZONE : id="nom" identification utilisable par programmation ou comme une ancre, complémentaire au nom de zone (name) et non transmis à l'envoi exemple : <input type="text" name="zad1" id="rue"> DÉSACTIVATION D'UNE ZONE : disabled et readonly avec disabled="disabled", une zone ne peut pas être modifiée par l'usager, et la donnée associée n'est pas envoyée à la validation ; généralement elle apparaît en grisé pour signaler cet état readonly="readonly" ne s'applique qu'à une zone de saisie de texte, la zone ne peut pas être modifiée par l'usager mais la donnée associée est envoyée à la validation ; il n'y a pas de signalement particulier à l'écran de cet état exemples : <input type="checkbox" name="zagro" value="1" disabled="disabled" />Agronome <textarea name="zpays" readonly="readonly"> France </textarea> SÉQUENCE DE PARCOURS DES ZONES : tabindex="rang" agit sur le parcours des zones à l'aide de la touche de tabulation, en fixant un rang à chaque zone (ou zéro pour l'exclure), attention! si utilisé, attribuer alors un rang à toutes les zones exemple : <input type="text" name="znom" tabindex="2" /> 1 Combinaison avec la touche «Alt» sous Windows, «Commande» à la pomme sur Macintosh Formulaires en XHTML - Page 15

16 EXERCICE DU FORMULAIRE DE SAISIE RECONSTITUER LA PAGE AVEC LE FORMULAIRE SUIVANT PRÉCISIONS : 1) Envoi vers 2) L'information sur le type du primeur (légume ou fruit) est envoyée en lettres majuscules ; exemple : LEGUME pour un légume et FRUIT pour un fruit 3) Il est possible de sélectionner une zone de saisie en cliquant sur le libellé associé dans le texte de la page ; exemple : clic sur Prix : pour passer dans la zone de saisie Formulaires en XHTML - Page 16

17 QUESTIONS SUR LES FORMULAIRES 1. Quels sont les paramètres d'un formulaire? 2. Quels types de zone correspondent à la saisie de texte? 3. Une zone de liste se définit à l'aide de quelle(s) balise(s)? 4. En quoi une case à cocher se différence-t-elle d'un bouton de radio? 5. Quel est le rôle principal des attributs «value» et «name»? 6. A quoi sert une zone cachée? 7. Quel(s) type(s) de zone provoque l'envoi des renseignements saisis dans le formulaire? 8. Comment s'utilise la balise «<legend>»? 9. Quel est le rôle de la balise «<label>»? 10. Les attributs «id» et «name» sont-ils équivalents? Formulaires en XHTML - Page 17

18 SOLUTIONS DU TEST DE CONNAISSANCES 1. Faux, ils sont généralement codés [voir page 4]. 1. Vrai [voir page 2]. 2. Vrai, avec l'attribut de choix multiple [voir page 8]. 3. Faux, il s'agit d'un renseignement caché mais envoyé [voir page 11]. 4. Vrai [voir page 10]. 5. Vrai [voir page 12]. 6. Vrai [voir page 12]. 7. Vrai [voir page 13] 8. Vrai [voir page 4] 9. Vrai [voir page 7] 10. Faux [voir page 9] Formulaires en XHTML - Page 18

19 INDEX %0D%0A, 7 <button>, 10, 11 <fieldset>, 12 <FORM>, 4 <input>, 7 <label>, 14 <legend>, 12 <optgroup>, 13 <option>, 8 <select>, 8 accesskey, 15 action, 4 alt, 10 ancre, 15 application/x-www-formurlencoded, 4 button, 11 checkbox, 9 checked, 9 cols, 7 coordonnées, 10 disabled, 15 enctype, 4 étiquette, 14 événement, 11 FILE, 11 formulaire, destination, 3, 4 formulaire, message, 4 formulaire, paramètrage, 4 get, 4 hidden, 11 id, 14, 15 maxlength, 7 method, 4 multiform/form-data, 4 multipart/form-data, 11 multiple, 8 name, 7 onclick, 11 option, regroupement, 13 post, 4 POST, 11 radio, 9 readonly, 15 reset, 10 rows, 7 saut de ligne, codage, 7 selected, 8 size, 7 src, 10 submit, 10 tabindex, 15 tabulation, 15 text/plain, 4 value, 7, 8 zone, bouton avec une image, 10 zone, bouton d'annulation, 10 zone, bouton de radio, 9 zone, bouton de validation, 10 zone, bouton pour fichier, 11 zone, bouton pour script, 11 zone, cachée, 11 zone, case à cocher, 9 zone, désactivation, 15 zone, identification, 15 zone, liste, 8 zone, nom, 3, 7 zone, parcours, 15 zone, regroupement, 12 zone, regroupement à légende, 12 zone, texte à plusieurs lignes, 7 zone, texte d'une ligne, 7 zone, touche de raccourci, 15 zone, valeur initiale, 7 Formulaires en XHTML - Page 19

20 SOMMAIRE Savez-vous?... 2 Utilisation d'un formulaire... 3 Paramétrage du formulaire... 4 Exemple de formulaire ordinaire... 5 Formulaire avec HTML-Kit... 6 Zones de saisie de texte... 7 Zone de liste... 8 Bouton de radio et case à cocher... 9 Zones de commande Zones spéciales Regroupement de zones Regroupement d'options Etiquettes de zones Attributs supplémentaires Exercice du formulaire de saisie Questions sur les formulaires Solutions du test de connaissances Index Formulaires en XHTML - Page 20