Générateur de code

par Mahora Mer 27 Sep 2017 - 22:51

Bonjour,
Alors voilà, j'ai essayé de faire un formulaire qui me génère directement le code. J'utilise souvent le même code et du coup j'aimerais faire un générateur où je pourrais directement remplir les champs que je dois modifier. Je ne sais pas si j'ai bien réussi à me faire comprendre. Donc j'ai essayé de faire de ce formulaire pour générer mon code, mais il ne marche pas.
Dans mon formulaire apparemment on doit remplir tous les champs pour que je puisse le générer. Je voulais savoir aussi au passage, si c'est possible de faire en sorte que je puisse le générer, même si je ne remplis pas toutes les lignes.
Je vous montre donc mes codes. J'espère que quelqu'un pourra m'aider. Je vous remercie d'avance.

Mon code html de base (le résultat). J'ai mis en majuscule les champs que je souhaite pouvoir remplir dans le formulaire.

Code:: <center><table><tr><td><div class="boutonshojo"><div class="titrebshojo"><a href='LIEN01'>TEXTE01</a></div></div></td><td><div class="boutonshojo"><div class="titrebshojo"><a href='LIEN02'>TEXTE02</a></div></div></td><td><div class="boutonshojo"><div class="titrebshojo"><a href='LIEN03'>TEXTE03</a></div></div></td><td><div class="boutonshojo"><div class="titrebshojo"><a href='LIEN04'>TEXTE04</a></div></div></td><td><div class="boutonshojo"><div class="titrebshojo"><a href='LIEN05'>TEXTE05</a></div></div></td></tr></table></center>

Mon code pour le formulaire pour générer mon code html (qui ne fonctionne pas)

