[PDF] Formation d’introduction aux bases du langage XHTML | Cours informatique

(1)

Communiquer au moyen de formulaire

COMMUNIQUER AU MOYEN DE FORMULAIRE

1. FORMULAIRES 1.1. FONCTIONNEMENT 1.2. TYPES D'INTERACTION 2. LE MODULE FORMS 2.1. ATTRIBUT ACTION 2.2. ATTRIBUT METHOD

2.3. CONTRÔLES DANS UN FORMULAIRE 2.3.1. Élément input

2.3.2. Élément textarea 2.3.3. Élément select

2.4. ÉLÉMENT LABEL

3. PRÉSENTATION DES ÉLÉMENTS D'UN FORMULAIRE

3.1. AVEC L'ÉLÉMENT <BR />

3.2. AVEC L'ÉLÉMENT <TABLE> 3.3. AVEC L'ÉLÉMENT <DL>

4. LES PROPRIÉTÉS DE POSITIONNEMENT EN CSS2

4.1. POSITIONNEMENT FLOTTANT

4.2. ÉLÉMENTS DIV ET SPAN

4.3. POSITIONNEMENT RELATIF

4.4. POSITIONNEMENT ABSOLU

4.5. POSITIONNEMENT STATIQUE

Les formulaires permettre au client de communiquer de l'information au serveur. C'est d'ailleurs cette particularité qui distingue le Web d'autres média comme la télévision ou le journal. Cette interactivité se crée autour des 2 pôles que sont le client et le serveur. Pour le moment nous allons nous concentrer sur le coté client de l'interaction c'est-à-dire comment concevoir un

document Web qui permette une interaction. Dans un autre cours nous verrons le coté serveur de cette interaction c'est-à-dire comment le serveur peut traiter l'information que le client lui envoie.

1. Formulaires

Élément d'un document HTML permettant l'envoie d'informations du client vers le serveur.

Suppose qu'il existe sur le serveur, un programme capable de traiter ces données.

(2)

1.1. Fonctionnement

1. Le navigateur affiche un document

XHTML contenant un formulaire. Le formulaire contient différents éléments permettant à l'usager de fournir de l'information. Le formulaire contient également un bouton pour envoyer l'information sur le serveur.

2. Quand l'usager appui sur le bouton d'envoie, le navigateur envoie les données au serveur.

3. Le serveur traite l'information. Souvent, le résultat de ce traitement est un

document XHTML (ne serait-ce qu'une confirmation que l'information a été bien reçue). Ce document est envoyé au navigateur.

4. Le navigateur affiche le document envoyé par le serveur.

1.2. Types d'interaction

Les différents éléments du formulaire permettent à l'usager de fournir de l'information. Ce sont des contrôles (commandes):

o Zone de texte: texte entré au clavier sur une ou plusieurs lignes

o Menu déroulant: un ou plusieurs éléments choisis parmi des éléments proposés o Cases à cocher

o Boutons radio o Boutons De plus il est possible

o D'associer des étiquettes pour les différents éléments o De regrouper les éléments

Un contrôle a habituellement o un nom (attribut name)

o une valeur initiale (attribut value)

o une valeur courante: au début la valeur initiale du contrôle puis peut être modifiée par l'interaction de l'usager ou par un script.

Pour envoyer les informations au serveur, le navigateur crée le couple (nom, valeur courante) pour chaque contrôle.

(3)

2. Le Module Forms

Elements Attributes Minimal Content Model

form Common [p.32] , accept (ContentTypes [p.25] ), accept-charset (Charsets [p.25] ),

action* (URI [p.28] ), method ("get"* | "post"), enctype (ContentType [p.25] )

(Heading | List |Block - form | fieldset)+

fieldset Common [p.32] (PCDATA |legend | Flow)*

legend Common [p.32] , accesskey (Character [p.25] ) (PCDATA |Inline)*

Le module définit 2 ensembles de contenu:

Form: form | fieldset

Formctrl: input | select | textarea | label | button

