Création formulaire : Tableau à remplir et à envoyer dans un sujet

par Kaehlyth Jeu 1 Aoû 2024 - 23:33

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonsoir,

je m'excuse pour le précédent post dont je n'ai pas donné suite concernant un bug non résolu de la boite d'édition, n'ayant plus les notifications sur ma boite mail, c'est devenu un enfer... (je crois que ça part dans les spam, désolé !).

Je reviens vers vous pour autre chose sans manquer d'ouvrir un sujet pour mon soucis précédent !

Pour créer un système qui évite aux joueurs de remplir un code HTML voir BBCODE totalement affreux et de faire la prévisualisation pour l'afficher... et tenter de le remplir sans y perdre ses yeux.

J'ai donc tenté de créer mon code dans une page HTML, avec son petit CSS et son petit code.
C'est encore un embryon parce qu'il faudrait pleins de choses. Mais déjà si j'arrive à ce que le formulaire s'envoie c'est un miracle ! Embarassed

Création formulaire : Tableau à remplir et à envoyer dans un sujet Captur54

(Votre pseudonyme fait office de titre du sujet...)

Seulement je pêche sur la partie "javascript" de récupération des données, de création du sujet et de l'envoi sur le bon forum ...
J'ai lu pas mal de sujets à cet effet mais tous était avec des imputs ou des textarea. Là par contre, il s'agit d'un tableau... Alors je suis perdue.

Quelqu'un saurait m'aiguiller sur comment faire ?
Ou du moins sur la méthode la plus à même de pouvoir faire une page "présentable" de ce tableau que les joueurs doivent remplir, et qui se créera sous un format feuille de personnage ?

Merci à vous.

-> Code ci-dessous <-

