Génération du site web de l'ULB - format xml
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

<input type="période">: zone de saisie pour une période comprise entre deux dates

Une zone de saisie de période entre deux dates (date de début et date de fin) se définit à l'aide d'un élément <input type="période">.


Exemple de zone de saisie de période

Durée de votre séjour:

du / / au / /
Code de cet exemple
<input type="période">
   <nom>dates</nom>
   <libellé>durée de votre séjour</libellé>
</input>

Contenu de l'élément <input type="période">

L'élément <input type="période"> peut posséder les sous-éléments suivants (ils ne sont pas obligatoires):

<nom>

donne le nom du paramètre à envoyer avec les données du formulaire ou à utiliser dans le reste de la page

<libellé>

donne le libellé à afficher dans le formulaire. Il sera visible par l'utilisateur, mais ne sera pas envoyé avec les données du formulaire

<valeur>

donne la valeur par défaut à afficher dans la zone de saisie de période

<p>

permet d'ajouter un commentaire en dessous de la zone de saisie de période

<obligatoire/>

impose à l'utilisateur d'entrer une valeur dans la zone de saisie de période

Ces sous-éléments peuvent être complétés par tous les éléments communs aux blocs, une question dans un formulaire étant considérée comme un bloc. Ceux-ci permettent de mettre en page la zone de saisie de période.


L'élément <input type="période"> peut posséder les attributs suivants (ils ne sont pas obligatoires):

envoyer="..."

précise s'il faut envoyer ou non un paramètre à l'application distante

Ces attributs peuvent être complétés par tous les attributs communs aux blocs, une question dans un formulaire étant considérée comme un bloc. Ceux-ci permettent de mettre en page la zone de saisie de période.


Il est également possible d'utiliser les synonymes suivants:

<name>

synonyme de <nom>

<label>

synonyme de <libellé>

<title>

synonyme de <libellé>

<value>

synonyme de <valeur>

<mandatory/>

synonyme de <obligatoire/>

Dans cet exemple, le titre "Vous serez présent:" sera affiché en regard de six zones servant à saisir deux dates (jour, mois, année), une date de début et une date de fin. Un paramètre dates sera envoyé à l'application distante lors de l'envoi du formulaire, avec comme valeur les deux dates sous le format JJ/MM/AAAA-JJ/MM/AAAA.

Exemple
			
<input type="période">
   <nom type="string">dates</nom>
   <libellé>vous serez présent</libellé>
   <valeur>1/8/2015-31/8/2015</valeur>
</input>

Vous serez présent:

du / / au / /

Un ou plusieurs commentaires peuvent également être ajoutés à l'aide d'éléments <p>.

Exemple
<input type="période">
   <nom>dates</nom>
   <libellé>vous serez présent</libellé>
   <p>Si vous ne connaissez pas encore les dates de votre venue, vous pouvez laisser ces champs vides.</p>
</input>

Vous serez présent:

du / / au / /

Si vous ne connaissez pas encore les dates de votre venue, vous pouvez laisser ces champs vides.

Paramètre(s) envoyé(s) à l'application

La période peut, au choix, être envoyée à l'application sous la forme d'une seule chaîne de caractères (format "JJ/MM/AAAA-JJ/MM/AAAA"), de deux chaînes de caractères (format "JJ/MM/AAAA" et "JJ/MM/AAAA") ou de six chaînes de caractères distinctes ("JJ", "MM", "AAAA", "JJ", "MM" et "AAAA").

On règle cela en ajoutant un attribut type="string", type="2-strings" ou type="6-valeurs" (ou "6-values") à l'élément <nom> donnant le nom du paramètre à envoyer.

Par défaut, si vous ne mentionnez pas cet attribut, ce sont six valeurs distinctes qui seront envoyées.


Attribut type="string"

Dans cet exemple, un seul paramètre date sera envoyé à l'application distante. Celui-ci contiendra la date de début et de fin sous la forme d'une seule chaîne de caractères au format "JJ/MM/AAAA-JJ/MM/AAAA".

Exemple
<input type="période">
   <nom type="string">dates</nom>
   <libellé>vous serez présent</libellé>
   <valeur>1/8/2015-31/8/2015</valeur>
</input>

Vous serez présent:

du / / au / /

Attribut type="2-strings"

Dans cet exemple, deux paramètres seront envoyés à l'application distante, basés sur le nom date. On accolera à ce nom les suffixes "_From" et "_To" pour nommer ces paramètres. Ces paramètres contiendront les dates de début et de fin sous la forme d'une seule chaîne de caractères au format "JJ/MM/AAAA".

Dans l'exemple, les deux paramètres seront dates_From (qui contiendra la valeur "01/08/2015") et dates_To (qui contiendra la valeur "31/08/2015").

Exemple
<input type="période">
   <nom type="2-strings">dates</nom>
   <libellé>vous serez présent</libellé>
   <valeur>1/8/2015-31/8/2015</valeur>
</input>

Vous serez présent:

du / / au / /

Attribut type="6-valeurs"

Dans cet exemple, six paramètres seront envoyés à l'application distante, basé sur le nom date. On accolera à ce nom les suffixes "_fromDate", "_fromMonth", "_fromYear", "_toDate", "_toMonth" et "_toYear" pour nommer ces paramètres.

Dans l'exemple, les six paramètres seront date_fromDate (qui vaudra "01"), date_fromMonth (qui vaudra "08"), date_fromYear (qui vaudra "2015"), date_toDate (qui vaudra "31"), date_toMonth (qui vaudra "08") et date_toYear (qui vaudra "2015").

Exemple
<input type="période">
   <nom type="6-valeurs">dates</nom>
   <libellé>vous serez présent</libellé>
   <valeur>1/8/2015-31/8/2015</valeur>
</input>

Vous serez présent:

du / / au / /

Sans attribut

Si vous ne précisez pas d'attribut type, ce sera six paramètres qui seront envoyés à l'application distante.

Exemple
<input type="période">
   <nom>dates</nom>
   <libellé>vous serez présent</libellé>
   <valeur>1/8/2015-31/8/2015</valeur>
</input>

Vous serez présent:

du / / au / /

Valeur par défaut à afficher dans la zone

La valeur par défaut qui s'affichera lorsque la page est chargée dans le navigateur se définit à l'aide d'un élément <valeur> (ou <value>). Si celui-ci n'est pas présent, la zone sera vide.

Le format à utiliser est "JJ/MM/AAAA-JJ/MM/AAAA".
Exemple
<input type="période">
   <nom>dates-demande</nom>
   <libellé>Dates de votre demande de congé</libellé>
   <valeur>01/7/2015-31/07/2015</valeur>
</input>

Dates de votre demande de congé:

du / / au / /

Modification de l'apparence de la zone de saisie de période

Style de la zone de saisie de période

Une zone de saisie est considérée comme un bloc. Tous les attributs (style, bords et ses variantes) définis pour les blocs peuvent être utilisés (l'élément <titre>, ici, n'a pas lieu d'être).

Si vous n'utilisez pas d'attribut style, la zone sera affiché sans mise en page particulière (identique à style="transparent"). Dans le cas contraire c'est un bloc dont la mise en page est définie par cet attribut style qui sera affiché.
Exemple
<input type="période" style="colorBar4" bords="arrondis">
   <nom>dates-demande</nom>
   <libellé>Dates de votre demande de congé</libellé>
</input>

<input type="période" style="voile" bords="carrés">
   <nom>dates-demande</nom>
   <libellé>Dates de votre demande de congé</libellé>
</input>

Dates de votre demande de congé:

du / / au / /

Dates de votre demande de congé:

du / / au / /

Contrôle de la valeur entrée dans la zone de saisie de période

Rendre la zone obligatoire

Par défaut, les dates ne sont pas obligatoires. Les six zones - jour, mois, années - peuvent rester vides (par contre, si des caractères sont entrés dans n'importe quelle zone, les six zones doivent être remplies et former deux dates valides).

Un élément <obligatoire/> (ou <mandatory/> qui est un synonyme) permet de rendre la zone de saisie de période obligatoire (deux dates valables doivent avoir été entrées dans la zone avant de pouvoir soumettre le formulaire).
Exemple
<input type="période">
   <nom>conges</nom>
   <libellé>dates de vos demande de congé</libellé>
   <obligatoire/>
</input>

Dates de vos demande de congé:

du / / au / /
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivante
ULB - entreprise écodynamique