Groupe Eyrolles, 2006, ISBN : 2-212-11914-3

330

Dreamweaver 8

Les formulaires et les CSS

Dans cette section, nous aborderons les points suivants : le placement des lments ; la modication de laspect des entres du formulaire. Les formulaires dordinaire assez froids peuvent tre remodels avec des styles CSS. Lautre avantage des CSS est quil nest pas ncessaire de placer de structure tabulaire dans la page pour organiser les lments. Nous allons ici appliquer des styles au formulaire ralis ltape prcdente. Si ncessaire, vous trouverez ce formulaire sous le nom de formulaire_brut.htm, dans le dossier Final>08_formulaires>Site, ainsi que les chiers associs.

Les formulaires CHAPITRE 8

331

Placer les lments

Le placement des lments dun formulaire dans une page est assez simple compar lorganisation plus gnrale dune page. Il suft de distinguer des catgories dlments en fonction de leur disposition et de leur associer une classe spcique pour les manipuler. Par exemple, dans la page de formulaire, on aimerait voir toutes les entres proprement alignes et cales sur une mme colonne. De mme, il serait agrable de voir les labels toujours sur la gauche par rapport aux champs, mais cals droite par rapport ces entres. En rednissant les balises label et input, nous affecterions tous les lments du formulaire. Nous pourrions aussi dnir des styles avancs en appelant un type de balise et un identiant que lon appliquerait, par exemple, un jeu de champs. Mais, dans un jeu de champs, il peut exister une entre ou un texte ponctuel quon ne souhaite pas formater. Le plus simple reste donc de crer des classes que lon appliquera individuellement chaque lment voulu.
Placer avec les classes

Actuellement, la page de formulaire prsente des lments sans agencement visuel (gure 8-54).
Figure 8-54

Page de formulaire sans style

332

Dreamweaver 8

Dans la fentre des styles CSS, crez une nouvelle classe que vous nommerez .champs1 et enregistrez-la dans styles_formulaire.css. Dans Positionnement, spciez : Type = Relatif et Emplacement Gauche = 20 pixels. Validez. Le style apparat dans la fentre des styles CSS (gure 8-55).
Figure 8-55

Apparition de la classe .champs1

Cliquez sur le premier champ de saisie pour lactiver. Dans ses proprits, dans le menu Classe, appliquez le style champs1. Llment se dcale aussitt vers la droite de 20 pixels par rapport la position du contenu qui le prcde (gure 8-56).
Figure 8-56

Style appliqu une entre

Procdez de mme pour chaque entre de formulaire (gure 8-57).

Figure 8-57

Style appliqu toutes les entres

Les formulaires CHAPITRE 8

333

Vous remarquez que lattribut Relatif place les lments 20 pixels droite des labels. Plus ils sont tendus, plus lobjet est dcal. Ce dcalage va disparatre ds que nous aurons dni dans un style des dimensions xes pour lensemble des labels. Ils possderont alors tous la mme largeur. Dans la fentre des styles CSS, crez une nouvelle classe que vous nommerez .descriptions et spciez : dans la catgorie Bloc, Alignement du texte = Droite ; dans Positionnement, Type = Relatif, Largeur = 90 pixels et Hauteur = 20 pixels. Validez. Le style apparat dans la fentre des styles CSS (gure 8-58).
Figure 8-58

Apparition de la classe : description

Appliquez individuellement le style chaque texte plac avant chaque entre pour laquelle nous avons associ le style champs1. Tous les lments sont aligns (gure 8-59).
Figure 8-59

Style appliqu aux labels du premier jeu de champs

334

Dreamweaver 8

Placer avec le slecteur

Vous avez certainement remarqu que lensemble des lments du formulaire chassaient verticalement au-del de la surface quautorise la composition graphique et chevauchent la partie infrieure de la mise ne page. Chaque lment est en outre spar par un saut de paragraphe. Pour resserrer le tout, nous allons donc rednir les marges verticales Bas et Haut de tous les paragraphes, pour le conteneur #principalform. Ce qui permettra de ne pas affecter les paragraphes ventuellement insrs dans dautres pages lies la mme feuille de style. Crez un style avanc pour #principalform p et spciez : dans la catgorie Bote, dans Marge, Haut = 5 et Bas = 0. Validez. Le contenu est resserr et tient dsormais dans la page (gure 8-60).
Figure 8-60

Rednition des sauts de paragraphe

