Balises de formulaire

Transcription

1 Les formulaires XHTML permettent de recueillir les informations saisies par un utilisateur, puis de les transmettre à un programme serveur. Nous verrons : - la structure d un formulaire - les éléments d un formulaire 94

2 La balise <form> Structure - contient le texte ainsi que les éléments constituant le formulaire Exemple - <form action= add.php method= post >... </form> 95

3 Attributs Structure - action : (obl) URL du script ou programme qui va traiter les données - accept : précise la liste de types MIME autorisés par le serveur - accept-charset : jeu de caractère autorisé par le serveur - enctype : par défaut application/x-www-form-urlencoded ou multipart/form-data si l on transmet un fichier. - method : méthode de transfert des données get ou post. get par défaut, les données suivent l URL. Avec post, les données sont envoyées dans une requête séparée. 96

4 Elément input La balise <input /> - place l un des contrôle suivant dans un formulaire : texte, mot de passe, champ masqué case à cocher bouton d option pièce jointe bouton graphique bouton de commande bouton de soumission 97

5 Attributs Elément input - name : (obl) identifie le champ de manière unique - type : le type de champ (texte, case à cocher,...) - accesskey : raccourci clavier pour sélectionner le champ - tabindex : position du champ dans la séquence de tabulations - Les autres attributs sont différents selon le type 98

6 Elément input Le type text ou password - value : permet de remplir le champ avec une valeur par défaut - size : indique la longueur (nombre de caractères) de l affichage du champ - maxlength : précise le nombre de caractères pouvant être saisis - disable : pour désactiver le champ (disable= disable ) - readonly : laisse le champ actif, mais interdit la saisie Exemple : - <input type= text name= pseudo length= 8 maxlength= 50 > 99

7 Elément input Le type checkbox (case à cocher) - value : valeur à envoyer au serveur - checked : coche la case au chargement (checked= checked ) - disable : désactive la case - ici name donne un nom unique à la case 100

8 Elément input Le type radio - value : valeur est la valeur à envoyer au serveur - checked : active l option au chargement - disabled : désactive l option - ici on donne la même valeur à name pour les options du même groupe (un seul choix possible) 101

9 Elément input Le type file (pour envoyer un fichier) - value : prédéfini un nom de fichier - accept : définit les types MIME autorisés - avec le type file, il faut impérativement passer les attributs suivants à la structure du formulaire : method= post (un fichier ne peut être envoyé dans l URL) enctype= multipart/form-data 102

10 Elément input Le type hidden (élément caché) - value : valeur à transmettre au serveur Le type button - value : l intitulé du bouton - onclick : script à executer au click 103

11 Elément input Le type image (bouton graphique) - src : URL de l image - alt : propose un texte de substitution - usemap : nom de la carte client à utiliser - par défaut cette image ne validera pas le formulaire si elle est cliquée. 104

12 Elément input Le type submit et reset - value : définit le texte à mettre sur le bouton - submit est un bouton qui valide le formulaire et envoie les valeurs entrées au script - reset est un bouton qui réinitialise le formulaire à ses valeurs par défaut 105

13 Exemple : Elément input - <form action= /cgi-bin/script.pl > Utilisateur : <input type= text name= login size= 12 /><br /> Mot de passe : <input type= password name= passwd size= 12 /> <input type= hidden name= browser value= ie5 /><br /> Sexe : <input type= radio name= sex value= f />Féminin <input type= radio name= sex value= m />Masculin<br /> <input type= button value= Validation onclick= validate() /> <input type= submit value= Soumetre /> <input type= reset value= Annuler /> </form> 106

14 Elément select La balise <select> - Définit une liste de choix permettant une sélection ou des sélections multiples Attributs - disabled : désactive le champ - multiple : permet d effectuer plusieurs choix dans la liste - name : donne un nom unique au champ - size : nombre d options affichées simultanément - tabindex : position du champ dans la séquence de tabulation 107

