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

<input type="richtext">: zone de saisie de texte au format enrichi sur plusieurs lignes

Un champ texte au format enrichi (mettre en gras, en italique, insérer des liens...) couvrant plusieurs lignes se définit à l'aide d'un élément <input type="richtext">. Il fonctionne comme un <input type="textarea"/>, sauf qu'un menu avec une série de boutons apparaîtra afin de vous permettre d'enrichir le texte à éditer.

Lors de l'envoi du formulaire, le contenu de ce champs sera envoyé sous la forme d'une chaîne de caractères contenant des balises html (<b>, <i>, <a href="...">...) destinées à enrichir ce contenu avec la mise en page souhaitée.


Exemple de zone de saisie de texte "richtext"

Formulez votre demande:

Code de cet exemple
<input type="richtext">
   <nom>demande</nom>
   <libellé>formulez votre demande</libellé>
</input>

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

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

<p>

permet d'ajouter un commentaire en dessous de la zone de saisie de texte

<taille>

permet d'indiquer la taille que devra prendre la zone de saisie de texte

<obligatoire/>

impose à l'utilisateur d'entrer une valeur dans la zone de saisie de texte

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


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


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>

<size>

synonyme de <taille>

<mandatory/>

synonyme de <obligatoire/>


Dans cet exemple, le titre "Formulez votre demande:" sera affiché en regard d'une zone de saisie de texte sur plusieurs lignes (4 par défaut). Un paramètre demande sera envoyé à l'application distante lors de l'envoi du formulaire.

Exemple
<input type="richtext">
   <nom>demande</nom>
   <libellé>formulez votre demande</libellé>
</input>

Formulez votre demande:


Dans cet autre exemple, une valeur par défaut est introduite dans la zone de saisie de texte et un commentaire est ajouté.

Exemple
<input type="richtext">
   <nom>comment</nom>   
   <libellé>Modifier votre texte</libellé>
   <valeur>Université multiculturelle, avec plus d'un tiers ...</valeur>
   <p>Vos modifications ne seront pas directement visibles. Elles nécessitent l'accord du responsable de ce site.</p>
</input>

Modifier votre texte:

Vos modifications ne seront pas directement visibles. Elles nécessitent l'accord du responsable de ce site.


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="richtext">
   <nom>infoerasmus</nom>
   <libellé>demande d'information</libellé>
   <valeur>Je souhaite recevoir plus de documentation sur 
           les &lt;b>échanges erasmus&lt;/b> par retour de courrier.</valeur>
</input>

Demande d'information:


Cette valeur peut contenir des balises HTML destinées à mettre en forme le texte. Toutefois, ces balises doivent être encodées afin qu'elles ne soient pas interprétées par Sitemanager. Dans la pratique, il suffit de remplacer le caractère < de chaque balise (ouvrante et fermante) par &lt; comme le montre l'exemple ci-dessus.


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

Style de la zone de saisie de texte

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
<formulaire>
   <input type="richtext" style="colorBar4" bords="arrondis">
      <nom>comment</nom>
      <libellé>Votre commentaire</libellé>
      <p>Entrez vos remarques et/ou suggestions pour améliorer le service.</p>
   </input>
</formulaire>

Votre commentaire:

Entrez vos remarques et/ou suggestions pour améliorer le service.

Taille de la zone de saisie de texte

La taille de la zone est paramétrable à l'aide d'un élément <taille> (ou <size>) qui donne le nombre de lignes et de colonnes qui seront visibles (séparés par une virgule). Attention que ces nombre sont parfois approximatifs et peuvent différer du nombre réel de lignes et de colonnes utilisé par votre navigateur (ce nombre réel peut d'ailleurs être différent d'un navigateur à l'autre).

Exemple
<input type="richtext">
   <nom>comment</nom>
   <libellé>Votre commentaire</libellé>
   <taille>2,40</taille>
</input>

<input type="richtext">
   <nom>comment</nom>
   <libellé>Votre commentaire</libellé>
   <taille>4,64</taille>
</input>

<input type="richtext">
   <nom>comment</nom>
   <libellé>Votre commentaire</libellé>
   <taille>8,100</taille>
</input>

Votre commentaire:

Votre commentaire:

Votre commentaire:

Rendre la zone obligatoire

Un élément <obligatoire/> (ou <mandatory/> qui est un synonyme) permet de rendre la zone de saisie de texte obligatoire (au moins un caractère doit avoit été entré dans la zone avant de pouvoir soumettre le formulaire).

Exemple
<input type="richtext">
   <nom>comment</nom>
   <libellé>Entrez votre commentaire</libellé>
   <obligatoire/>
</input>

Entrez votre commentaire:

ULB - entreprise écodynamique