Mise en page (1/2) Comment transmettre et réafficher du texte formaté

Vous avez sans doute dû tous remarquer qu'une fois un champ d'un formulaire enregistré dans une base de données et ressorti dans une autre page, la mise en forme n'est pas gardée, même les sauts de lignes sont passés à la trappe. Alors comment faire ? Plusieurs solutions, la 1ere consiste à écrire directement dans le champ les diverses balises HTML, plutôt compliqué si on ne les connait pas toutes, la 2nde solution quant à elle fait le même travail mais en plus simple et plus compréhensible. C'est cette dernière que nous allons étudier.

---

Construction de la page - Traitement - Code ASP - Code PHP - Démo

---

Télécharger l'article au format PDF

Construction du formulaire

Une page simple contenant le champs texte à remplir et quelques listes déroulantes qui vont styliser la page :

- 1er formulaire, celui qui va contenir nos balises personnalisées, et qui va être traité par la page ASP

<form name"contenu" method="post" action="post.asp">   <textarea name="contenu" cols="65" rows="10"></textarea>         <input type="submit" name="Submit" value="  Apercu  "> </form>

- les listes déroulantes (je n'ai mis qu'une seule ligne pour l'exemple)

<form name="forme">    <select name="police" size="1" onchange="javascript:Forme(document.forme.police.value)">       <option value="27">---POLICE---</option>       <option value="3" >Verdana</option>    </select>    <select name="taille" size="1" onchange="javascript:Forme(document.forme.taille.value)">       <option value="27">---TAILLE---</option>       <option value="7">Taille 8</option>    </select>    <select name="style" size="1" onchange="javascript:Forme(document.forme.style.value)">      <option value="27">---STYLE---</option>      <option value="0">Gras</option>    </select>    <select name="align" size="1" onchange="javascript:Forme(document.forme.align.value)">      <option value="28">---AJUSTEMENT---</option>      <option value="24">A gauche</option>    </select>    <select name="color" size="1" onchange="javascript:Forme(document.forme.color.value)">      <option value="27">---COULEUR---</option>      <option value="13">Blanc</option>    </select> </form>

Remarquez la petite ligne javascript, qu'est ce qu'elle fait ? Elle va renvoyer à la fonction "Forme" la valeur contenue dans le "", qui va nous permettre d'insérer la bonne balise HTML définie par cette valeur.

Voyons maintenant la fonction javascript "Forme" :

<script language="JavaScript">    var balise = new Array('gras','souligne','italic',       'verdana','arial','geneva','helvetica',       'taille8','taille10','taille12','taille14','taille16','taille20',       'blanc','gris','grisclair','bleu','jaune','rouge','vert','bleuflashi','fushia','noir',       'dpuce','agauche','adroite','aucentre','stop','astop');    function Forme(h) {        document.all.contenu.value = document.all.contenu.value + "[" + balise[h] + "]";    } </script>

On construit un tableau qui va contenir toutes nos balises persos, la 1ère étant 0. Cette fonction va écrire dans notre champ "Contenu", donc le champ de type 'textarea', la balise sous la forme [balise]. Par exemple si je renvoie une valeur de 12 à partir de mes listes déroulantes, la fonction va m'écrire [taille20]. Tout le texte contenu entre la balise [taille20] et la balise [stop] (eh oui il faut fermer ses balises en HTML!) verra sa taille augmenter. Il y a 2 balises différentes de fermeture [stop] pour fermer le texte et [astop] pour fermer l'alignement.