L'ensemble de contenu Form s'ajoute à l'ensemble de contenu Block du module Text L'ensemble de contenu Formctrl s'ajoute à l'ensemble de contenu Inline du module Text D'après ce module abstrait, on comprend que:

Les formulaires ne peuvent pas être imbriqués.

Un formulaire ne peut pas avoir comme descendant direct des éléments de niveau texte.

2.1. Attribut action

Correspond à une ressource http qui est le programme sur un serveur qui va traiter l'information.

o Une adresse e-mail n'est pas une ressource http. Même si ça fonctionne avec certains navigateurs ça ne correspond pas à la spécification XHTML

Ce programme peut être écrit en Perl, ASP. PHP, JSP,…On ne va pas s'intéresser à cet aspect pour le moment. Si vous voulez tester vos formulaires vous pouvez utiliser l'utilitaire WebMail ou un des CGI traiteGet.pl ou traitePost.pl qui sont utilisés dans la section suivante.

2.2. Attribut method

Cet attribut correspond à la méthode que le navigateur va utiliser pour envoyer les données de formulaire au serveur.

La valeur get

o Le navigateur envoie les données au serveur en les ajoutant à l'URL du CGI o Nombre limité de caractères ( de 256 à 1024 selon le serveur)

(4)

La valeur post

o Le navigateur envoie les données au serveur en les envoyant au serveur sous la forme d'un message

<form

action="http://linux04.uqtr.ca/~helene/cgi-bin/traitePost.pl" ...method="post">

En général le programme qui traite les données s'attend à les recevoir sous une forme précise. Celui qui conçoit le formulaire doit connaître relativement bien le programme qui va les traiter.

Voir http://linux04.uqtr.ca/~helene/Formulaire/exForm1.xhtml Voir http://linux04.uqtr.ca/~helene/Formulaire/exForm2.xhtml

2.3. Contrôles dans un formulaire

Les contrôles de formulaires sont des éléments de niveau texte.

2.3.1. Élément input

input Common [p.32] , accept (ContentTypes [p.25] ), accesskey (Character [p.25] ), alt (Text [p.28] ), checked ("checked"),disabled ("disabled"),

value (CDATA [p.24] )

EMPTY

Permet de définir plusieurs types de contrôles: Attribut name obligatoire pour la plupart des types L'attribut value donne la valeur initiale du contrôle

Types Text

o Valeur par défaut

o Pour entrer une ligne de texte

o L'attribut size donne la taille initiale (en nombre de caractères) du contrôle. o La valeur du contrôle peut avoir plus de caractères que la valeur de l'attribut size o L'attribut maxlength spécifie le nombre maximum de caractères que l'usager peut

entrer

o L'attribut value permet de donner une valeur initiale au contrôle <p>

Prénom : <input type="text" name="prenom" size="20" /><br /> Nom : <input type="text" name="nom" size="20" /><br /> </p>

(5)

Password

o Pour entrer une ligne de texte qui sera affichée par un symbole particulier (souvent des astérisques)

Button

o Pour définir un bouton

o Un script associé au bouton est exécuté quand le bouton est cliqué

Checkbox

o Case à cocher

o Seulement les cases qui sont effectivement cochées seront envoyées au serveur Connaissance de:

<input type="checkbox" name="connaissance1" checked="checked" value="html" />HTML <input type="checkbox" name="connaissance2" value="css" />CSS

<input type="checkbox" name="connaissance3" value="JS" />Javascript <input type="checkbox" name="connaissance4" value="php" />php <input type="checkbox" name="connaissance5" value="xml" />XML

Radio

o Bouton radio

o Une seule valeur d'un groupe de boutons radio peut être effective

o Tous les boutons d'un même groupe ont la même valeur pour l'attribut name. Le serveur retourne le nom et la valeur du bouton radio sélectionné.

o L'attribut checked permet de présélectionner une option. <input type="radio" name="sex" value="Masculin" /> Masculin

<input type="radio" name="sex" checked ="checked" value="Feminin" /> Féminin<br />

Accessibilité des formulaires

Vous remarquerez que dans le cas d'un champ texte, l'information sur le contenu du champ est placée devant le contrôle tandis que dans le cas de case à cocher et de bouton radio, cette information est placée après le contrôle.

Ça peut faire une grande différence pour un lecteur handicapée qui veut utiliser le Web. Pour en savoir plus sur l'accessibilité du Web: http://w3qc.org/docs/accessibilite.html

Voir http://linux04.uqtr.ca/~helene/Formulaire/exForm3.xhtml

Submit

o Bouton pour envoyer les données du formulaire o L'attribut value détermine l'étiquette du bouton

<input type ="submit" value="envoyer" /> Reset

o Bouton pour réinitialiser les valeurs de contrôles

(6)

2.3.2. Élément textarea

textarea Common [p.32] , accesskey (Character [p.25] ), cols* (Number [p.27] ), disabled ("disabled"), name

(CDATA [p.24] ), readonly ("readonly"), rows* (Number [p.27] ), tabindex (Number [p.27] )

PCDATA

Pour entrer du texte pouvant s'étendre sur plusieurs lignes Le contenu de l'élément devient la valeur initiale de l'élément

<p><textarea rows="3" cols="50" name="adresse">Adresse</textarea></p>

L'attribut readonly est utilisé par exemple dans les formulaires où on présente à l'usager les conditions d'une entente, d'une licence ou autre. Après le textearea se trouve habituellement un bouton sur lequel l'usager clique pour confirmer qu'il a lu les conditions et qu'il les accepte.

2.3.3. Élément select

select Common [p.32] , disabled ("disabled"), multiple ("multiple"), name (CDATA [p.24] ), size (Number [p.27] ), tabindex (Number[p.27] )

(optgroup |option)+

option Common [p.32] , disabled ("disabled"), label (Text [p.28] ),selected ("selected"), value (CDATA [p.24] )

PCDATA optgroup Common [p.32] , disabled ("disabled"), label* (Text

[p.28] )

option+

Pour introduire un menu déroulant

Contient une balise <option> pour chaque item du menu

L'attribut size de l'élément select détermine la longueur du menu (nombre de lignes) qui sera présenté à l'usager. Par défaut il y a une seule ligne.

<p>

Age : <select name="age">

L'attribut value de l'élément option représente la valeur qui sera envoyé au serveur. Dans le cas où cet attribut n'apparaît pas c'est le contenu de l'élément option qui est envoyé.

(7)

<p>

Age : <select name="age">

</p>

Voir http://linux04.uqtr.ca/~helene/Formulaire/exForm4.xhtml

2.4. Élément label

label Common [p.32] , accesskey (Character [p.25] ), for (IDREF [p.24])

(PCDATA |Inline - label)*

Pour associer une étiquette à un contrôle. Utilisé surtout pour les navigateurs non visuel

L'association se fait par l'attribut for de l'élément label

o La valeur de l'attribut for est l'identificateur du contrôle associé (attribut id) Facilite la sélection d'éléments dans un formulaire parce qu'en sélectionnant l'étiquette on

sélectionne le contrôle

<label for="prenom">Prénom : </label>

L'association entre l'étiquette et le contrôle peut se faire de façon implicite si le contrôle fait partie du contenu de l'élément label:

<label >Prénom : <input type="text" name="prenom" size="20" /></label><br /> Voir http://linux04.uqtr.ca/~helene/Formulaire/exForm5.xhtml

Exercice: Modifiez le formulaire de exForm5.xhtml de sorte que l'association entre le contrôle et son étiquette soir explicite.

3. Présentation des éléments d'un formulaire

3.1. Avec l'élément <br />

L'élément <br /> offre une solution simple au problème de l'alignement des contrôles.

<p>

<label>Prénom : <br />

(8)

</p>

Voir http://linux04.uqtr.ca/~helene/Formulaire/exForm1ChangLigne.xhtml

Exercice: Dans le formulaire de exForm1ChangLigne.xhtml, vous pouvez voir que l'espacement vertical entre les différents champs est plus grand que l'espacement entre un contrôle et son étiquette. Modifiez le formulaire pour que l'espacement entre les différents champs corresponde à l'espacement entre un contrôle et son étiquette.

3.2. Avec l'élément <table>

On peut aussi utiliser une table pour aligner les étiquettes et les contrôles:

<table>

<tr><td><label for="prenom">Prénom :</label> </td><td><input type="text" name="prenom" id="prenom" size="20" /></td></tr>

On voit qu'en utilisant une table, étant donné que l'étiquette et le contrôle comme tel sont dans 2 éléments distincts (2 td ), il est nécessaire de faire l'association entre l'étiquette et le contrôle de façon explicite par l'attribut for.

Voir http://linux04.uqtr.ca/~helene/Formulaire/exForm1Table.xhtml

3.3. Avec l'élément <dl>

<dl>

<dt><label for="prenom">Prénom :</label> </dt>

<dd><select id="age" name="age"> <option>- de 18 ans</option> <option>18 à 40 ans</option> <option>41 à 60 ans</option> <option>+ de 60 ans</option> </select></dd> </dl> Voir http://linux04.uqtr.ca/~helene/Formulaire/exForm1DefListe.xhtml

(9)

4. Les propriétés de positionnement en CSS2

Plusieurs propriétés de style viennent modifier le positionnement d'un élément dans une page.

Ces propriétés sont particulièrement utiles pour faire de la mise en page sans utiliser les tableaux (les tableaux étant réservés à des données "tabulaires").

Par défaut, le navigateur positionne les éléments de gauche à droite, de haut en bas. C'est ce qu'on appelle le "flux normal" (normal flow).

En CSS2, il existe des propriétés de style pour faire en sorte que des éléments "sortent" du flux normal (out of normal flow). Un élément qui est hors du flux normal est ignoré par le positionnement des éléments qui sont dans le flux normal.

Voir http://linux04.uqtr.ca/~helene/Style/exHorsFlux.xhtml

4.1. Positionnement flottant

Propriété float crée un élément de niveau bloc, le sort du flux normal et le positionne à l'extrémité.

o none: valeur par défaut. L'élément est placé dans le flux normal des éléments

o left: l'élément est traité comme un élément de niveau bloc et sera placé à la gauche. Les éléments suivants seront placés à droite.

o right: l'élément est traité comme un élément de niveau bloc et sera placé à la droite. Les éléments suivants seront placés à gauche.

Voir http://linux04.uqtr.ca/~helene/Style/exPropFloat.xhtml

Un élément flottant doit avoir une largeur explicite (propriété CSS width) ou implicite (une image a une largeur implicite ou explicite).

La propriété clear permet à un élément d'être placé dans le flux normal sous les éléments flottants.

On peut utiliser cette propriété pour aligner des contrôles dans un formulaire: il suffit d'utiliser une déclaration de style pour que les éléments label soient flottants à gauche et d'une largeur qui correspond à l'étiquette la plus grande:

On peut utiliser le positionnement flottant pour faire une mise en page en 2 colonnes. C'est une mise en page classique qu'on retrouve souvent sur le Web: une partie gauche contenant un menu et une partie droite beaucoup plus large qui affiche le contenu comme tel.

#menu {float: left; width: 10%;} </style>

... <body> ...

(10)

<p id="menu"> Item1<br /> Item2 <br /> Item3 </p> Voir http://linux04.uqtr.ca/~helene/Style/ex2ColonnesFloat.xhtml

Exercice: Si vous affichez le document ex2ColonnesFloat.xhtml avec Firefox, vous pouvez voir que la colonne de gauche est légèrement plus basse que la colonne de droite. Corrigez la situation en utilisant les déclarations de style.

Chaque colonne est en fait une boîte qui pourrait être positionnée au moyen de déclarations CSS.

Étant donné qu'habituellement une colonne ne correspond pas comme tel à un élément XHTML, il est nécessaire d'introduire un élément générique qui recevra les déclarations de

positionnement. En XHTML il y a 2 éléments génériques: le div pour un élément de niveau bloc et le span pour un élément de niveau texte.

4.2. Éléments div et span

Balise div:

o Regroupe des éléments de niveau bloc pour en faire un bloc englobant o Habituellement on regroupe des éléments pour leur appliquer un certain style <!ELEMENT div %Flow;>

<!ATTLIST div %attrs; ..>

Balise span: défini un élément de niveau texte (inline)

<!ELEMENT span %Inline;>  <!ATTLIST span

%attrs; >

Les balises div et span n'ont pas de sens précis, ce sont des balises génériques.

Habituellement c'est par un attribut d'identificateur ou de classe que la balise va prendre un sens. Par exemple pour le positionnement flottant d'une boîte contenant plusieurs éléments html: <div id="menu"> <h1>Bienvenue!</h1> <ul> <li>Item1</li> <li>Item2 </li> <li>Item3</li> <li>Item4</li> <li>Item5</li> <li>Item6</li> </ul> </div> Voir http://linux04.uqtr.ca/~helene/Style/ex2ColonnesAvecDiv.xhtml

(11)

4.3. Positionnement relatif

Déclaration CSS: position:relative

L'élément occupe une position spécifiée relativement à la position qu'il occuperait s'il

était dans le flux normal des éléments.

Il est considéré tout de même dans le flux normal des éléments pour le positionnement des autres éléments.

.positionIndicee {position:relative; left: 0; top:2px; } .decalageImportant{position:relative; left: 0; top:40px;} .decalageDroite{position:relative; left: 20px; top:0;} </style>

Il y a possibilité de superposition

Voir http://linux04.uqtr.ca/~helene/Style/exPosRel.xhtml

On pourrait faire une disposition en 2 colonnes avec le positionnement relatif mais ça suppose qu'on fixe la hauteur d'une colonne pour remonter la division suivante d'une valeur équivalente:

.menu {width: 25%; height:100px;}

.contenu{color:blue; position:relative; top:-100px ;left:25%} </style>

Voir http://linux04.uqtr.ca/~helene/Style/ex2ColonnesRel.xhtml

4.4. Positionnement absolu

Permet de positionner un élément en spécifiant sa position par rapport à un point de référence Possibilité de positionner au pixel près un élément (une boîte) HTML

Déclaration CSS position:absolute

L'élément occupe une position spécifiée par rapport au coin supérieur gauche de son parent. Propriétés top, left, right et bottom sont utilisées pour spécifier la position de l'élément

o L'élément ne fait plus partie du flux normal.

o Il y a possibilité de superposition avec d'autres éléments qui seraient dans le flux normal ou d'autres éléments positionnés.

Le positionnement absolu permet de positionner précisément les contrôles d'un formulaire.

.controle{position:relative;}

label{position:absolute; left:0;} /* ne fait pas partie du flux*/ .champ{margin-left:4em} </style> ... <body> ... <div class="controle">

(12)

<label for="prenom">Prénom :</label>

Ici la classe controle avec positionnement relatif sert de boîte de référence pour le

positionnement de boîtes descendantes. À ce moment, les propriétés top et left ont la valeur 0 (valeurs par défaut).

Voir http://linux04.uqtr.ca/~helene/Formulaire/exForm1PosAbs.xhtml Le positionnement absolu présente une variante fixée:

o Déclaration CSS: position:fixed

 L'élément occupe une position fixée par rapport au coin supérieur gauche de la

fenêtre du document.

 Permet de simuler l'effet d'un cadre

 Voir http://www.uqtr.ca/~helene/INF1001

4.5. Positionnement statique

Ça correspond au positionnement dans le flux normal Déclaration: position:static

o Positionnement par défaut

o Si un élément a une position différente de static alors la propriété float a

nécessairement la valeur none. Autrement dit, seuls les éléments dont le positionnement est static peuvent être "flottant".

Les propriétés top, left, right et bottom sont ignorées.

Le lien suivant présente plusieurs exemples des différentes possibilités de positionnement