Bienvenue sur Cocktail Cupcake.
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Poster un nouveau sujet   Répondre au sujetPartagez | 
 

 Créer un formulaire

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Chimik Girl
Admin l Déesse
avatar

Messages : 241
Date d'inscription : 05/05/2013

MessageSujet: Créer un formulaire   Lun 3 Juil - 13:30

Champ à remplir:

prénom
âge
date de naissance
Un gif

origine
allégeance
particularité
trait de caractère

histoire

pseudo ou prénom
âge
comment as tu connu le forum
votre avis
autre chose ?
as tu lu le règlement ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://cocktail-cupcake.forumactif.org
Chimik Girl
Admin l Déesse
avatar

Messages : 241
Date d'inscription : 05/05/2013

MessageSujet: Re: Créer un formulaire   Lun 3 Juil - 15:12

Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <base target="_blank" />
    <meta name="author" content="Onyx" />
    <title>Formulaire de Présentation</title>
    <style type="text/css">
      /*Corps*/
      body {
      margin: 0px;
      color: #757575;
      font-family: 'Verdana';
      font-size: 13px;
      }
      /*Formulaire*/
      #monId {
      background-color: #dfdfdf;
      box-shadow: inset 0px 0px 15px #656565;
      margin: auto;
      border-radius: 10px;
      width: 500px;
      padding: 15px;
      }
      /*Titres*/
      h1, h2, h3 {
      color: #757575;
      text-align: center;
      font-family: 'Monotype Corsiva', cursive;
      font-size: 32px;
      font-weight: normal;
      }
      /*Petit titre*/
      h2 {
      font-size: 24px;
      }
      /*Champs text, number, password, textarea et select*/
      input[type="text"], input[type="number"], input[type="password"], textarea, select {
      display: inline-bloc;
      width: 97%;
      margin-top: 3px;
      background-color: #efefef;
      color: #858585;
      padding: 5px;
      border: none;
      border-radius: 5px;
      box-shadow: inset 2px 2px 2px #bfbfbf, inset -2px -2px 1px #bfbfbf;
      font-size: 13px;
      font-family: 'Arial';
      }
      /*Champs radio*/
      input[type="radio"] {
      display: inline-bloc;
      margin-top: 3px;
      vertical-align: bottom;
      }
      /*Champs submit et reset*/
      input[type="submit"], input[type="reset"] {
      margin-top: 10px;
      text-align: center;
      display: inline-block;
      font-weight: bold;
      background-color: #fdfdfd;
      border: 1px solid #c4c4c4;
      color: #757575;
      padding: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #747474, inset 0px 0px 15px #a3a3a3;
      }
      /*Champs submit et reset au survol*/
      input[type="submit"]:hover, input[type="reset"]:hover {
      cursor: pointer;
      background-color: #ffffff;
      box-shadow: 4px 4px 4px #747474, inset 0px 0px 15px #a3a3a3;
      color: #656565;
      }
      /*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: 100px;
      }
      
      /*Crédits*/
      .credits {
      margin: 10px auto -10px auto;
      font-size: 11px;
      text-align: center;
      }
      .credits a {
      color: darkgreen;
      text-decoration: none;
      }
      .credits a:hover {
      color: blue;
      }
    </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 =
          "<link href='https://fonts.googleapis.com/css?family=Lobster|Pacifico|Dancing+Script' rel='stylesheet' type='text/css' />" +
          "<div class='prez'>" +
          "<img src='" + NomForm.urlimghaut.value + "' class='prez_haut' />" +
          "<div class='prez_nom'>" + NomForm.prenom.value + " " + NomForm.nom.value + "</div>" +
          "<div class='prez_citation'>« " + NomForm.citation.value + " »</div>" +
          "<div class='prez_bloc'>" +
