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!

gregory.petit@umontreal.cahttp://lrcm.com.umontreal.ca/greg/COM2580/