Code:: <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Formulaire de Soumission</title> <style> /* Style pour le formulaire */ body { font-family: Arial, sans-serif; margin: 20px; padding: 0; background-color: #f4f4f4; } .container { display: flex; gap: 20px; flex-wrap: wrap; } .aspect { background-color: #fff; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; width: 220px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .aspect-header { background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; } .aspect-content { display: flex; flex-direction: column; } .sub-category { display: flex; align-items: center; margin-bottom: 10px; } .category-name { font-weight: bold; width: 120px; } input[type="text"] { width: 60px; margin-left: 10px; border: 1px solid #ED7D31; padding: 5px; box-sizing: border-box; text-align: center; font-size: 1em; background-color: #fff; } input[type="text"]:focus { border-color: #ED7D31; outline: none; } .large-box { background-color: #fff; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; width: calc(100% - 40px); /* Full width minus padding */ box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-top: 20px; } .large-box-header { background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; } .large-box-content { display: flex; flex-direction: column; gap: 10px; } .large-box-content textarea { width: 100%; height: 100px; border: 1px solid #ED7D31; padding: 10px; box-sizing: border-box; font-size: 1em; border-radius: 5px; resize: vertical; } .form { margin: 20px auto; width: 90%; max-width: 1200px; } </style> </head> <body> <div class="form"> <form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)"> <input type="hidden" name="lt" value="0" /> <input type="hidden" name="mode" value="newtopic" /> <input type="hidden" name="topictype" value="0" /> <input type="hidden" name="message" value="" /> <input type="hidden" name="f" value="18" /> <input type="hidden" name="subject" id="titre" value="" /> <div class="container"> <div class="aspect"> <div class="aspect-header">Aspect psychologique et moral</div> <div class="aspect-content"> <div class="sub-category"> <div class="category-name">Caractère</div> <input type="text" name="psychologique_caractere" value="0" /> </div> <div class="sub-category"> <div class="category-name">Émotions</div> <input type="text" name="psychologique_emotions" value="0" /> </div> <div class="sub-category"> <div class="category-name">Valeurs</div> <input type="text" name="psychologique_valeurs" value="0" /> </div> </div> </div> <div class="aspect"> <div class="aspect-header">Aspect physique</div> <div class="aspect-content"> <div class="sub-category"> <div class="category-name">Puissance</div> <input type="text" name="physique_puissance" value="0" /> </div> <div class="sub-category"> <div class="category-name">Adresse</div> <input type="text" name="physique_adresse" value="0" /> </div> <div class="sub-category"> <div class="category-name">Sens</div> <input type="text" name="physique_sens" value="0" /> </div> </div> </div> <div class="aspect"> <div class="aspect-header">Aspect identitaire</div> <div class="aspect-content"> <div class="sub-category"> <div class="category-name">Statut familial</div> <input type="text" name="identitaire_statut_familial" value="0" /> </div> <div class="sub-category"> <div class="category-name">Revenus</div> <input type="text" name="identitaire_revenus" value="0" /> </div> <div class="sub-category"> <div class="category-name">Possessions</div> <input type="text" name="identitaire_possessions" value="0" /> </div> </div> </div> <div class="aspect"> <div class="aspect-header">Aspect social et culturel</div> <div class="aspect-content"> <div class="sub-category"> <div class="category-name">Statut social</div> <input type="text" name="social_statut_social" value="0" /> </div> <div class="sub-category"> <div class="category-name">Éducation</div> <input type="text" name="social_education" value="0" /> </div> <div class="sub-category"> <div class="category-name">Ethnie</div> <input type="text" name="social_ethnie" value="0" /> </div> </div> </div> </div> <div class="large-box"> <div class="large-box-header">Spécialités autres & secret(s) :</div> <div class="large-box-content"> <textarea name="specialites_autres_secrets" placeholder="Entrez ici vos spécialités autres et secrets..."></textarea> </div> </div> <div class="large-box"> <div class="large-box-header">Commentaires</div> <div class="large-box-content"> <textarea name="commentaires" placeholder="Entrez ici vos commentaires..."></textarea> </div> </div> <center> <br /><span style="color:red;" id="errormsg"></span><br /> <label><span style="color:brown;">Le titre du sujet sera créé automatiquement !</span></label><br /><br /> <input type="submit" name="post" value="Créer !" /><br /> </center> </form> </div> <script type="text/javascript"> function envoiMessage(form) { // Refuser l'envoi si le formulaire n'est pas entièrement rempli if (!form.pseudo.value) { document.getElementById("errormsg").innerHTML = "Vous avez oublié de choisir un pseudo pour le titre du sujet"; return false; } if (!form.age.value) { document.getElementById("errormsg").innerHTML = "Vous avez oublié d'entrer votre âge"; return false; } if (!form.message.value) { document.getElementById("errormsg").innerHTML = "Vous devez entrer un message."; return false; } // Création du titre du sujet avec les valeurs des champs du formulaire form.subject.value = "Sujet : " + form.pseudo.value + " - Âge : " + form.age.value; // Génération du message formaté let txt_message = "[center][table style='color:white;background-color:#080114;text-shadow: 0px 0px 12px #BABABA;margin:3px;padding:10px;']" + "[tr][td][font=Times New Roman][color=LightGray]Formulaire de Tableau[/color][/font]" + "[center][size=29][color=darkred][font=Times New Roman]Détails[/font][/color][/size][/center][/td]" + "[td][/td][/tr][tr][td colspan='2'][img(800px,25px)]http://img836.imageshack.us/img836/7083/entete10.png[/img][/td]" + "[/tr][tr][td][color=orange]Aspect Psychologique et Moral[/color][/td][/tr][tr]" + "[td style='border:1px solid black;-moz-box-shadow: 1px 1px 12px #BABABA;-webkit-box-shadow: 1px 1px 12px #BABABA; box-shadow: 1px 1px 12px #BABABA;']" + "[b]Caractère :[/b] " + form.psychologique_caractere.value + "\n\n" + "[b][color=orange]Émotions : [/color][/b] " + form.psychologique_emotions.value + "\n\n" + "[b]Valeurs :[/b] " + form.psychologique_valeurs.value + "\n\n" + "[/td][/tr][tr][td][color=orange]Aspect Physique[/color][/td][/tr][tr]" + "[td style='border:1px solid black;-moz-box-shadow: 1px 1px 12px #BABABA;-webkit-box-shadow: 1px 1px 12px #BABABA; box-shadow: 1px 1px 12px #BABABA;']" + "[b]Puissance :[/b] " + form.physique_puissance.value + "\n\n" + "[b][color=orange]Adresse : [/color][/b] " + form.physique_adresse.value + "\n\n" + "[b]Sens :[/b] " + form.physique_sens.value + "\n\n" + "[/td][/tr][tr][td][color=orange]Aspect Identitaire[/color][/td][/tr][tr]" + "[td style='border:1px solid black;-moz-box-shadow: 1px 1px 12px #BABABA;-webkit-box-shadow: 1px 1px 12px #BABABA; box-shadow: 1px 1px 12px #BABABA;']" + "[b]Statut Familial :[/b] " + form.identitaire_statut_familial.value + "\n\n" + "[b][color=orange]Revenus : [/color][/b] " + form.identitaire_revenus.value + "\n\n" + "[b]Possessions :[/b] " + form.identitaire_possessions.value + "\n\n" + "[/td][/tr][tr][td][color=orange]Aspect Social et Culturel[/color][/td][/tr][tr]" + "[td style='border:1px solid black;-moz-box-shadow: 1px 1px 12px #BABABA;-webkit-box-shadow: 1px 1px 12px #BABABA; box-shadow: 1px 1px 12px #BABABA;']" + "[b]Statut Social :[/b] " + form.social_statut_social.value + "\n\n" + "[b][color=orange]Éducation : [/color][/b] " + form.social_education.value + "\n\n" + "[b]Ethnie :[/b] " + form.social_ethnie.value + "\n\n" + "[/td][/tr][tr][td][color=orange]Commentaires[/color][/td][/tr][tr]" + "[td style='border:1px solid black;-moz-box-shadow: 1px 1px 12px #BABABA;-webkit-box-shadow: 1px 1px 12px #BABABA; box-shadow: 1px 1px 12px #BABABA;']" + "[center][b]Commentaires : [/center][b][b][b][b][b][b][b][b][/b] " + "\n\n" + form.commentaires.value + "\n\n" + "[center][b]Spécialités autres & secret(s) : [/center][b][b][b][b][b][b][b][b][/b] " + "\n\n" + form.specialites_autres_secrets.value + "\n\n" + "[/td][b][b][b][b][b][b][b][b][b][b][b][b][b][/tr][b][b][b][b][b][b][b][b][b][b][b][b][b][/table][b][b][b][b][b][b][b][b][b][b][b][b][b][/center][b][b][b][b][b][b][b][b][b][b][b][b][b]

par Kaehlyth Ven 2 Aoû 2024 - 20:37

Je me permets un up pour dire que j'avance et j'en suis très contente ! king

J'ai tenté d'adapter un vieux code de ce sujet : https://forum.forumactif.com/t333278-formulaire-html

EDITION 1 : J'ai réussi bon gré, mal gré à faire quelque chose. Je suis très très contente ! Yahoo

Code:: <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Formulaire de Création de Fiche de Personnage</title> <style> /* Style pour le formulaire */ body { font-family: Arial, sans-serif; margin: 20px; padding: 0; background-color: #f4f4f4; } .container { display: flex; gap: 10px; flex-wrap: wrap; margin-left : 3em; } .aspect { background-color: #fff; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; width: 190px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);} .aspect-header { background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; } .aspect-content { display: flex; flex-direction: column; } .sub-category { display: flex; align-items: center; margin-bottom: 10px; } .category-name { font-weight: bold; width: 120px; } input[type="text"] { width: 60px; margin-left: 10px; border: 1px solid #ED7D31; padding: 5px; box-sizing: border-box; text-align: center; font-size: 1em; background-color: #fff; } input[type="text"]:focus { border-color: #ED7D31; outline: none; } .large-box { background-color: #fff; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; width: calc(100% - 40px); /* Full width minus padding */ box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-top: 20px; } .large-box-header { background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; } .large-box-content { display: flex; flex-direction: column; gap: 10px; } .large-box-content textarea { width: 100%; height: 100px; border: 1px solid #ED7D31; padding: 10px; box-sizing: border-box; font-size: 1em; border-radius: 5px; resize: vertical; } .form { margin: 10px auto; width: 56%; max-width: 1200px; } center { display: block; text-align: center; margin-top: 20px; } #errormsg { color: red; } .form-group { display: flex; align-items: center; margin-bottom: 10px; width: 64.2em; } .form-group label { flex: 1 0 0px; /* Largeur fixe pour les labels */ font-weight: bold; text-align: left; margin-right: 25px; } .form-group input[type="text"] { flex: 1; padding: 5px; border: 1px solid #ED7D31; border-radius: 3px; } .submit-btn { background-color: #ED7D31; color: #fff; border: none; padding: 10px 20px; font-size: 1em; font-weight: bold; border-radius: 5px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: background-color 0.3s ease; } .submit-btn:hover { background-color: #db6c27; } .responsive-image { max-width: 650px; /* Limite la largeur maximale à 650 pixels */ height: auto; /* Ajuste automatiquement la hauteur pour maintenir le rapport d'aspect */ } .video-preview iframe { width: 79%; margin-left: 7em; height: 60px; } </style> </head> <body> <div class="form"> <form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)"> <input type="hidden" name="lt" value="0" /> <input type="hidden" name="mode" value="newtopic" /> <input type="hidden" name="topictype" value="0" /> <input type="hidden" name="message" value="" /> <input type="hidden" name="f" value="18" /> <input type="hidden" name="subject" id="titre" value="" />  <div class="form-group"> <label for="pseudo">Titre du sujet (pseudonyme) :</label> <input type="text" name="pseudo" id="pseudo" placeholder="Entrez votre pseudo" required /> </div>  <div class="form-group"> <label for="imageURL">Lien de l'image personnage :</label> <input type="text" name="imageURL" id="imageURL" placeholder="Entrez l'URL de l'image" oninput="updateImagePreview()" /> </div>  <div class="form-group"> <label for="videoURL">Lien de la vidéo YouTube :</label> <input type="text" name="videoURL" id="videoURL" placeholder="Entrez l'URL de la vidéo" oninput="updateVideoPreview()" /> </div> <div class="video-preview" id="videoPreview"></div> <div class="image-preview" id="imagePreview" style="text-align-last: center;"></div> <div class="container">  <div class="aspect"> <div class="aspect-header">Aspect psychologique et moral</div> <div class="aspect-content"> <div class="sub-category"> <div class="category-name">Caractère</div> <input type="text" name="psychologique_caractere" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Émotions</div> <input type="text" name="psychologique_emotions" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Valeurs</div> <input type="text" name="psychologique_valeurs" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Total</div> <input type="text" id="total_psychologique" readonly /> </div> </div> </div> <div class="aspect"> <div class="aspect-header">Aspect physique</div> <div class="aspect-content"> <div class="sub-category"> <div class="category-name">Puissance</div> <input type="text" name="physique_puissance" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Adresse</div> <input type="text" name="physique_adresse" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Sens</div> <input type="text" name="physique_sens" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Total</div> <input type="text" id="total_physique" readonly /> </div> </div> </div> <div class="aspect"> <div class="aspect-header">Aspect identitaire</div> <div class="aspect-content"> <div class="sub-category"> <div class="category-name">Statut familial</div> <input type="text" name="identitaire_statut_familial" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Revenus</div> <input type="text" name="identitaire_revenus" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Possessions</div> <input type="text" name="identitaire_possessions" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Total</div> <input type="text" id="total_identitaire" readonly /> </div> </div> </div> <div class="aspect"> <div class="aspect-header">Aspect social et culturel</div> <div class="aspect-content"> <div class="sub-category"> <div class="category-name">Statut social</div> <input type="text" name="social_statut_social" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Éducation</div> <input type="text" name="social_education" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Ethnie</div> <input type="text" name="social_ethnie" placeholder="0" oninput="calculateTotals()" /> </div> <div class="sub-category"> <div class="category-name">Total</div> <input type="text" id="total_social" readonly /> </div> </div> </div> <div style="width: 100%; text-align: center;"><span style="color: red; display: inline-block; margin: auto;" id="errormsg"></span></div> </div> <div class="large-box"> <div class="large-box-header">Spécialités autres & secret(s) :</div> <div class="large-box-content"> <textarea name="specialites_autres_secrets" placeholder="Entrez ici vos spécialités autres et secrets..."></textarea> </div> </div> <div class="large-box"> <div class="large-box-header">Background et Commentaires</div> <div class="large-box-content"> <textarea name="commentaires" placeholder="Entrez ici vos commentaires... avec votre BG"></textarea> </div> </div> <center> <label><span style="color:brown;font-family: sans-serif;">Le titre du sujet sera créé automatiquement !</span></label><br /><br /> <input type="submit" name="post" value="Créer !" class="submit-btn" /><br /> </center> </form> </div> </body> </html> <script> // Calcul des totaux pour chaque aspect function calculateTotals() { const aspects = ['psychologique', 'physique', 'identitaire', 'social']; aspects.forEach(aspect => { let total = 0; const inputs = document.querySelectorAll(`input[name^="${aspect}"]`); inputs.forEach(input => { total += parseFloat(input.value) || 0; }); document.getElementById(`total_${aspect}`).value = total; }); } // Mise à jour de l'aperçu de l'image function updateImagePreview() { const url = document.getElementById('imageURL').value; const imagePreview = document.getElementById('imagePreview'); imagePreview.innerHTML = ''; if (url) { const img = document.createElement('img'); img.src = url; img.onload = () => { imagePreview.appendChild(img); }; img.onerror = () => { imagePreview.innerHTML = 'Erreur de chargement de l\'image.'; }; } } // Prévisualisation de la vidéo YouTube function updateVideoPreview() { const url = document.getElementById('videoURL').value; const videoPreview = document.getElementById('videoPreview'); const youtubeRegex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/; const match = url.match(youtubeRegex); if (match) { const videoId = match[1]; videoPreview.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`; } else { videoPreview.innerHTML = 'Veuillez entrer un lien YouTube valide.'; } } // Conversion des sauts de ligne en balises <br /> function nl2br(str) { return str.replace(/\n/g, '<br />'); } // Validation et préparation du message pour l'envoi function envoiMessage(form) { // Mise à jour des aperçus avant la soumission updateImagePreview(); updateVideoPreview(); // Validation des champs requis const requiredFields = [ 'psychologique_caractere', 'psychologique_emotions', 'psychologique_valeurs', 'physique_puissance', 'physique_adresse', 'physique_sens', 'identitaire_statut_familial', 'identitaire_revenus', 'identitaire_possessions', 'social_statut_social', 'social_education', 'social_ethnie', 'commentaires', 'specialites_autres_secrets' ]; for (let field of requiredFields) { if (!form[field].value.trim()) { document.getElementById("errormsg").innerText = `Vous devez remplir le champ ${field.replace(/_/g, ' ').toUpperCase()}.`; return false; } } // Génération du message const imageUrl = form.imageURL.value.trim(); const pseudo = form.pseudo.value.trim(); const videoUrl = form.videoURL.value.trim(); let txt_message = ` ${imageUrl ? ` <div style="text-align: center; margin-left: 15em; border-top-left-radius: 19px; border-top-right-radius: 19px; max-width: 61%;" class="fond_fiche_predef"> <div class="titre_predef">${pseudo ? `${pseudo}` : ''}</div> ${videoUrl ? ` <iframe width="560" height="315" src="https://www.youtube.com/embed/${videoUrl.match(/(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/)[1]}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ` : ''} <img class="responsive-image" src="${imageUrl}"/> </div> ` : ''} <div style="font-family: Caudex; padding: 0px; margin: 0; background-image: url(https://zupimages.net/up/24/29/dhid.jpg); background-repeat: repeat; box-shadow: 1px 1px 3px #000;"> <div style="display: flex; flex-wrap: nowrap; gap: 10px;"> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect psychologique et moral </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Caractère</div> <input type="text" value="${form.psychologique_caractere.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Émotions</div> <input type="text" value="${form.psychologique_emotions.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Valeurs</div> <input type="text" value="${form.psychologique_valeurs.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_psychologique').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect physique </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Puissance</div> <input type="text" value="${form.physique_puissance.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Adresse</div> <input type="text" value="${form.physique_adresse.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Sens</div> <input type="text" value="${form.physique_sens.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_physique').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect identitaire </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Statut familial</div> <input type="text" value="${form.identitaire_statut_familial.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Revenus</div> <input type="text" value="${form.identitaire_revenus.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Possessions</div> <input type="text" value="${form.identitaire_possessions.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_identitaire').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect social et culturel </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Statut social</div> <input type="text" value="${form.social_statut_social.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Éducation</div> <input type="text" value="${form.social_education.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Ethnie</div> <input type="text" value="${form.social_ethnie.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_social').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> </div><div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; margin-top: 20px; max-width: 95%; margin-left: 1em;"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: -30px; margin-top: -25px;"> Aspect Annexe </div> <div>  <div> <div style="font-weight: bold; margin-bottom: 5px;">Spécialités autres & secret(s) :</div> <div style=" width: 100%; padding: 10px; box-sizing: border-box; font-size: 1em; border-radius: 5px; border: none; white-space: pre-wrap; background-color: #423030; color: #fff; word-wrap: break-word; /* Assure que les longs mots se cassent */ margin: 0; /* Évite les marges non désirées */ display: block; /* Permet à la boîte de s'ajuster à la hauteur du contenu */ "> ${nl2br(form.specialites_autres_secrets.value)} </div> </div>  <div> <div style="font-weight: bold; margin-bottom: 5px;">Commentaires & Background :</div> <div style=" width: 100%; padding: 10px; box-sizing: border-box; font-size: 1em; border-radius: 5px; border: none; white-space: pre-wrap; background-color: #423030; color: #fff; word-wrap: break-word; /* Assure que les longs mots se cassent */ margin: 0; /* Évite les marges non désirées */ display: block; /* Permet à la boîte de s'ajuster à la hauteur du contenu */ "> ${nl2br(form.commentaires.value)} </div> </div> </div> </div> `; form.message.value = txt_message; form.subject.value = "Fiche de personnage " + form.pseudo.value; return true; } </script> </body> </html>

Par contre je ne suis absolument pas sûre de la "propreté" du dit code.
Je laisse ouvert pour si des gens sont intéréssés par ce style de code, que quelqu'un de passionnés puisse confirmé qu'il n'est pas "sale".

EDITION 2 : Lorsque je veux éditer le post créé, imaginons pour changer les chiffres, ou le textarea, tout le code se déforme. J'imagine bien sûr que c'est normal à cause de la limitation de FA entre des langages différents. Je voudrais savoir si vous aviez une solution ?

ICI la page pour tester l'envoi :

Merci FA !

par **Toryudo** Lun 5 Aoû 2024 - 19:02

Bonjour !

Il manque une fermeture de div au niveau de la variable txt_message (je vous laisse recompter pour vérifier à quel endroit vous voulez le fermer), mais pour le reste, ça a l'air tout beau tout propre, félicitation Very Happy

Pour avoir vu des forums évoluer dans leur charte graphique, je conseillerais quand même de préférer les class au CSS inclus directement dans le HTML. Il faut se dire que dans le futur, si on a envie de changer le look de la fiche, mieux vaut avoir à le modifier une fois dans le CSS (pour agir partout), plutôt que de devoir changer les 100 fiches personnages qui auront été créées entre-temps. Et puis, les class, ça peut aussi permettre de rajouter du code JavaScript pour cibler les éléments, si d'autres idées vous viennent un jour. Et ça simplifie le code posté, ça n'empiète pas sur les 65000 caractères maximum d'un post, bref, c'est vraiment tout bénef !

par Kaehlyth Lun 5 Aoû 2024 - 19:39

Toryudo a écrit:Bonjour !

Il manque une fermeture de div au niveau de la variable txt_message (je vous laisse recompter pour vérifier à quel endroit vous voulez le fermer), mais pour le reste, ça a l'air tout beau tout propre, félicitation

Pour avoir vu des forums évoluer dans leur charte graphique, je conseillerais quand même de préférer les class au CSS inclus directement dans le HTML. Il faut se dire que dans le futur, si on a envie de changer le look de la fiche, mieux vaut avoir à le modifier une fois dans le CSS (pour agir partout), plutôt que de devoir changer les 100 fiches personnages qui auront été créées entre-temps. Et puis, les class, ça peut aussi permettre de rajouter du code JavaScript pour cibler les éléments, si d'autres idées vous viennent un jour. Et ça simplifie le code posté, ça n'empiète pas sur les 65000 caractères maximum d'un post, bref, c'est vraiment tout bénef !

Ah super !

Je vais tout recompter ... I don't want that

Pour le CSS dans la feuille de HTML, c'est aussi parce que je reprends du css de base ET SURTOUT c'est la seule solution que j'ai trouvé (sur la page HTML)pour appeler le résultat -> vers le transfert en JS. Le CSS de tout mon forum est hébergé sur dropbox pour dépasser la limite des 65 000 Siffleur

.

Je vais faire le tri, car en effet, je crois que le "bug" d'affichage lors de soumission c'est parce que le CSS du HTML n'existe pas sur le forum donc dès qu'on édit, le HTML se fait traduire par le bbcode et créé des espaces infâmes régulables que par un "compresseur de code". Même si faire ça revient à changer la mise en page ! Humour

Merci Toryudo. J'espère en tout cas que je me lancerai dans d'autres aventures tout aussi fructuantes. Le JS m'a grillé le cerveau même si je me suis aidée d'un outil !

-> Sachez cela dit que je ne sais pas comment faire pour faire une soumission de formulaire ET enregistrer une mise en page une fois soumission./

Belle journée !

PS : Même si le code est personnel, je le laisse en libre disposition.

par **Toryudo** Mer 7 Aoû 2024 - 19:02

Bonjour !

Le problème, c'est la différence entre le HTML et le HTML dans les messages.
Prenons les deux exemples de codes suivants :

Code:: <span>Test</span><span>Test2</span>

Code:: <span>Test</span> <span>Test2</span>

En HTML, le résultat sera le même pour les deux cas :

Code:: TestTest2

Le HTML se fiche des retours à la ligne, parce qu'en HTML, un retour à la ligne se dit <br> ou <br />. Ici, nous avons deux éléments de type inline, ils s'affichent donc l'un à la suite de l'autre, peu importe qu'on fasse un retour à la ligne ou non.

Dans un post par contre, c'est un peu différent.
Dans le premier cas, on aura exactement le même résultat que le HTML.
Par contre, dans le deuxième cas, on aura le résultat suivant :

Code:: Test Test2

Pourquoi ? Parce que quand on écrit un post, un retour à la ligne est ensuite transformé en <br> dans le résultat final. Si vous mettez des retours à la ligne dans votre code posté, alors vous ajoutez des <br> dans le code HTML final. Ce sera déjà une différence de rendu entre ce que vous avez dans une page HTML et le même code HTML dans un post.

Deuxième chose, les espaces. Si vous écrivez les codes suivants :

Code:: <span>Test</span> <span>Test2</span>

Code:: <span>Test </span> <span> Test2</span>

En HTML, le résultat sera le même pour les deux cas :

Code:: Test Test2

Je n'entre pas dans les détails, mais comprendre que quand on fait plusieurs espaces à la suite, la rendu n'en affiche qu'un seul.

Dans un post par contre, c'est un peu différent. Pour le deuxième code, on obtiendra ce rendu :

Code:: Test Test2

Pourquoi ? Si le HTML n'écrit pas plusieurs espaces à la suite, comment réussit-on à afficher plusieurs espaces à la suite ?
Si je prévisualise le code que Forumactif a généré, ça donne ceci :

Code:: <span>Test</span>                      <span>Test2</span>

Si on veut avoir plusieurs espaces à la suite, on est obligé d'alterner les espaces normaux avec ce caractères &nbsp, et ce caractère, c'est un espace insécable. Visuellement c'est la même chose, mais au niveau du rendu, le HTML considère que ce ne sont plus des espaces identiques qui se suivent : il les affiche donc tous.

Pourquoi est-ce que je raconte tout ça, c'est pour expliquer la chose suivante. Le code HTML suivant :

Code:: <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Caractère</div> <input type="text" value="10" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div>

Si vous le collez tel quel et que vous postez un message, il est transformé en ceci :

Code:: <div style="display: flex; align-items: center; margin-bottom: 10px;"><br>                                   <div style="font-weight: bold; width: 120px;">Caractère</div><br>                                   <input type="text" value="10" readonly="" style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"><br>                               </div>

On a donc ajouté des <br> pour les différents retours à la ligne, et des alternances d'espaces et de &nbsp qui correspondent au décalages de chaque début de ligne.
Et c'est là tout votre problème d'affichage. Dans un post, si vous voulez que votre rendu HTML soit exactement le même que le rendu HTML d'une page HTML... alors vous devez retirer tous les retours à la ligne et tous les espaces entre les balises !

Vous obtenez alors le code suivant :

Code:: <div style="display: flex; align-items: center; margin-bottom: 10px;"><div style="font-weight: bold; width: 120px;">Caractère</div><input type="text" value="10" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/></div>

Qui, lui, s'affichera de la même façon sur une page HTML ou dans un post, parce qu'il n'y a ni retour à la ligne, ni espaces consécutifs à transformer !

par Kaehlyth Mer 7 Aoû 2024 - 19:26

Merci Toryudo pour ce cours, je viens de comprendre pourquoi le code ne fonctionne pas alors que pourtant il était "propre" !

Donc, quand je soumet un formulaire, le sujet s'affiche PARFAITEMENT comme le code de la page HTML mais si je veux l'éditer pour ajouter des choses ... tout se brise avec les espaces ! Donc le code devient in-éditable ! Shocked

La solution donc, ce serait de compresser tout le code HTML une fois soumission sur une page test, voir le rendu, et tout régler pour que ça ait le même visuel qu'avec mes espaces fantômes ! Assomé

par **Toryudo** Mer 7 Aoû 2024 - 19:45

Ou alors, tenter de faire autrement, avec des position absolute et relative un peu partout ?
Comme ça, même s'il y a des espaces partout, vous gardez le contrôle sur le placement des différents éléments.
Ça se tente, même si ce n'est pas simple (et pas 100% garanti, je n'ai jamais essayé) !

par Kaehlyth Mer 7 Aoû 2024 - 19:52

Merci pour ce cours.

Il est précieux et devrait être mis à la portée de tous !

Je suis satisfaite de mon code et mes joueurs et mes joueuses préfèrent compressé comme un gros tas de patates dans un petit filet !
Le problème ne se pose plus du coup ! Sourire2

Encore merci.

Création formulaire : Tableau à remplir et à envoyer dans un sujet