15 Exemple : Elément select - <p>choisissez une taille :</p> <select name= size > <option>petit</option> <option>moyen</option> <option>grand</option> <option>très grand</option>... </select> 108

16 Elément select La balise <option> - Définit une option de l élément <select> Attributs - disabled : désactive l option - label : propose un libellé pour l option. - selected : sert à présélectionner l option (selected= selected ) - value : indique la valeur à passer au navigateur lorsque l option est sélectionnée. A défaut de la valeur, c est le texte de l option qui est utilisé. 109

17 Elément select La balise <optgroup> - définit un groupe logique d options. - tous les navigateurs ne supportent pas encore cet élément. Attributs - disabled : désactive les options du groupe - label : (obl) donne un libellé au groupe d options 110

18 Exemple Elément select - <optgroup label= Premier Trimestre > <option value= Jan >janvier</option> <option value= Feb >février</option> <option value= Mar >mars</option> </optgroup>

19 Elément textarea La balise <textarea> - crée une zone de texte de plusieurs lignes Attributs - cols : (obl) nombre de caractères autorisés par ligne - rows : (obl) nombre de lignes autorisées - readonly : active le contrôle, mais ne permet pas d en modifier le contenu - name, disabled, accesskey, tabindex 112

20 Elément textarea Exemple - <textarea name= feedback rows= 10 cols= 40 > Merci de vos commentaires. Effacez ce texte et tapez vos commentaires à la place. </textarea> 113

21 Elément button La balise <button> - Place un bouton dans le formulaire ( input) - Tout ce qui est entre <button> et </button> est le contenu du bouton (texte, image, etc...) Attributs - type : submit, reset ou button en fonction de l action désirée - value : valeur transmise au serveur lorsque le bouton est cliqué - name, accesskey, disabled, tabindex 114

22 Exemple Elément button - <button type= submit > <img src= tick.jpg > </button> 115

23 Elément fieldset Le balise <fieldset> - regroupe des champs apparentés dans un formulaire. Attributs - aucun 116

24 Elément legend La balise <legend> - Donne un nom à un groupe de champs Attributs - accesskey éventuellement Exemple - <fieldset> <legend>identification</legend> Utilisateur : <input.../> Mot de passe : <input.../> </fieldset> 117

25 La balise <label> Labels - donne un libellé à un champ de formulaire - indique à l utilisateur ce qu il doit saisir dans le champ Attributs - for : correspond à la valeur de l id du champ auquel il réfère - accesskey : définit un raccourci clavier 118

26 Labels Exemple <label for= usr >Votre pseudo :</label> <input type= text id= usr name= user /> <br /> <label for= pw accesskey= p >Votre mot de passe :</label> <input type= password id= pw name= passwd /> 119

27 Exercice Donnez le code complet du formulaire suivant : Modifiez le pour avoir le formulaire suivant : 120

28 Correction <form action="/cgi-bin/script.pl" method= GET > <fieldset> <legend>authentification</legend> <label for="txtlogin">utilisateur : </label><input type="text" id="txtlogin" name="login" size="12" /><br /> <label for="pwdpasswd">mot de passe : </label><input type="password" id="pwdpasswd" name="passwd" size="12" /><br /> </fieldset> <fieldset> Ton animal préféré : <input type="radio" name="ani" id="rdchien" value="chien" /><label for="rdchien">chien</label> <input type="radio" name="ani" id= rdchat value="chat" /><label for="rdchat">chat</label> <br />Tes loisirs : <label for="chksport">le sport </label> <input type="checkbox" name="sport" id="chksport" /> <label for="chklect">la lecture </label> <input type="checkbox" name="lecture" id="chklect" /> </fieldset><br /> <input type="submit" value="valider" /> <input type="reset" value="annuler" /> </form> 121

29 Exercice 2 Reproduisez le formulaire suivant : 122