28 novembre 2012 Grégory Petit

Présentation au sujet: "28 novembre 2012 Grégory Petit"— Transcription de la présentation:

1 28 novembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2580/

2 La semaine dernière Les critères ergonomiques Design des pages Web

3 Et donc on fait quoi aujourdhui? Les formulaires Les champs de formulaire

4 Les formulaires

5 Ils permettent de collecter des informations entrées par lusager du site Web. Un formulaire contient plusieurs champs qui peuvent être de type différent. Il est important de regarder ce qui se passe dans le code car Dreamweaver fait des fois des trucs bizarres.

6 Récupération des données Pour récupérer les données envoyées par un formulaire, il faut des notions des javascript ou de PHP. Bien trop complexe pour ce cours. On va apprendre à faire des formulaires, mais pas le traitement des données derrière.

7 Dreamweaver

8 Action : indique quelle va être laction lorsque le soumettre va être soumis. Cela peut être : Louverture dune page de résultats Lexécution dun script Lenvoie dun courriel Method : type denvoie des données Post : données encodées dans le corps de la page Get : données encodées dans lURL de la page … Paramètres du formulaire

9 Dreamweaver

10 La fenêtre précédente napparaît que si vous faites lajout depuis le code. Si vous faites lajout depuis le mode "vue" vous pouvez changez les paramètres du formulaire avec la boite doutils des propriétés dun élément HTML.

11 Champs de formulaire

12 Ce sont des éléments Web comme les autres. On peut donc leur appliquer des règles CSS! Beaucoup de champs ont la même balise mais possède un attribut "type" qui les différencie. Les champs sont généralement associés à des labels.

13 Champs de formulaire

14 Étiquette Il est rare quon lajoute toute seul car lorsquon ajoute un champ, on peut ajouter automatiquement une étiquette. Pour attribuer une étiquette à un champ, le paramètre "for" du label doit avoir la même valeur que le paramètre "id" du champ.

15 Champs de texte Nom Comportement du label

16 Champs mot de passe Il faut faire comme si on ajoutait un champs de texte classique. Une fois ajouté, on change le type du champs de texte dans la boîte doutils des propriétés. On peut aussi changer les propriétés de taille du champs, du nombre de caractères maximum et de la valeur initiale. Le type multi-ligne transforme le champs de texte en boite de texte.

17 Boite de texte Même boite de dialogue que pour le champs de texte. Mais boite doutils des propriétés légèrement différente. On peut modifier le nombre de ligne de la boite mais pas le nombre maximum de caractères. Rue

18 Cases à cocher Pour une seule, même comportement que pour le champs de texte. On peut choisir si la case est sélectionnée ou non par défaut. Mais pour un groupe de cases à cocher, il y a une interface particulière.

19 Groupe de cases à cocher Type de mise en page Définition des éléments Ajouter un élément au groupe Modifier lordre des éléments

20 Groupe de cases à cocher Les cases à cocher ont toutes le même nom mais pas la même valeur ni le même ID. Remarquez aussi que lélément HTML est inclus dans lélément

21 Boutons radio Pour une seule, même comportement que pour le champs de texte. Sauf quil ny a aucun intérêt à en mettre une seule. Comme pour la case à cocher, on peut choisir si le bouton est sélectionné ou non par défaut. Contrairement aux cases à cocher, on ne peut pas sélectionner plusieurs boutons radio dun même groupe.

22 Groupe de boutons radio Même genre de mise en page que les groupes de cases à cocher. Même interface que pour les groupes de cases à cocher.

23 Champs de sélection Encore une fois, Dreamweaver fait apparaître la même fenêtre que pour le champs de texte pour lajout dun champ de sélection. On choisit donc encore de la même manière le label et son comportement. Il existe deux types de champs de sélection: Menu déroulant (un seul élément sélectionnable) Liste de sélection (sélection multiple possible)

24 Ajouter des éléments au

25 Menu déroulant

26 Liste de sélection Choisir le type "list" ne suffit pas dans Dreamweaver, il faut aussi cocher la sélection multiple.

27 Groupe de champs Lélément permet de regrouper différents champs ensemble. Cest un peu comme une mais spécifique aux formulaires.

28 Groupe de champs Comme pour une, vous pouvez sélectionner directement dans Dreamweaver des éléments et ajouter votre autour.

29 Bouton de soumission Encore une fois, Dreamweaver fait apparaître la même fenêtre que pour le champs de texte pour lajout du bouton de soumission du formulaire. Attention! Ne pas mettre de label au bouton de soumission mais changer la valeur de lattribut "value" pour indiquer le texte du bouton.

30 Bouton de soumission

31 Champs de formulaire spry On peut aussi ajouter dautres champs du même type quon vient de voir mais qui ont une fonction de validation. Ils se nomment: Spry validation … Ils permettent de rajouter des champs obligatoires avec des messages derreur qui apparaissent lors de lenvoi du formulaire si ces champs nont pas été remplis.

32 Champs de formulaire spry Chaque ajout dun élément spry crée un fichier CSS et un fichier Javascript (.js). Vous devez vous assurer que ces fichiers restent bien dans le répertoire de votre site Web pour que les éléments spry continuent de fonctionner. Ne pas modifier les fichiers Javascript. Vous pouvez toucher au CSS pour changer le format et la mise en page des messages derreur.

33 Atelier

34 Vous devez avoir un truc qui ressemble à ça :

35 Des questions??? Merci de votre attention! A la semaine prochaine! gregory.petit@umontreal.ca http://lrcm.com.umontreal.ca/greg/COM2580/