Download
1 / 35
360 likes | 461 Views
Les formulaires. 28 novembre 2012 Gré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 formulaires.
E N D
Les formulaires 28novembre 2012 Gré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 • Ils 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é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.
Paramètres du formulaire • Action : indique quelle va être l’action lorsque le soumettre va être soumis. Cela peut être : • L’ouverture d’une page de résultats • L’exécution d’un script • L’envoie d’un courriel • Method : type d’envoie des données • Post : données encodées dans le corps de la page • Get : 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>
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 • 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.
É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> <textareaname="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 Modifier l’ordre des éléments Ajouter un élément au groupe Définition des éléments Type de mise en page
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 interface que pour les groupes de cases à cocher. Même genre de mise en page que 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)
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.
Champs de formulaire spry • On 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 spry • Chaque 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.