<span class='prez_champ'>Nom :</span> " + NomForm.nom.value + "<br />" +
          "<span class='prez_champ'>Prénom :</span> " + NomForm.prenom.value + "<br />" +
        
          "<span class='prez_champ'>Âge :</span> " + NomForm.age.value + "<br />" +
  "<span class='prez_champ'>Origine :</span> " + NomForm.origine.value + "<br />" +
 "<span class='prez_champ'>Groupe :</span> " + NomForm.groupe.value + "<br />" +
  "<span class='prez_champ'>Allégeance :</span> " + NomForm.allegeance.value + "<br />" +
          "<span class='prez_champ'>Statut amoureux :</span> " + NomForm.amour.value + "<br />" +
          "<span class='prez_champ'>Métier/Occupation :</span> " + NomForm.metier.value + "<br />" + "</div><div style='clear: both;'></div></div><div class='prez_title'>" +
          "Caractère</div><div class='prez_bloc'>" + NomForm.desccar.value + "</div><div class='prez_title'>" +
          "Histoire</div><div class='prez_bloc'>" + NomForm.hist.value + "</div><div class='prez_title'>" +
          "Informations sur le joueur</div><div class='prez_bloc'>" +
          "<img src='" + NomForm.urlimgbas.value + "' class='prez_bas' />" +
          "<div class='prez_right2'>" +
          "<span class='prez_champ'>Pseudo :</span> " + NomForm.nomhrp.value + "<br />" +
          "<span class='prez_champ'>Âge :</span> " + NomForm.agehrp.value + "<br />" +
          "<span class='prez_champ'>Comment as tu connu le forum :</span> " + NomForm.connu.value + "<br />" +
          "<span class='prez_champ'>Ton avis sur le forum :</span> " + NomForm.avis.value + "<br />" +
          "<span class='prez_champ'>Autre chose ? :</span>" + NomForm.autre.value + "<br/>" +
 "<span class='prez_champ'>As tu lu le règlement ? :</span>" + NomForm.code.value + "</div><div style='clear: both;'></div></div>" +
          "<div class='prez_credit'>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>, inspiré de <a href='http://www.never-utopia.com/t43339-fiche-bois-sombre' target='_blank'>cette fiche</a> de Pastomaniac.</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="17" />
      <input type="hidden" name="subject" id="titre" value="" />
      <h1>Formulaire de Présentation</h1>
      <h2>Informations sur le personnage</h2>
      <label for="nom">Nom</span> :</label><br />
      <input type="text" name="nom" id="nom" /><br />
      <br />
      <label for="prenom">Prénom</span> :</label><br />
      <input type="text" name="prenom" id="prenom" /><br />
      <br />
      <label for="age">Âge</span> :</label><br />
      <input type="text" name="age" id="age" /><br />
      <br />
       <label for="origine">Origine :</label><br />
      <input type="text" name="origine" id="origine" /><br />
      <br />
      <label for="group">Groupe</span> :</label><br />
      <select name="group" id="group">
        <option>100</option>
        <option>Arkers</option>
        <option>Earthborn</option>
        <option>Dissidents</option>
      </select><br />
      <br />
      <label for="amour">Allégeance</label><br />
      <input type="text" name="allegeance" id="allegeance" /><br />
      <label for="amour">Statut amoureux</label><br />
      <input type="text" name="amour" id="amour" /><br />
      <br />
      <label for="metier">Occupation/Métier</label><br />
      <input type="text" name="metier" id="metier" /><br />
      <br />
      <h2>Descriptions du personnage</h2>
      <label for="desccar">Caractère:</label><br />
      <textarea name="desccar" id="desccar"></textarea><br />
      <br />
      <br />
      <label for="hist">Histoire<span class="redd">*</span> :</label><br />
      <textarea name="hist" id="hist"></textarea><br />
      <br />
      <br />
      <h2>Informations sur le joueur</h2>
      <label for="nomhrp">Pseudo :</label><br />
      <input type="text" name="nomhrp" id="nomhrp" /><br />
      <br />
      <label for="agehrp">Âge :</label><br />
      <input type="text" name="agehrp" id="agehrp" /><br />
      <br />
      <label for="connu">Comment as tu connu le forum ?</label><br />
      <input type="text" name="connu" id="connu" /><br />
      <br />
      <label for="avis">Ton avis sur le forum ?</label><br />
      <textarea name="avis" id="avis"></textarea><br />
      <br />
      <label for="secret">Autre chose ?</label><br />
      <input type="text" name="autre" id="autre" /><br />
       <label for="code">As tu lu le règlement ? :</label><br />
      <input type="text" name="code" id="code" /><br />
      <br />
      <br />
      <h2>Personnaliser la mise en page</h2>
      <label for="urlimghaut">URL d'un GIF (500px par 200px) :</label><br />
      <input type="text" name="urlimghaut" id="urlimghaut" value="https://media.giphy.com/media/Wp4xCJwvz5RTO/giphy.gif" /><br />
      <br />
      <label for="citation">Petite citation :</label><br />
      <input type="text" name="citation" id="citation" value="Petite citation" /><br />
      <br />
      <label for="urlimgbas">URL icon (100px par 100px) :</label><br />
      <input type="text" name="urlimgbas" id="urlimgbas" value="http://imgur.com/qy7ZcjU.png" /><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>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://cocktail-cupcake.forumactif.org
 
Créer un formulaire
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Formulaire de création de Personnage
» Formulaire d'inscription (modèle unique)
» Formulaire d' Agrégation.
» rp - formulaire de régularisation d'un sans papier
» Formulaire pour avoir un prof de RP

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
Cocktail Cupcake :: PARTIE CODAGE :: HTLM/CSS-
Poster un nouveau sujet   Répondre au sujetSauter vers: