Génération du site web de l'ULB - format xml

index

page précédente

page suivante

imprimer

envoyer

marquer

<input type="date">: zone de saisie pour une date

Une zone de saisie de date se définit à l'aide d'un élément <input type="date">.

Exemple de zone de saisie de date

Code de cet exemple

<input type="date">
   <nom>date</nom>
   <libellé>date de naissance</libellé>
</input>

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

L'élément <input type="date"> 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 date
<p>	permet d'ajouter un commentaire en dessous de la zone de saisie de date
<obligatoire/>	impose à l'utilisateur d'entrer une valeur dans la zone de saisie de date

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 date.

L'élément <input type="date"> 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 date.

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 "Date de naissance:" sera affiché en regard de trois zones servant à saisir une date (jour, mois, année). Un paramètre date sera envoyé à l'application distante lors de l'envoi du formulaire, avec comme valeur la date sous le format JJ/MM/AAAA.

Exemple

			
<input type="date">
   <nom type="string">date</nom>
   <libellé>date de naissance</libellé>
   <valeur>1/5/1997</valeur>
</input>

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

Exemple

<input type="date">
   <nom>date</nom>
   <libellé>date de naissance</libellé>
   <p>Entrez votre date de naissance, telle qu'elle apparaît sur votre carte d'identité.</p>
</input>

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

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

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

Par défaut, si vous ne mentionnez pas cet attribut, ce sont trois 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 sous la forme d'une seule chaîne de caractères au format "JJ/MM/AAAA".

Exemple

<input type="date">
   <nom type="string">date</nom>
   <libellé>date de naissance</libellé>
   <valeur>15/08/2015</valeur>
</input>

Attribut type="3-valeurs"

Dans cet exemple, trois paramètres seront envoyés à l'application distante, basé sur le nom date. On accolera à ce nom les suffixes "_Date", "_Month" et "_Year" pour nommer ces paramètres.

Dans l'exemple, les trois paramètres seront date_Date (qui vaudra "15"), date_Month (qui vaudra "08") et date_Year (qui vaudra "2015")

Exemple

<input type="date">
   <nom type="3-valeurs">date</nom>
   <libellé>date de naissance</libellé>
   <valeur>15/08/2015</valeur>
</input>

Sans attribut

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

Exemple

<input>
   <nom type="3-valeurs">date</nom>
   <libellé>date de naissance</libellé>
   <valeur>15/08/2015</valeur>
</input>

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.

Exemple

<input type="date">
   <nom>date-demande</nom>
   <libellé>Date souhaitée</libellé>
   <valeur>01/10/2015</valeur>
</input>

Modification de l'apparence de la zone de saisie de date

Style de la zone de saisie de date

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="date" style="colorBar4" bords="arrondis">
   <nom>date</nom>
   <libellé>date de naissance</libellé>
</input>

<input type="date" style="voile" bords="carrés">
   <nom>date</nom>
   <libellé>date de naissance</libellé>
</input>

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

Rendre la zone obligatoire

Par défaut, la date n'est pas obligatoire. Les trois zones - jour, mois, années - peuvent rester vides (par contre, si des caractères sont entrés dans une zone, les trois zones doivent être remplies et former une date valide).

Un élément <obligatoire/> (ou <mandatory/> qui est un synonyme) permet de rendre la zone de saisie de date obligatoire (une date valable doit avoir été entré dans la zone avant de pouvoir soumettre le formulaire).

Exemple

<input type="date">
   <nom>date</nom>
   <libellé>date de naissance</libellé>
   <obligatoire/>
</input>

sommaire

index

page précédente

page suivante

English	中文	Page d'accueil	Contacts	Plan des campus
					pages annuaire