AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Personnalisation du formulaire de présentation.

    RozenBreizh
    RozenBreizh
    FémininAge : 33Messages : 1411

    Jeu 4 Juil 2019 - 22:28

    Helloooow la communauté. Very Happy

    Je viens vers vous car j'aimerais proposer un formulaire de présentation. Je ne gère pas du tout le JS, du coup c'est vers vous que je me tourne pour m'aider à personnaliser le formulaire de présentation en LS par Onyx : https://www.never-utopia.com/t60709-formulaire-de-presentation

    Voilà la maquette de la présentation que je souhaite :
    Personnalisation du formulaire de présentation. Maquettepresentation

    Merci à la personne qui m'aidera. :hug:

    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 26 Juil 2019 - 17:17

    Salut!

    J'ai commencé et ça avance, mais c'est possible d'avoir les polices et la taille de l'avatar?

    Si tu veux suivre l'avancée :
    http://forum-test-onyx4.forum-canada.com/t5-presentation-de-onyx-machin
    http://forum-test-onyx4.forum-canada.com/h1-formulaire-rozen

    Note: C'est peut-être moi, mais j'ai toujours trouvé que le rouge foncé que tu as choisi pour ce thème n'est pas très lisible, je sais pas si je suis la seule à penser ça scratch



    • Revenir en haut
    RozenBreizh
    RozenBreizh
    FémininAge : 33Messages : 1411

    Lun 29 Juil 2019 - 22:49

    Hellooow ! Very Happy

    Merciiiiii beaucoup de t'en occupée. :lovebomb: :lovebomb: :lovebomb: :lovebomb: :lovebomb: :lovebomb: Voilà la police : https://fonts.google.com/specimen/Special+Elite

    Pour les couleurs, effectivement le rouge n'est pas très lisible, peut-être avec une ombre en #DEDEDE ou alors rendre le rouge plus clair. :hum:
    • Revenir en haut
    RozenBreizh
    RozenBreizh
    FémininAge : 33Messages : 1411

    Sam 3 Aoû 2019 - 16:04

    Hellow :)

    Je me permet de double poste pour dire que je suis l'avancement de ton travail @Onyx. :) Je trouve que ça fait mieux avec l'ombre en #DEDEDE pour le rouge, qu'en penses-tu ?
    • Revenir en haut
    RozenBreizh
    RozenBreizh
    FémininAge : 33Messages : 1411

    Dim 18 Aoû 2019 - 12:59

    Hellooow. :)

    Je viens aux nouvelles. ^^ Pour dire aussi qu'il ne me manque plus que ce code pour finaliser le forum, mais prend ton temps, ça me permet de repousser toujours plus l'ouverture. :siffle: :siffle: :siffle:
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 23 Aoû 2019 - 3:19

    Salut!

    En fait, j'ai fini depuis un bail, ça fait simplement un moment que je ne suis pas passé sur NU :siffle:

    Donc voilà le code html du formulaire :
    Code:
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8" />
      <base target="_blank" />
      <meta name="author" content="Onyx" />
      <title>Formulaire de Présentation</title>
      <link href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap" rel="stylesheet" />
      <style type="text/css">
        /*Corps*/
        body {
        margin: 0px;
        color: #a3a3a3;
        background: #000;
        font-family: 'Verdana';
        font-size: 13px;
        }
        /*Formulaire*/
        #monId {
        background-color: #353535;
        margin: auto;
        width: 500px;
        padding: 15px;
        border-top: 15px solid #fcad19;
        border-bottom: 15px solid #fcad19;
        }
        /*Titres*/
        h1, h2, h3 {
        color: #4e0505;
        text-shadow: 0px 0px 2px #dedede;
        font-family: 'Special Elite', cursive;
        font-weight: bold;
        text-align: center;
        font-size: 32px;
        }
        /*Petit titre*/
        h2 {
        font-size: 24px;
        margin-bottom: 5px;
        }
       
        /*Champs text, textarea et select*/
        input[type="text"], textarea, select {
        display: inline-bloc;
        width: 97%;
        margin-top: 3px;
        background-color: #484b51;
        color: #c4c4c4;
        padding: 5px;
        border: none;
        box-shadow: inset 0px 0px 4px #050505;
        font-size: 13px;
        font-family: 'Arial';
        }
        input::placeholder, textarea::placeholder {
        color: #959595;
        }
       
        /*Champs submit et reset*/
        input[type="submit"], input[type="reset"] {
        margin-top: 10px;
        text-align: center;
        display: inline-block;
        font-weight: bold;
        background-color: #484b51;
        border: 1px solid #484b51;
        color: #c4c4c4;
        padding: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
        box-shadow: 2px 2px 2px #000;
        }
        /*Champs submit et reset au survol*/
        input[type="submit"]:hover, input[type="reset"]:hover {
        cursor: pointer;
        color: #dedede;
        background-color: #484b51;
        box-shadow: 4px 4px 4px #000;
        }
        /*Champs reset et prévisualiser*/
        input[type="reset"], input[name="preview"] {
        margin-top: 0px;
        margin-right: 10px;
        font-weight: normal;
        }
       
        /*Champs textarea*/
        textarea {
        min-width: 97%;
        max-width: 97%;
        min-height: 50px;
        }
       
        /*Astérisques rouges*/
        .redd {
        color: #CC0000;
        }
       
        /*Crédits*/
        .credits {
        margin: 10px auto -10px auto;
        font-size: 11px;
        text-align: center;
        }
        .credits a {
        color: #c4c4c4;
        text-decoration: none;
        }
        .credits a:hover {
        color: #dedede;
        }
      </style>
      <script type="text/javascript">
      //<!--
        /*Fonction pour créer le message*/
        function creationMessage(NomForm) {   
             
          /* On met le titre dans le champ "titre" */
          NomForm.titre.value =
            "Présentation de " + NomForm.prenom.value + " " + NomForm.nom.value;
       
          /* On met le message dans le champ "message" */
          NomForm.message.value =
            "<div class='prez'>" +
              "<img src='" + NomForm.urlimgava.value + "' class='prez_ava' />" +
              "<div style=''>" +
                "<div class='prez_nom'>" + NomForm.prenom.value + " " + NomForm.nom.value + "</div>" +
                "<div class='prez_infoperso'>" +
                  "<div>Nationalité - " + NomForm.nation.value + "</div>" +
                  "<div>Âge terrien - " + NomForm.ageterrien.value + "</div>" +
                  "<div>Âge orphélien - " + NomForm.ageorphe.value + "</div>" +
                  "<div>Faction - " + NomForm.faction.value + "</div>" +
                  "<div>Fonction - " + NomForm.fonction.value + "</div>" +
                  "<div>Avatar - " + NomForm.avatar.value + "</div>" +
                "</div></div>" +
             
              "<div style='width: 33%;'>" +
                "<div class='prez_sub1'>Pouvoir inutile</div>" +
                "<div class='prez_bloc1'>" + NomForm.pouvoir.value + "</div>" +
              "</div>" +
              "<div style='width: 33%;'>" +
              "<div class='prez_sub1'>Peur/Phobie</div>" +
                "<div class='prez_bloc1'>" + NomForm.peur.value + "</div>" +
              "</div>" +
              "<div style='width: 33%;'>" +
                "<div class='prez_sub1'>Autres infos</div>" +
                "<div class='prez_bloc1'>" + NomForm.autres.value + "</div>" +
              "</div>" +
       
              "<div style='width: 30%;'>" +
                "<div class='prez_sub2'>Physique</div>" +
                "<div class='prez_bloc2'>" +
                  "Taille : " + NomForm.taille.value + "<br />" +
                  "Corpulence : " + NomForm.corpulence.value + "<br />" +
                  "Cheveux : " + NomForm.cheveux.value + "<br />" +
                  "Yeux : " + NomForm.yeux.value + "<br />" +
                  "Style vestimentaire : " + NomForm.style.value + "<br />";
                  if (NomForm.tatouages.value) {
                  NomForm.message.value = NomForm.message.value + "Tatouage(s) : " + NomForm.tatouages.value + "<br />";
                  }
                  if (NomForm.cicatrices.value) {
                  NomForm.message.value = NomForm.message.value + "Cicatrice(s) : " + NomForm.cicatrices.value + "<br />";
                  }
                  if (NomForm.autresphy.value) {
                  NomForm.message.value = NomForm.message.value + "Autres : " + NomForm.autresphy.value + "<br />";
                  }
                NomForm.message.value = NomForm.message.value + "</div></div>" +
       
              "<div style='width: 68%;'>" +
                "<div class='prez_sub2'>Caractère/Psychologie</div>" +
                "<div class='prez_bloc2'>" + NomForm.caractere.value + "</div>" +
              "</div>" +
             
              "<div style='width: 100%;'>" +
                "<div class='prez_sub3'>Mes souvenirs</div>" +
                "<div class='prez_bloc3'>" + NomForm.souvenirs.value + "</div>" +
              "</div></div>";
       

          /*On vérifie si on peut ou non envoyer le message*/
          var champsobligatoires = document.getElementsByClassName("obligatoire");
          var totalchampsobligatoires = 0;
          for (i = 0; i < champsobligatoires.length; i++) {
            var champvaleur = champsobligatoires[i].value;
            if (champvaleur.length > 0) {
              totalchampsobligatoires = totalchampsobligatoires + 1;
            }
          }
          if (totalchampsobligatoires < champsobligatoires.length) {
            alert("Tous les champs obligatoires (ceux avec un astérisque rouge) doivent être remplis.");
            return false;
          }
          else {
            return true;
          }
        }
      //-->
      </script>
     </head>
     <body>
      <form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank" onSubmit="return creationMessage(this)">
        <input type="hidden" name="mode" value="newtopic" />
        <input type="hidden" name="topictype" value="0" checked="checked" />
        <input type="hidden" name="message" value="" />
        <input type="hidden" name="f" value="10" />
        <input type="hidden" name="subject" id="titre" value="" />
        <h1>Formulaire de Présentation</h1>
        <h2>Informations sur le personnage</h2>
        <label for="prenom">Prénom<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="prenom" id="prenom" /><br />
        <br />
        <label for="nom">Nom<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="nom" id="nom" /><br />
        <br />
        <label for="nation">Nationalité<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="nation" id="nation" /><br />
        <br />
        <label for="ageterrien">Âge terrien<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="ageterrien" id="ageterrien" /><br />
        <br />
        <label for="ageorphe">Âge orphélien<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="ageorphe" id="ageorphe" /><br />
        <br />
        <label for="faction">Faction<span class="redd">*</span> :</label><br />
        <select name="faction" id="faction">
          <option>Premier</option>
          <option>Deuxième</option>
          <option>Troisième</option>
          <option>Quatrième</option>
          <option>Etc.</option>
        </select><br />
        <br />
        <label for="fonction">Fonction<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="fonction" id="fonction" /><br />
        <br />
        <label for="avatar">Personnage sur votre avatar<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="avatar" id="avatar" /><br />
        <br />
        <label for="pouvoir">Pouvoir inutile<span class="redd">*</span> :</label><br />
        <textarea class="obligatoire" name="pouvoir" id="pouvoir"></textarea><br />
        <br />
        <label for="peur">Peur/Phobie<span class="redd">*</span> :</label><br />
        <textarea class="obligatoire" name="peur" id="peur"></textarea><br />
        <br />
        <label for="autres">Autres infos :</label><br />
        <textarea name="autres" id="autres"></textarea><br />
        <br />
        <h2>Description Physique</h2>
        <label for="taille">Taille<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="taille" id="taille" /><br />
        <br />
        <label for="taille">Corpulence<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="corpulence" id="corpulence" /><br />
        <br />
        <label for="cheveux">Cheveux<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="cheveux" id="cheveux" /><br />
        <br />
        <label for="yeux">Yeux<span class="redd">*</span> :</label><br />
        <input class="obligatoire" type="text" name="yeux" id="yeux" /><br />
        <br />
        <label for="style">Style vestimentaire<span class="redd">*</span> :</label><br />
        <textarea type="text" name="style" id="style"></textarea><br />
        <br />
        <label for="tatouages">Tatouage(s) :</label><br />
        <textarea type="text" name="tatouages" id="tatouages"></textarea><br />
        <br />
        <label for="cicatrices">Cicatrice(s) :</label><br />
        <textarea type="text" name="cicatrices" id="cicatrices"></textarea><br />
        <br />
        <label for="autresphy">Autres :</label><br />
        <textarea type="text" name="autresphy" id="autresphy" placeholder="Piercing, lunettes, tâches de rousseurs, etc."></textarea><br />
        <br />
        <h2>Caractère/Psychologie</h2>
        <label for="toc">Toc/Tic/Habitudes<span class="redd">*</span> :</label><br />
        <textarea class="obligatoire" type="text" name="autresphy" id="autresphy" placeholder="Dites si votre personnage a des tocs, des tics ou des habitudes, comme se ronger les ongles, alcoolique, fumeur, etc."></textarea><br />
        <br />
        <label for="caractere">Caractère<span class="redd">*</span> :</label><br />
        <textarea class="obligatoire" type="text" name="caractere" id="caractere" style="min-height: 100px;" placeholder="Expliquez comment votre personnage réagit vis-à-vis de ses peurs, ses phobies, ce que peut penser un inconnu de lui, ses qualités et ses défauts, etc."></textarea><br />
        <br />
        <h2>Souvenirs</h2>
        <label for="souvenirs">Souvenirs<span class="redd">*</span> :</label><br />
        <textarea class="obligatoire" type="text" name="souvenirs" id="souvenirs" style="min-height: 200px;"></textarea><br />
        <br />
        <h2>Personnaliser la mise en page</h2>
        <label for="urlimgava">URL de l'image du personnage (100px par 100px) :</label><br />
        <input type="text" name="urlimgava" id="urlimgava" value="https://2img.net/r/hpimg15/pics/485538middle.jpg" /><br />
        <br />
        <br />
        <div style="text-align: center;">
          <input type="reset" name="reseta" value="Rénitialiser le formulaire" />
          <input type="submit" name="preview" value="Prévisualiser le formulaire" />
          <input type="submit" name="post" value="Envoyer le formulaire" />
        </div>
        <br />
        <div class="credits">Par <a href="http://www.never-utopia.com/u27" target="_blank">Onyx</a> de <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a>.</div>
      </form>
     </body>
    </html>

    Assures-toi de mettre les différentes factions ici :
    Code:
        <select name="faction" id="faction">
          <option>Premier</option>
          <option>Deuxième</option>
          <option>Troisième</option>
          <option>Quatrième</option>
          <option>Etc.</option>
        </select>

    Et de mettre le numéro du forum ici :
    Code:
        <input type="hidden" name="f" value="10" />


    Le CSS pour la fiche de présentation :
    Code:
    /*Présentation*/
    .prez {
      margin: auto;
      background: #353535;
      border-top: 15px solid #fcad19;
      border-bottom: 15px solid #fcad19;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding: 10px 20px;
      justify-content: space-between;
      width: 600px;
      color: #c4c4c4;
    }
    /*Avatar*/
    .prez_ava {
      width: 100px;
      height: 100px;
    }
    /*Nom*/
    .prez_nom {
      text-align: center;
      font-size: 24px;
      height: 16px;
      color: #4e0505;
      text-shadow: 0px 0px 2px #dedede;
      font-family: 'Special Elite', cursive;
      font-weight: bold;
    }
    /*Bloc des lignes info rouge*/
    .prez_infoperso {
      width: 440px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      box-sizing: border-box;
      justify-content: space-between;
      height: 77px;
      margin-top: 8px;
    }
    /*Lignes info rouge*/
    .prez_infoperso div {
      text-align: center;
      background: #4e0505;
      box-sizing: border-box;
      height: 22px;
      margin: 1px 2px;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .prez_sub1, .prez_sub2, .prez_sub3 {
      color: #4e0505;
      text-shadow: 0px 0px 2px #dedede;
      text-align: center;
      font-size: 18px;
      margin-top: 15px;
      font-family: 'Special Elite', cursive;
      font-weight: bold;
    }
    .prez_sub2 {
      font-size: 24px;
      margin-bottom: 5px;
      margin-top: 20px;
    }
    .prez_sub3 {
      font-size: 28px;
      margin-bottom: 5px;
      margin-top: 25px;
    }
    .prez_bloc1, .prez_bloc2, .prez_bloc3 {
      box-sizing: border-box;
      background: #484b51;
      padding: 5px;
    }
    .prez_bloc1 {
      height: 100px;
      overflow: auto;
    }
    .prez_bloc2 {
      height: 200px;
      overflow: auto;
    }
    .prez_bloc3 {
      min-height: 400px;
    }



    • Revenir en haut
    RozenBreizh
    RozenBreizh
    FémininAge : 33Messages : 1411

    Jeu 29 Aoû 2019 - 0:06

    Coucoute.

    Merci beaucoup Onyx pour ton travail. Very Happy C'est parfait !!!! :lovebomb: :lovebomb: :lovebomb: :lovebomb: :lovebomb:

    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 14:42