prsent, nous allons rednir lgrement le deuxime jeu de champs en mettant les questions en valeur et en les dcalant de faon les aligner par rapport aux entres du premier champ. Pour ce faire, nous allons rednir le deuxime jeu de champs en spciant simplement une marge qui permettra de chasser son contenu. Mais pour viter que le style naffecte aussi le premier jeu de champs, nous lassocierons un identiant que nous aurons au pralable appliqu au jeu de champs. Dans Dreamweaver 8, il nest pas possible dappliquer un nouvel identiant un jeu de champs dans le mode Cration. Comme nous lavons dj fait pour dautres conteneurs, nous allons procder en mode Code. Double-cliquez sur le texte Questions, situ au sommet du deuxime jeu de champs (gure 8-61).

Les formulaires CHAPITRE 8

Figure 8-61

335

Slection du texte

Passez en mode Fractionner. La slection est directement afche dans le code. Placez le point dinsertion la n du premier tag <ledset>, juste avant le crochet, pour y ajouter un identiant. Appuyez sur la touche Espace pour afcher lassistant la frappe. Puis, dans la liste droulante, slectionnez id="". Et inscrivez directement quest (gure 8-62).
Figure 8-62

Slection du texte

Revenez en mode Cration. Dans la barre dtat, vous relevez le nouvel identiant #quest associ au conteneur eldset (gure 8-63).
Figure 8-63

Barre dtat

Le jeu de champs est identi ; nous pouvons dnir le style. Dans la fentre des styles CSS, crez un nouveau style avanc pour eldset#quest et spciez : dans la catgorie Bote, Remplissage Gauche = 110 pixels, Marge Haut = 15 pixels. Validez. Le jeu de champs chasse son contenu droite de 110 pixels dans le prolongement des entres du premier jeu et se place verticalement plus en retrait de 15 pixels an darer un peu plus la composition (gure 8-64). Pour mettre les questions en gras, nous leur appliquerons simplement lattribut Gras disponible dans linspecteur des proprits, qui est conforme. Slectionnez la question tes-vous dj venus lle de La Runion ? puis, dans les proprits, cliquez sur B pour Bold (Gras). Procdez de mme avec les autres questions de ce jeu de champs. Supprimez le texte du pied de page.

336

Dreamweaver 8

Figure 8-64

Style eldset#quest

Enregistrez la page et la feuille de style. Et lancez un aperu (gure 8-65).

Figure 8-65

Aperu dans Opra

Les formulaires CHAPITRE 8

337

Modier laspect des entres

Laspect des textes saisis dans les entres des formulaires peut tre modi avec les CSS. Il suft de crer une classe pour chaque entre dont on veut modier laspect. Nous pourrions aussi rednir la balise <input>, mais ce faisant, nous affecterions tous les lments y compris les cases cocher et les boutons radio. Afchez la page dans le navigateur. En saisissant une entre, vous remarquez que le texte est bien noir et larrire-plan blanc. Les champs que nous avons positionns possdent dj une classe pour dnir leur emplacement dans la page. Nous allons donc la complter. Dans Dreamweaver, dans la fentre des styles CSS, modiez le style .champ1 comme suit : dans la catgorie Type, Police = Courier, Taille = 12 pixels, Couleur = #333399 ou #339 ; dans la catgorie Arrire-plan, Couleur darrire-plan = #eeffff ou #eff ; dans la catgorie Bloc, Espacement entre les lettres = 1 pixel, Retrait du texte = 2. Validez (gure 8-66).
Figure 8-66

Fentre des styles CSS

Enregistrez le document et la feuille de style. Lancez un aperu. Les champs de texte subissent le nouveau formatage en jouant la couleur darrire-plan, la chasse des caractres et le formatage du texte saisi par lutilisateur (gure 8-67).

338

Dreamweaver 8

Figure 8-67

Aperu dans Firefox

Contrle des formulaires

Dans cette section, nous aborderons les points suivants : la validation du formulaire ; la personnalisation de lavertissement. Le contrle dun formulaire consiste vrier la saisie effectue par lutilisateur lintrieur des entres du formulaire et la validit du contenu. La vrication peut tre incluse dans le script ct serveur charg de traiter les donnes ou localement en JavaScript. Un comportement JavaScript est disponible dans Dreamweaver pour le contrle : Valider le formulaire. Nous verrons tout dabord comment lappliquer sur les champs eux-mmes. Nous verrons galement comment lappliquer un champ dimage pour excuter le contrle lenvoi du formulaire plutt qu la saisie. Nous verrons galement comment personnaliser la rponse afche dans une fentre davertissement, initialement en anglais. Puis, nous poursuivrons avec la page de formulaire de ltape prcdente. Si ncessaire, vous la trouverez avec les lments associs, dans le dossier Final>08_formulaire>Site sous le nom de formulaire_css.htm.