Code:: <html> <head> <title>Formulaire pour tome</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> /* Le css sera ici */ .boutonshojo { width: 150px; height: 50px; background-color: #BF5996; border:4px outset #BF5996; border-radius:10px; -moz-border-radius:10px; vertical-align: middle; } .titrebshojo { text-align:center; color: white; font-family: 'Lobster Two', cursive; font-size: 22px; font-weight: bold; padding: 15px 15px 15px 15px; } .titrebshojo a:link { text-decoration:none; color: white; } .titrebshojo a:hover { color: #F6B9EA; } .titrebshojo a:visited { text-decoration:none; color: white; } </style> <script type="text/javascript">  </script> </head> <body><div id="formulaire"> <h1>Générer un code</h1> <h2>Veuillez remplir le formulaire suivant :</h2> <form action="#" method="post" id="rempli"> <label>lien1</label> :<input type="text" name="lien1" size="30" maxlength="200"/> <label>texte1</label> :<input type="text" name="texte1" size="30" maxlength="200"/> </br> <label>lien2</label> :<input type="text" name="lien2" size="30" maxlength="200"/> <label>texte2</label> :<input type="text" name="texte2" size="30" maxlength="200"/></br> <label>lien3</label> :<input type="text" name="lien3" size="30" maxlength="200"/> <label>texte3</label> :<input type="text" name="texte3" size="30" maxlength="200"/></br> <label>lien4</label> :<input type="text" name="lien4" size="30" maxlength="200"/> <label>texte4</label> :<input type="text" name="texte4" size="30" maxlength="200"/></br> <label>lien5</label> :<input type="text" name="lien5" size="30" maxlength="200"/> <label>texte5</label> :<input type="text" name="texte5" size="30" maxlength="200"/></br></br> <input type="button" onClick="verif(this.form)" value="Générer le code" /> </form> <h2>Aperçu du rendu :</h2> <div id="apercu"> </div></br> <form> <label>Voici le code à copier/coller</label> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code_genere').select();"> <textarea cols="60" rows="10" id="code_genere" readonly></textarea> </form> </div> </body> </html>

Voilà, donc si quelqu'un peut m'aider ou me proposer un autre code qui ferait ce que je souhaite ça serait gentil. Merci d'avance.

par Sen Hime Jeu 28 Sep 2017 - 20:34

Bonjour,

C'est le code qui rassemble les différents contenus de champs et les morceaux de HTML qui semble poser problème. Deux choses auxquelles faire attention :
- Toujours bien mettre des symboles + entre chaque portion de texte et variables (ex: "<div>" + variable + "</div>")
- Faire attention à ne pas couper les textes encadrés de guillemets par des guillemets au milieu du texte. Par exemple "<div class="maClass"></div>" va poser problème : le code croit que le premier " rencontré ferme le texte et ne sait pas quoi faire de la suite. Du coup il vaut mieux utiliser : "<div class='maClass'></div>" ou "<div class=\"maClass\"></div>" au choix Smile

Ça devrait mieux fonctionner avec cette version du code corrigée :

Code:: <html> <head> <title>Formulaire pour tome</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> /* Le css sera ici */ .boutonshojo { width: 150px; height: 50px; background-color: #BF5996; border:4px outset #BF5996; border-radius:10px; -moz-border-radius:10px; vertical-align: middle; } .titrebshojo { text-align:center; color: white; font-family: 'Lobster Two', cursive; font-size: 22px; font-weight: bold; padding: 15px 15px 15px 15px; } .titrebshojo a:link { text-decoration:none; color: white; } .titrebshojo a:hover { color: #F6B9EA; } .titrebshojo a:visited { text-decoration:none; color: white; } </style> <script type="text/javascript">  </script> </head> <body><div id="formulaire"> <h1>Générer un code</h1> <h2>Veuillez remplir le formulaire suivant :</h2> <form action="#" method="post" id="rempli"> <label>lien1</label> :<input type="text" name="lien1" size="30" maxlength="200"/> <label>texte1</label> :<input type="text" name="texte1" size="30" maxlength="200"/> </br> <label>lien2</label> :<input type="text" name="lien2" size="30" maxlength="200"/> <label>texte2</label> :<input type="text" name="texte2" size="30" maxlength="200"/></br> <label>lien3</label> :<input type="text" name="lien3" size="30" maxlength="200"/> <label>texte3</label> :<input type="text" name="texte3" size="30" maxlength="200"/></br> <label>lien4</label> :<input type="text" name="lien4" size="30" maxlength="200"/> <label>texte4</label> :<input type="text" name="texte4" size="30" maxlength="200"/></br> <label>lien5</label> :<input type="text" name="lien5" size="30" maxlength="200"/> <label>texte5</label> :<input type="text" name="texte5" size="30" maxlength="200"/></br></br> <input type="button" onClick="verif(this.form)" value="Générer le code" /> </form> <h2>Aperçu du rendu :</h2> <div id="apercu"> </div></br> <form> <label>Voici le code à copier/coller</label> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code_genere').select();"> <textarea cols="60" rows="10" id="code_genere" readonly></textarea> </form> </div> </body> </html>

Et pour le fait de fonctionner même sans tout remplir c'est déjà le cas, simplement ce qui est non rempli donne un texte vide Smile

par Mahora Ven 29 Sep 2017 - 0:18

Merci beaucoup cela fonctionne, par contre par exemple si je remplis que les deux premières lignes, cela me met quand même les 3 autres rectangles. Ce n'est pas possible de faire en sorte que si je mets rien, cela ne prendre pas en compte les lignes de codes pour que mes rectangles n'apparaissent pas, enfin qu'il n'ait pas le code pour ses lignes là ? Si ce n'est pas possible tant pis, mais je demande au cas où^^

par Sen Hime Ven 29 Sep 2017 - 16:44

C'est possible oui, voici une nouvelle version du code qui tire avantage des tableaux et boucles pour générer un contenu qui contient automatiquement autant de rectangles que de couples liens/textes remplis dans le formulaire Smile

Code:: <html> <head> <title>Formulaire pour tome</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> /* Le css sera ici */ .boutonshojo { width: 150px; height: 50px; background-color: #BF5996; border:4px outset #BF5996; border-radius:10px; -moz-border-radius:10px; vertical-align: middle; } .titrebshojo { text-align:center; color: white; font-family: 'Lobster Two', cursive; font-size: 22px; font-weight: bold; padding: 15px 15px 15px 15px; } .titrebshojo a:link { text-decoration:none; color: white; } .titrebshojo a:hover { color: #F6B9EA; } .titrebshojo a:visited { text-decoration:none; color: white; } </style> <script type="text/javascript">  </script> </head> <body><div id="formulaire"> <h1>Générer un code</h1> <h2>Veuillez remplir le formulaire suivant :</h2> <form action="#" method="post" id="rempli"> <label>lien1</label> :<input type="text" name="lien[]" size="30" maxlength="200"/> <label>texte1</label> :<input type="text" name="texte[]" size="30" maxlength="200"/> </br> <label>lien2</label> :<input type="text" name="lien[]" size="30" maxlength="200"/> <label>texte2</label> :<input type="text" name="texte[]" size="30" maxlength="200"/></br> <label>lien3</label> :<input type="text" name="lien[]" size="30" maxlength="200"/> <label>texte3</label> :<input type="text" name="texte[]" size="30" maxlength="200"/></br> <label>lien4</label> :<input type="text" name="lien[]" size="30" maxlength="200"/> <label>texte4</label> :<input type="text" name="texte[]" size="30" maxlength="200"/></br> <label>lien5</label> :<input type="text" name="lien[]" size="30" maxlength="200"/> <label>texte5</label> :<input type="text" name="texte[]" size="30" maxlength="200"/></br></br> <input type="button" onClick="verif(this.form)" value="Générer le code" /> </form> <h2>Aperçu du rendu :</h2> <div id="apercu"> </div></br> <form> <label>Voici le code à copier/coller</label> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code_genere').select();"> <textarea cols="60" rows="10" id="code_genere" readonly></textarea> </form> </div> </body> </html>

par Mahora Ven 29 Sep 2017 - 17:05

Ah super tout à l'air de fonctionner, merci beaucoup.

Générateur de code

Générateur de code

Re: Générateur de code

Re: Générateur de code

Re: Générateur de code

Re: Générateur de code