<!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;
}
/*Astérisques rouges*/
.redd {
color: red;
}
/*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'>" +
"<img src='" + NomForm.urlimgava.value + "' class='prez_ava' />" +
"<div class='prez_right'>" +
"<span class='prez_champ'>Prénom :</span> " + NomForm.prenom.value + "<br />" +
"<span class='prez_champ'>Nom :</span> " + NomForm.nom.value + "<br />" +
"<span class='prez_champ'>Surnom :</span> " + NomForm.surnom.value + "<br />" +
"<span class='prez_champ'>Âge :</span> " + NomForm.age.value + "<br />" +
"<span class='prez_champ'>Groupe :</span> " + NomForm.group.value + "<br />" +
"<span class='prez_champ'>Pouvoir :</span> " + NomForm.pouvoir.value + "<br />" +
"<span class='prez_champ'>Aime :</span> " + NomForm.aime.value + "<br />" +
"<span class='prez_champ'>Déteste :</span> " + NomForm.deteste.value + "<br />" + "</div><div style='clear: both;'></div></div><div class='prez_title'>" +
"Description physique</div><div class='prez_bloc'>" + NomForm.descphy.value + "</div><div class='prez_title'>" +
"Description psycologique</div><div class='prez_bloc'>" + NomForm.descpsy.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'>Prénom :</span> " + NomForm.nomhrp.value + "<br />" +
"<span class='prez_champ'>Âge :</span> " + NomForm.agehrp.value + "<br />" +
"<span class='prez_champ'>Comment j'ai connu le forum :</span> " + NomForm.connu.value + "<br />" +
"<span class='prez_champ'>Mon avis sur le forum :</span> " + NomForm.avis.value + "<br />" +
"<span class='prez_champ'>Le code secret :</span> [hide]" + NomForm.secret.value + "[/hide]</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="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="surnom">Surnom :</label><br />
<input type="text" name="surnom" id="surnom" /><br />
<br />
<label for="age">Âge<span class="redd">*</span> :</label><br />
<input class="obligatoire" type="text" name="age" id="age" /><br />
<br />
<label for="group">Groupe<span class="redd">*</span> :</label><br />
<select name="group" id="group">
<option>Premier</option>
<option>Deuxième</option>
<option>Troisième</option>
<option>Quatrième</option>
<option>Etc.</option>
</select><br />
<br />
<label for="pouvoir">Pouvoir<span class="redd">*</span> :</label><br />
<input class="obligatoire" type="text" name="pouvoir" id="pouvoir" /><br />
<br />
<label for="aime">Aime<span class="redd">*</span> :</label><br />
<input class="obligatoire" type="text" name="aime" id="aime" /><br />
<br />
<label for="deteste">Déteste<span class="redd">*</span> :</label><br />
<input class="obligatoire" type="text" name="deteste" id="deteste" /><br />
<br />
<h2>Descriptions du personnage</h2>
<label for="descphy">Description Physique<span class="redd">*</span> :</label><br />
<textarea class="obligatoire" name="descphy" id="descphy"></textarea><br />
<br />
<br />
<label for="descpsy">Description Psychologique<span class="redd">*</span> :</label><br />
<textarea class="obligatoire" name="descpsy" id="descpsy"></textarea><br />
<br />
<br />
<label for="hist">Histoire<span class="redd">*</span> :</label><br />
<textarea class="obligatoire" name="hist" id="hist"></textarea><br />
<br />
<br />
<h2>Informations sur le joueur</h2>
<label for="nomhrp">Prénom :</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 avez-vous connu le forum<span class="redd">*</span> ?</label><br />
<input class="obligatoire" type="text" name="connu" id="connu" /><br />
<br />
<label for="avis">Votre avis sur le forum ?</label><br />
<textarea name="avis" id="avis"></textarea><br />
<br />
<label for="secret">Le code secret<span class="redd">*</span> ?</label><br />
<input class="obligatoire" type="text" name="secret" id="secret" /><br />
<br />
<h2>Personnaliser la mise en page</h2>
<label for="urlimghaut">URL de l'image du haut (500px par 200px) :</label><br />
<input type="text" name="urlimghaut" id="urlimghaut" value="https://2img.net/r/hpimg15/pics/959085haut.jpg" /><br />
<br />
<label for="citation">Petite citation :</label><br />
<input type="text" name="citation" id="citation" value="Petite citation" /><br />
<br />
<label for="urlimgava">URL de l'image du personnage (200px par 320px) :</label><br />
<input type="text" name="urlimgava" id="urlimgava" value="https://2img.net/r/hpimg15/pics/485538middle.jpg" /><br />
<br />
<label for="urlimgbas">URL de l'image du joueur (100px par 100px) :</label><br />
<input type="text" name="urlimgbas" id="urlimgbas" value="https://2img.net/r/hpimg15/pics/858946bas.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>
Accueil
