Embed Size (px)
Citation preview
Les formulaires
28 novembre 2012Grégory Petit
http://lrcm.com.umontreal.ca/greg/COM2580/
La semaine dernière
Les critères ergonomiques
Design des pages Web
Et donc on fait quoi aujourd’hui?
Les formulaires
Les champs de formulaire
Les formulaires
Les formulairesIls permettent de collecter des informations
entrées par l’usager 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.
Récupération des donnéesPour 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.
Dreamweaver <form>
Action : indique quelle va être l’action lorsque le soumettre va être soumis. Cela peut être :L’ouverture d’une page de résultatsL’exécution d’un scriptL’envoie d’un courriel
Method : type d’envoie des donnéesPost : données encodées dans le corps de la pageGet : données encodées dans l’URL de la page
<form action="result.html" method="post" enctype="application/x-www-form-urlencoded" id="formulaire">…</form>
Paramètres du formulaire
Dreamweaver <form>
Dreamweaver <form>
La fenêtre précédente n’apparaît que si vous faites l’ajout depuis le code. Si vous faites l’ajout depuis le mode "vue" vous pouvez changez les paramètres du formulaire avec la boite d’outils des propriétés d’un élément HTML.
Champs de formulaire
Champs de formulaireCe 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.
Champs de formulaire
Étiquette <label>Il est rare qu’on l’ajoute toute seul car
lorsqu’on 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.
Champs de texte <input type:"text">
<label for="nom">Nom</label><input type="text" name="nom2" id="nom" />
Comportement du label
Champs mot de passe <input type: "password">
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 d’outils 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.
Boite de texte <textarea>Même boite de dialogue que pour le champs de
texte.Mais boite d’outils 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.
<label for="adresse">Rue</label><textarea name="adresse" cols="45" rows="3" class="champs" id="adresse"></textarea>
Cases à cocher <input type: "checkbox">
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.
Groupe de cases à cocher
Type de mise en page
Définition des éléments
Ajouter un élément au groupe
Modifier l’ordre des éléments
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 <input> est inclus dans l’élément <label>
Boutons radio <input type: "radio">
Pour une seule, même comportement que pour le champs de texte. Sauf qu’il n’y 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 d’un même groupe.
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.
Champs de sélection <select>Encore une fois, Dreamweaver fait apparaître
la même fenêtre que pour le champs de texte pour l’ajout d’un 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)
Ajouter des éléments au <select>
Menu déroulant
Liste de sélection
Choisir le type "list" ne suffit pas dans Dreamweaver, il faut aussi cocher la sélection multiple.
Groupe de champs <fieldset>L’élément <fieldset> permet de regrouper
différents champs ensemble.C’est un peu comme une <div> mais
spécifique aux formulaires.
Groupe de champs <fieldset>Comme pour une <div>, vous pouvez sélectionner directement dans Dreamweaver des éléments et ajouter votre <fieldset> autour.
Bouton de soumission <input type: "submit">
Encore une fois, Dreamweaver fait apparaître la même fenêtre que pour le champs de texte pour l’ajout du bouton de soumission du formulaire.
Attention! Ne pas mettre de label au bouton de soumission mais changer la valeur de l’attribut "value" pour indiquer le texte du bouton.
Bouton de soumission <input type: "submit">
Champs de formulaire spryOn peut aussi ajouter d’autres champs du
même type qu’on 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 d’erreur qui apparaissent lors de l’envoi du formulaire si ces champs n’ont pas été remplis.
Champs de formulaire spryChaque ajout d’un é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 d’erreur.
Atelier
Vous devez avoir un truc qui ressemble à ça :
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]://lrcm.com.umontreal.ca/greg/COM2580/
