Formulaire qui génère un BBCode ou un code HTML

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Formulaire qui génère un BBCode ou un code HTML

Message par Lunay le Lun 9 Juin 2014 - 19:01

Bonjour, et merci de prendre le temps de me lire Smile
J'avais déjà ouvert un sujet ici concernant la mise en place d'un formulaire : http://forum.forumactif.com/t360420-formulaire-de-presentation. Cette demande concernait donc un formulaire de présentation que les membres de mon forum rempliraient et qui se posterait automatiquement dans le forum des présentations.

Maintenant, ce que je souhaiterais faire, c'est simplement créer un formulaire qui, lorsque l'on appuierait sur le bouton "générer le code", un code en BBcode ou en HTML s'afficherait dans une case en dessous que mes membres n'auraient plus qu'à copier/coller dans un nouveau sujet.

Pour ce qui est de créer le formulaire, c'est à dire mettre des champs de texte à remplir ou des cases à cocher par exemple, je sais le faire. Ce que je ne comprends pas en revanche, c'est comment indiquer au formulaire que dans le code à générer, il faut par exemple que le résultat de tel champs de texte s'affiche d'une certaine manière?

Admettons par exemple que je veuille créer un formulaire de présentation avec comme informations :

Spoiler:
Nom de ton personnage :
Phrase d'accroche :
Lien vers une image représentant ton personnage (1) :
Lien vers une image représentant ton personnage (2) :

(bloc PERSONNAGE)

Lien vers une image représentant ton personnage (3) :
Age :
Métier :
Situation familiale :
Donnée 4 :
Donnée 5 :
Donnée 6 :

(bloc JOUEUR)

Age :
Localisation :
Pourquoi ce forum?
Donnée 4 :
Donnée 5 :
Donnée 6 :

Histoire :

Caractère :