Les formulaires CHAPITRE 8

339

Valider le formulaire
Dans la page de formulaire, on distingue diffrentes entres de type texte, chacune tant associe un identiant propre. Avec les comportements, il est possible de provoquer lafchage dun message davertissement si un lment de formulaire nest pas ou est mal renseign. Dans le formulaire, cliquez sur le premier champ de saisie affect au nom pour lactiver. Dans linspecteur des proprits, vous pouvez lire son identiant Nom. Dans le menu local Plus (+) de la fentre des comportements (Fentre>Comportements), et non dans Comportements de serveur, slectionnez le comportement Valider le formulaire (gure 8-68).

Figure 8-68

Appliquer Valider le formulaire

Une fentre de dnition du comportement apparat et recense tous les lments de type texte disponibles dans le formulaire.

340

Dreamweaver 8

Dans Champs nomms, cliquez sur texte Nom dans formulaire form1 dans calque principalform pour le slectionner. Dans la partie infrieure de la fentre, apparaissent diffrentes options de contrle. Vous pouvez rendre ou non obligatoire la saisie dun texte dans un champ spcique. Vous pouvez galement vrier le type de donne renseigne an dviter les enregistrements incorrects. Activez loption Obligatoire et conservez loption Tout pour le type de donne (gure 8-69).
Figure 8-69

Contrler le champ Nom

Validez. La fentre des comportements associe lvnement onBlur laction Valider le formulaire et indique que laction se produira lorsque lutilisateur activera un autre champ, ou plus exactement, lorsque celui-ci sera dsactiv (gure 8-70).
Figure 8-70

Fentre des comportements

An de signaler lutilisateur que ce champ est requis, ajoutez un astrisque la n du label. Enregistrez le document et lancez un aperu dans le navigateur. Si vous avez activ le champ Nom mais sans rien saisir et que vous activez ensuite nimporte quel autre champ, un message davertissement est afch vous demandant de renseigner le champ Nom (gure 8-71).

Les formulaires CHAPITRE 8

Figure 8-71

341

Aperu dans le navigateur

Nous allons maintenant appliquer le mme comportement en vriant quune adresse de messagerie a bien t renseigne dans le champ correspondant. Dans Dreamweaver, cliquez sur le champ Email pour le slectionner. Dans ses proprits, relevez son identiant Email. Dans la fentre des comportements, appliquez de mme Valider pour le formulaire. Dans la fentre de dialogue, slectionnez llment Email et appliquez les options Obligatoire et Adresse lectronique (gure 8-72).
Figure 8-72

Contrle du champ Email

Pour vrier quil sagit bien dune adresse de messagerie, le comportement va en ralit contrler si le texte contient le caractre arobase et au moins un point. Il ne vrie pas que ladresse est rellement valide. Validez. Le comportement est associ lvnement onBlur. De mme, inscrivez un astrisque la n du label pour signaler un champ requis. Enregistrez et lancez un aperu. En activant et en dsactivant chacun des lments, mais sans les remplir, un message davertissement signale labsence de contenu. Si vous renseignez tout de mme le champ de messagerie, mais sans arobase ni point, un autre message apparat en signalant quil ne sagit pas dune adresse de messagerie (gure 8-73).

342

Dreamweaver 8

Figure 8-73

Aperu dans le navigateur

Vous pouvez appliquer ainsi le mme comportement chaque entre requise pour lenvoi du formulaire en la slectionnant, puis, dans les comportements, en choisissant loption Valider le formulaire. Pensez simplement slectionner, dans la fentre de dialogue, le bon nom dlment lors de la dnition du comportement. Notez quun formulaire trop contraignant peut toutefois indisposer lutilisateur. Pour plus de confort dans la navigation, vous pouvez aussi appliquer le comportement directement sur le bouton Valider ou sur un champ dimage. Dans ce cas, lors de la dnition du comportement Valider le formulaire, vous dnissez directement, dans la mme fentre, lensemble des champs requis ou qui doivent tre contrls avant lenvoi. Les messages afchs que nous venons de placer sont en anglais. Il serait plus agrable de les afcher en franais. Pour modier le texte afch, nous devons intervenir dans le comportement mme lintrieur du mode Code.

Personnaliser lavertissement
Un comportement JavaScript est une srie dactions introduites dans len-tte du document. Ce comportement est associ un lien ou un objet dans la page par un identiant et un vnement. Dans le code on retrouve donc le comportement prsent dans la balise <script></script>. Passez en mode Code. Reprez le script et identiez, en bleu, les valeurs qui correspondent aux textes en anglais (gure 8-74). Pour traduire les textes, il suft de remplacer les textes en anglais par les vtres, sans sortir des apostrophes qui enveloppent chaque valeur. Attention toutefois ne pas rompre les scripts en introduisant une apostrophe dans le ux du texte : dans ce cas, employez le marqueur barre oblique inverse (caractre \ appel aussi antislash) avant lapostrophe en appuyant sur Alt Gr+8, an de neutraliser son effet dans le script et de prserver son afchage dans le navigateur. Traduisez (gure 8-75). Revenez en mode Cration. Enregistrez.

Les formulaires CHAPITRE 8

Figure 8-74

343

Code JavaScript

Figure 8-75

Traduction

Lancez un nouvel aperu. En excutant le script, le message apparat avec les nouvelles indications (gure 8-76).
Figure 8-76

Avertissement en franais

344

Dreamweaver 8

Le fait davoir personnalis le script va cependant empcher Dreamweaver de le reconnatre dans la fentre des comportements. Pour le modier, vous devez rditer un nouveau comportement et supprimer celui-l.

Personnalisation la saisie
Dans cette section, et pour terminer avec les formulaires, nous allons introduire un comportement qui va permettre de pr-remplir certains champs de saisie, au fur et mesure que lutilisateur va remplir le formulaire, pour linciter renseigner le plus dentres possible. Nous poursuivons avec la mme page de formulaire. Si ncessaire, vous la trouverez, avec les lments associs, dans le dossier Final>08_formulaire>Site sous le nom de formulaire_valider.htm. Dans notre cas de gure, lenregistrement du champ Adresse nest pas obligatoire. Nous navons dni aucun comportement qui oblige lutilisateur le faire. Nous pouvons cependant ly inciter : ds que lutilisateur entre dans le champ Email, requis pour lenvoi, la zone de saisie qui suit peut tre pr-remplie avec un texte du type : N/Rue = Code postal = Ville = Pour cela, nous appliquerons le comportement Texte dun champ texte au champ Email. Le champ Email dispose dj dun comportement de contrle la saisie. Il est possible dappliquer plusieurs comportements un mme lment. Il suft de lajouter. Dans le formulaire, activez le champ Email pour le slectionner. Dans la fentre des comportements, dans le menu local Plus (+), slectionnez le comportement Texte>Texte dun champ de texte (gure 8-77). Dans le menu Champ de texte, slectionnez le nom de la zone de texte Adresse. Puis, dans la zone de texte Nouveau texte (gure 8-78), inscrivez : N/Rue = Code postal = Ville = Validez. La fentre des comportements afche laction Texte dun champ texte associe lvnement onMouseOver, soit au passage de la souris sur le champ Prnom. Pour une meilleure interaction, nous allons choisir dactiver le comportement lorsque lutilisateur entre dans le champ, au moment o il commence saisir son adresse de messagerie. Cliquez sur lvnement onMouseOver pour activer une liste droulante.

Les formulaires CHAPITRE 8

345

Figure 8-77

Appliquer Texte>Texte du champ texte

Figure 8-78

Dnition du comportement

Dans la liste droulante, slectionnez lvnement onBlur (gure 8-79). Enregistrez le document. Lancez un aperu.

346

Dreamweaver 8

Figure 8-79

Modier lvnement JavaScript

En remplissant le champ Email, le champ suivant est automatiquement pr-rempli (gure 8-80).
Figure 8-80

Aperu dans le navigateur

Pour tendre encore plus la personnalisation du formulaire la saisie, vous pouvez reprendre le principe abord dans les lments de navigation en CSS, et afcher ou masquer des blocs de contenu entiers sur action de lutilisateur. Par exemple, vous pouvez isoler la deuxime question (Si oui, pour quelle raison ?) et ses rponses dans un conteneur span, associ, travers une balise de lien, la question prcdente et grer lafchage de ce bloc avec des feuilles de style. Vous pouvez aussi neutraliser laspect du lien pour ces lments avec les CSS en supprimant loption Soulign, en forant la couleur et, dans la catgorie Extensions, en forant lafchage du curseur en pointeur texte.