Comment faire pour que le code généré à copier/coller soit (ou l'équivalent BBcode) :

Code:
<span style="display: block; position: relative; width: 300px; margin-left: auto; margin-right: auto; margin-bottom: -60px; height: 40px; background-color: #d3c3a9; border-top: 4px solid #ac6140; border-left: 1px solid #ac6140; border-right: 1px solid #ac6140; border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -webkit-border-radius: 30px; -htm-border-radius: 30px; font-family: trebuchet; padding: 5px; font-size: 24px; color: #74331a; text-align: center; font-weight: bold;">NOM - Prénom</span>

<div style="width: 95%; margin: auto; background-color: #d3c3a9; border-top: 4px solid #ac6140; border-bottom: 4px solid #ac6140; border-left: 1px dashed #ac6140; border-right: 1px dashed #ac6140; border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -webkit-border-radius: 20px; -htm-border-radius: 20px;">

<span style="display: block; text-align: right; padding-right: 20px; font-family: courier new; font-size: 16px; letter-spacing: 2px; width: 500px; float: right; color: #ac6140; text-shadow: 1px 1px 0px #ffffff;"><span style="font-size: 40px;">"</span>Mets ici une phrase, un dicton ou une maxime qui correspond à ton personnage.
<span style="font-size: 40px;">"</span></span>

<span style="display: block; width: 100%; border-bottom: 4px solid #ac6140; margin-top: 100px; margin-bottom: -100px;"></span>
<center><table><tr><td><span style="display: block; width: 100px; height: 100px; background: url(http://49.img.v4.skyrock.net/49e/liseuse-en-book/pics/photo_58522173_avatar_31.jpg) center center; border: 5px solid #ac6140; -moz-border-radius: 100px; border-radius: 100px; -o-border-radius: 100px; -htm-border-radius: 100px; -webkit-border-radius: 100px; margin: 10px;"></span></td>
<td><span style="display: block; width: 100px; height: 100px; background: url(http://h2.mabellephoto.com/time-is-runnig-out-scenes-de-vie-8d6041C100.jpg) center center; border: 5px solid #ac6140; -moz-border-radius: 100px; border-radius: 100px; -o-border-radius: 100px; -htm-border-radius: 100px; -webkit-border-radius: 100px; margin: 10px;"></span></td></tr></table></center>

<div style="float: left; width: 250px; height: 250px; overflow: auto; background-color: #ece2d2; border: 1px solid #ca876a; box-shadow: 0px 0px 4px #ac6140; -moz-box-shadow: 0px 0px 4px #ac6140; color: #96714e; font-size: 11px; font-family: trebuchet; letter-spacing: 2px; padding: 4px; margin: 10px;">
<span style="display: block; height: 20px; font-size: 18px; text-align: center; letter-spacing: 4px; font-weight: bold; font-variant: small-caps;">Personnage</span>
<span style="display: block; float: left; width: 100px; height: 100px; background: url(http://49.img.v4.skyrock.net/49e/liseuse-en-book/pics/photo_58522173_avatar_31.jpg) center center; border: 5px solid #ac6140; margin: 6px;"></span>
<b>|- Age</b> : [AGE]
<b>|- Métier</b> : [METIER]
<b>|- Situation familiale</b> : [SITUATION]
<b>|- Donnée 4</b> : [DONNEE]
<b>|- Donnée 5</b> : [DONNEE]
<b>|- Donnée 6</b> : [DONNEE]
</div><div style="float: right; width: 250px; height: 250px; overflow: auto; background-color: #ece2d2; border: 1px solid #ca876a; box-shadow: 0px 0px 4px #ac6140; -moz-box-shadow: 0px 0px 4px #ac6140; color: #96714e; font-size: 11px; font-family: trebuchet; letter-spacing: 2px; padding: 4px; margin: 10px;">
<span style="display: block; height: 20px; font-size: 18px; text-align: center; letter-spacing: 4px; font-weight: bold; font-variant: small-caps;">Joueur</span>
<b>|- Age</b> : [AGE]
<b>|- Localisation</b> : [LOCALISATION]
<b>|- Pourquoi ce forum ?</b> : [POURQUOI]
<b>|- Donnée 4</b> : [DONNEE]
<b>|- Donnée 5</b> : [DONNEE]
<b>|- Donnée 6</b> : [DONNEE]
</div>
<div style="clear: both;">

<span style="font-family: trebuchet; padding: 5px; font-size: 32px; color: #74331a; text-align: center; font-weight: bold; letter-spacing: 4px; padding-left: 20px;"><i>"My Past"</i> - Histoire</span>
<span style="display: block; width: 100%; border-bottom: 4px solid #ac6140;"></span>
<span style="display: block; color: #96714e; font-size: 11px; font-family: trebuchet; letter-spacing: 2px; margin: 10px; text-align: justify;">histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire</span>

<span style="font-family: trebuchet; padding: 5px; font-size: 32px; color: #74331a; text-align: center; font-weight: bold; letter-spacing: 4px; padding-left: 20px;"><i>"Calm or Lunatic ?"</i> - Caractère</span>
<span style="display: block; width: 100%; border-bottom: 4px solid #ac6140;"></span>
<span style="display: block; color: #96714e; font-size: 11px; font-family: trebuchet; letter-spacing: 2px; margin: 10px; text-align: justify;">caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère - caractère</span>

<a style="display: block; text-align: right; color: #a48567; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; padding-right: 20px;" href="http://www.never-utopia.com">© Never-Utopia</a>
</div> </div>

Et donne donc ce résultat une fois copié/collé dans un nouveau sujet : http://chicatestt.forumactif.org/t7-test-fiche-de-predentation#16 ?

Merci d'avance pour votre patience et vos éventuelles réponses Smile


Dernière édition par Lunay le Lun 9 Juin 2014 - 19:58, édité 1 fois

Lunay
***

Féminin
Messages : 105
Inscrit(e) le : 16/11/2011

http://pottermore-betatest.harrypotterrpg.fr/
Lunay a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire qui génère un BBCode ou un code HTML

Message par Lunay le Lun 9 Juin 2014 - 19:58

Alors je suis désolée mais en cherchant bien j'ai fini par trouvé mon bonheur !
Pour ceux que ça intéressent, il y a ici un tuto merveilleusement bien fait et vraiment complet que je vais m'empreser d'étudier : http://www.school-of-pub.net/t8156-creer-un-formulaire-qui-genere-un-code .
Je vais donc mettre ce message en résolu, merci quand-même Smile

Lunay
***

Féminin
Messages : 105
Inscrit(e) le : 16/11/2011

http://pottermore-betatest.harrypotterrpg.fr/
Lunay a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum