Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

[Formulaire] "Vous devez entrer un message avant de poster."

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu [Formulaire] "Vous devez entrer un message avant de poster."

Message par Testeur94 le Mar 22 Oct 2013 - 14:43

Bonjour à tous,

j'ai un problème avec mon formulaire que je viens de réaliser, j'ai déjà mis en place les deux premières étapes, c'est à dire le créer et le relier  à mon forum...
Me reste donc plus qu'à  mettre en forme le message avec les données qu'on a récoltées via le formulaire, mais c'est la que je bloque, je ne sais pas trop comment m'y prendre (ou l'insérer ...) si quelqu'un pouvait y jeter un œil et m'aider là dessus, ça sera très sympas de sa part.
Merci d'avance à celui qui m'aidera !

Voici mon code :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>La prétention.</title>
<style type="text/css">
body
{
 background:#222222;
 font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
 font-size:small;
 margin:8px 0 16px;
 text-align:center;
}

#form_container
{
 background:#fff;
 
margin:0 auto;
 text-align:left;
 width:640px;
}

#top
{
 display:block;
 height:10px;
 margin:10px auto 0;
 width:650px;
}

#footer
{
 width:640px;
 clear:both;
 color:#999999;
 text-align:center;
 width:640px;
 padding-bottom: 15px;
 font-size: 85%;
}

#footer a{
 color:#999999;
 text-decoration: none;
 border-bottom: 1px dotted #999999;
}

#bottom
{
 display:block;
 height:10px;
 margin:0 auto;
 width:650px;
}

form.appnitro
{
 margin:20px 20px 0;
 padding:0 0 20px;
}

/**** Logo Section  *****/
h1
{
 background-color:#444444;
 margin:0;
 min-height:0;
 padding:0;
 text-decoration:none;
 text-indent:-8000px;
 
}

h1 a
{
 
display:block;
 height:100%;
 min-height:40px;
 overflow:hidden;
}


img
{
 behavior:url(css/iepngfix.htc);
 border:none;
}


/**** Form Section ****/
.appnitro
{
 font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
 font-size:small;
}

.appnitro li
{
 width:61%;
}

form ul
{
 font-size:100%;
 list-style-type:none;
 margin:0;
 padding:0;
 width:100%;
}

form li
{
 display:block;
 margin:0;
 padding:4px 5px 2px 9px;
 position:relative;
}

form li:after
{
 clear:both;
 content:".";
 display:block;
 height:0;
 visibility:hidden;
}

.buttons:after
{
 clear:both;
 content:".";
 display:block;
 height:0;
 visibility:hidden;
}

.buttons
{
 clear:both;
 display:block;
 margin-top:10px;
}

* html form li
{
 height:1%;
}

* html .buttons
{
 height:1%;
}

* html form li div
{
 display:inline-block;
}

form li div
{
 color:#444;
 margin:0 4px 0 0;
 padding:0 0 8px;
}

form li span
{
 color:#444;
 float:left;
 margin:0 4px 0 0;
 padding:0 0 8px;
}

form li div.left
{
 display:inline;
 float:left;
 width:48%;
}

form li div.right
{
 display:inline;
 float:right;
 width:48%;
}

form li div.left .medium
{
 width:100%;
}

form li div.right .medium
{
 width:100%;
}

.clear
{
 clear:both;
}

form li div label
{
 clear:both;
 color:#444;
 display:block;
 font-size:9px;
 line-height:9px;
 margin:0;
 padding-top:3px;
}

form li span label
{
 clear:both;
 color:#444;
 display:block;
 font-size:9px;
 line-height:9px;
 margin:0;
 padding-top:3px;
}

form li .datepicker
{
 cursor:pointer !important;
 float:left;
 height:16px;
 margin:.1em 5px 0 0;
 padding:0;
 width:16px;
}

.form_description
{
 border-bottom:1px dotted #ccc;
 clear:both;
 display:inline-block;
 margin:0 0 1em;
}

.form_description[class]
{
 display:block;
}

.form_description h2
{
 clear:left;
 font-size:160%;
 font-weight:400;
 margin:0 0 3px;
}

.form_description p
{
 font-size:95%;
 line-height:130%;
 margin:0 0 12px;
}

form hr
{
 display:none;
}

form li.section_break
{
 border-top:1px dotted #ccc;
 margin-top:9px;
 padding-bottom:0;
 padding-left:9px;
 padding-top:13px;
 width:97% !important;
}

form ul li.first
{
 border-top:none !important;
 margin-top:0 !important;
 padding-top:0 !important;
}

form .section_break h3
{
 font-size:110%;
 font-weight:400;
 line-height:130%;
 margin:0 0 2px;
}

form .section_break p
{
 font-size:85%;

 margin:0 0 10px;
}

/**** Buttons ****/
input.button_text
{
 overflow:visible;
 padding:0 7px;
 width:auto;
}

.buttons input
{
 font-size:120%;
 margin-right:5px;
}

/**** Inputs and Labels ****/
label.description
{
 border:none;
 color:#222;
 display:block;
 font-size:95%;
 font-weight:700;
 line-height:150%;
 padding:0 0 1px;
}

span.symbol
{
 font-size:115%;
 line-height:130%;
}

input.text
{
 background:#fff url(../../../images/shadow.gif) repeat-x top;
 border-bottom:1px solid #ddd;
 border-left:1px solid #c3c3c3;
 border-right:1px solid #c3c3c3;
 border-top:1px solid #7c7c7c;
 color:#333;
 font-size:100%;
 margin:0;
 padding:2px 0;
}

input.file
{
 color:#333;
 font-size:100%;
 margin:0;
 padding:2px 0;
}

textarea.textarea
{
 background:#fff url(../../../images/shadow.gif) repeat-x top;
 border-bottom:1px solid #ddd;
 border-left:1px solid #c3c3c3;
 border-right:1px solid #c3c3c3;
 border-top:1px solid #7c7c7c;
 color:#333;
 font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
 font-size:100%;
 margin:0;
 width:99%;
}

select.select
{
 color:#333;
 font-size:100%;
 margin:1px 0;
 padding:1px 0 0;
 background:#fff url(../../../images/shadow.gif) repeat-x top;
 border-bottom:1px solid #ddd;
 border-left:1px solid #c3c3c3;
 border-right:1px solid #c3c3c3;
 border-top:1px solid #7c7c7c;
}


input.currency
{
 text-align:right;
}

input.checkbox
{
 display:block;
 height:13px;
 line-height:1.4em;
 margin:6px 0 0 3px;
 width:13px;
}

input.radio
{
 display:block;
 height:13px;
 line-height:1.4em;
 margin:6px 0 0 3px;
 width:13px;
}

label.choice
{
 color:#444;
 display:block;
 font-size:100%;
 line-height:1.4em;
 margin:-1.55em 0 0 25px;
 padding:4px 0 5px;
 width:90%;
}

select.select[class]
{
 margin:0;
 padding:1px 0;
}

*:first-child+html select.select[class]
{
 margin:1px 0;
}

.safari select.select
{
 font-size:120% !important;
 margin-bottom:1px;
}

input.small
{
 width:25%;
}

select.small
{
 width:25%;
}

input.medium
{
 width:50%;
}

select.medium
{
 width:50%;
}

input.large
{
 width:99%;
}

select.large
{
 width:100%;
}

textarea.small
{
 height:5.5em;
}

textarea.medium
{
 height:10em;
}

textarea.large
{
 height:20em;
}

/**** Errors ****/
#error_message
{
 background:#fff;
 border:1px dotted red;
 margin-bottom:1em;
 padding-left:0;
 padding-right:0;
 padding-top:4px;
 text-align:center;
 width:99%;
}

#error_message_title
{
 color:#DF0000;
 font-size:125%;
 margin:7px 0 5px;
 padding:0;
}

#error_message_desc
{
 color:#000;
 font-size:100%;
 margin:0 0 .8em;
}

#error_message_desc strong
{
 background-color:#FFDFDF;
 color:red;
 padding:2px 3px;
}

form li.error
{
 background-color:#FFDFDF !important;
 border-bottom:1px solid #EACBCC;
 border-right:1px solid #EACBCC;
 margin:3px 0;
}

form li.error label
{
 color:#DF0000 !important;
}

form p.error
{
 clear:both;
 color:red;
 font-size:10px;
 font-weight:700;
 margin:0 0 5px;
}

form .required
{
 color:red;
 float:none;
 font-weight:700;
}

/**** Guidelines and Error Highlight ****/
form li.highlighted
{
 background-color:#fff7c0;
}

form .guidelines
{
 background:#f5f5f5;
 border:1px solid #e6e6e6;
 color:#444;
 font-size:80%;
 left:100%;
 line-height:130%;
 margin:0 0 0 8px;
 padding:8px 10px 9px;
 position:absolute;
 top:0;
 visibility:hidden;
 width:42%;
 z-index:1000;
}

form .guidelines small
{
 font-size:105%;
}

form li.highlighted .guidelines
{
 visibility:visible;
}

form li:hover .guidelines
{
 visibility:visible;
}

.no_guidelines .guidelines
{
 display:none !important;
}

.no_guidelines form li
{
 width:97%;
}

.no_guidelines li.section
{
 padding-left:9px;
}

/*** Success Message ****/
.form_success
{
 clear: both;
 margin: 0;
 padding: 90px 0pt 100px;
 text-align: center
}

.form_success h2 {
    clear:left;
    font-size:160%;
    font-weight:normal;
    margin:0pt 0pt 3px;
}

/*** Password ****/
ul.password{
    margin-top:60px;
    margin-bottom: 60px;
    text-align: center;
}
.password h2{
    color:#DF0000;
    font-weight:bold;
    margin:0pt auto 10px;
}

.password input.text {
   font-size:170% !important;
   width:380px;
   text-align: center;
}
.password label{
   display:block;
   font-size:120% !important;
   padding-top:10px;
   font-weight:bold;
}

#li_captcha{
   padding-left: 5px;
}


#li_captcha span{
 float:none;
}

/** Embedded Form **/

.embed #form_container{
 border: none;
}

.embed #top, .embed #bottom, .embed h1{
 display: none;
}

.embed #form_container{
 width: 100%;
}

.embed #footer{
 text-align: left;
 padding-left: 10px;
 width: 99%;
}

.embed #footer.success{
 text-align: center;
}

.embed form.appnitro
{
 margin:0px 0px 0;
 
}



/*** Calendar **********************/
div.calendar { position: relative; }

.calendar table {
cursor:pointer;
border:1px solid #ccc;
font-size: 11px;
color: #000;
background: #fff;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

.calendar .button {
text-align: center;    
padding: 2px;          
}

.calendar .nav {
background:#f5f5f5;
}

.calendar thead .title {
font-weight: bold;      
text-align: center;
background: #dedede;
color: #000;
padding: 2px 0 3px 0;
}

.calendar thead .headrow {
background: #f5f5f5;
color: #444;
font-weight:bold;
}

.calendar thead .daynames {
background: #fff;
color:#333;
font-weight:bold;
}

.calendar thead .name {
border-bottom: 1px dotted #ccc;
padding: 2px;
text-align: center;
color: #000;
}

.calendar thead .weekend {
color: #666;
}

.calendar thead .hilite {
background-color: #444;
color: #fff;
padding: 1px;
}

.calendar thead .active {
background-color: #d12f19;
color:#fff;
padding: 2px 0px 0px 2px;
}


.calendar tbody .day {
width:1.8em;
color: #222;
text-align: right;
padding: 2px 2px 2px 2px;
}
.calendar tbody .day.othermonth {
font-size: 80%;
color: #bbb;
}
.calendar tbody .day.othermonth.oweekend {
color: #fbb;
}

.calendar table .wn {
padding: 2px 2px 2px 2px;
border-right: 1px solid #000;
background: #666;
}

.calendar tbody .rowhilite td {
background: #FFF1AF;
}

.calendar tbody .rowhilite td.wn {
background: #FFF1AF;
}

.calendar tbody td.hilite {
padding: 1px 1px 1px 1px;
background:#444 !important;
color:#fff !important;
}

.calendar tbody td.active {
color:#fff;
background: #529214 !important;
padding: 2px 2px 0px 2px;
}

.calendar tbody td.selected {
font-weight: bold;
border: 1px solid #888;
padding: 1px 1px 1px 1px;
background: #f5f5f5 !important;
color: #222 !important;
}

.calendar tbody td.weekend {
color: #666;
}

.calendar tbody td.today {
font-weight: bold;
color: #529214;
background:#D9EFC2;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell {
visibility: hidden;
}

.calendar tbody .emptyrow {
display: none;
}

.calendar tfoot .footrow {
text-align: center;
background: #556;
color: #fff;
}

.calendar tfoot .ttip {
background: #222;
color: #fff;
font-size:10px;
border-top: 1px solid #dedede;
padding: 3px;
}

.calendar tfoot .hilite {
background: #aaf;
border: 1px solid #04f;
color: #000;
padding: 1px;
}

.calendar tfoot .active {
background: #77c;
padding: 2px 0px 0px 2px;
}

.calendar .combo {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
border: 1px solid #ccc;
background: #f5f5f5;
color: #222;
font-size: 90%;
z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
text-align: center;
padding: 1px;
}

.calendar .combo .label-IEfix {
width: 4em;
}

.calendar .combo .hilite {
background: #444;
color:#fff;
}

.calendar .combo .active {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
background: #dedede;
font-weight: bold;
}


</style>
<script type="text/javascript" src="view.js"></script>

</head>
<body id="main_body" >
 
<img id="top" src="top.png" alt="">
 <div id="form_container">
 

<h1><a>La prétention.</a></h1>

 <div class="form_description">
 <h2>La prétention.</h2>
 <p>Voici le formulaire à compléter et à soumettre pour pouvoir officialiser votre prétention.</p>
 </div>



<script type="text/javascript">
function envoiMessage(form)
{


// Créer un message à partir des informations fournies

var txt_message ="<center><br /><div style='line-height: 10px;'>"
+ "<span style='font-size: 29px; font-family: Time New Roman; color: #BABABA; text-transform: uppercase;'>Vae</span>\n"
+ "<span style='font-size: 29px; font-family: Monotype Corsiva; color: #531014; margin-left: 100px;'>Victis</span></div>\n\n"

+ "[color=#ffffff][b]Nom du Habbo : [/b][/color]" + form.element_1.value+"\n"
+ "[color=#ffffff][b]Nom de tes clones: [/b][/color]" + form.element_2.value + "\n"
+ "[color=#ffffff][b]Date d'arrivée sur Habbo: [/b][/color]" + form.element_3.value + "\n"  
+ "[color=#ffffff][b]Début dans le monde mafieux : [/b][/color]"+ form.element_4.value + "\n"
+ "[color=#ffffff][b]Passé mafieux : [/b][/color]" + form.element_5.value + "\n"
 + "[color=#ffffff][b]Comment as-tu connu Vae Victis ? :[/b][/color] " + form.element_9.value + '\n'
 + "[color=#ffffff][b]Pourquoi avoir choisi Vae Victis ? :[/b][/color] " + form.element_6.value + '\n'
 + "[color=#ffffff][b]Fréquentes-tu des mafieux sur Habbo ? Si oui, lesquels en particulier ? :[/b][/color] " + form.element_7.value + '\n'
 + "[color=#ffffff][b]Quelles sont tes activités en dehors du RPG mafieux sur Habbo ? :[/b][/color] " + form.element_8.value + '\n'
 + "[color=#ffffff][b]Aimes-tu travailler en équipe ?  :[/b][/color] " + form.element_10.value + '\n
 + "[color=#ffffff][b]Sais-tu prendre une capture d'écran (un screen) ? :[/b][/color] " + form.element_11.value + '\n
 + "[color=#ffffff][b]Sais-tu effectuer un saccage correctement ? :[/b][/color] " + form.element_12.value + '\n;

// Insère le texte construit dans le champ caché "message" du formulaire

form.message.value = txt_message;
form.subject.value =  form.titre.value;
return true;
}

</script>

<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" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="6" /> <!--  ID du forum dans lequel le message sera posté -->


<ul >
<label class for="titre">Titre du sujet :</label> <input type="text" name="subject" id="titre" value="" size="45" maxlength="60" />
 

<li id="li_1" >
 <label class="description" for="element_1">Nom du Habbo. </label>
 <div>
 <input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_1"><small>Quel est le nom de ton Habbo ?</small></p>
</li>


 <li id="li_2" >
 <label class="description" for="element_2">Noms de tes clones. </label>
 <div>
 <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_2"><small>Quels sont tes autres comptes clones ? Indique les à la suite en les séparant par une virgule.</small></p>
</li>


<li id="li_3" >
 <label class="description" for="element_3">Date d'arrivée sur Habbo. </label>
 <div>
 <input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_3"><small>Depuis quand es-tu sur Habbo ?</small></p>
</li>


<li id="li_4" >
 <label class="description" for="element_4">Début dans le monde mafieux. </label>
 <div>
 <input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_4"><small>Quand as-tu débuté dans le monde mafieux ?</small></p>
</li>

<li id="li_5" >
 <label class="description" for="element_5">Passé mafieux. </label>
 <div>
 <input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_5"><small>Quels sont tes antécédents mafieux ? Indique nous les organisations que tu as fréquentées en mentionnant entre parenthèses le grade atteint.</small></p>
</li>


 <li id="li_9" >
 <label class="description" for="element_9">Comment as-tu connu Vae Victis ? </label>
 <span>
 <input id="element_9_1" name="element_9" class="element radio" type="radio" value="1" />
<label class="choice" for="element_9_1">Par un ami</label>
<input id="element_9_2" name="element_9" class="element radio" type="radio" value="2" />
<label class="choice" for="element_9_2">Par hasard en te baladant sur l'hôtel</label>
<input id="element_9_3" name="element_9" class="element radio" type="radio" value="3" />
<label class="choice" for="element_9_3">Sur un autre forum</label>
<input id="element_9_4" name="element_9" class="element radio" type="radio" value="4" />
<label class="choice" for="element_9_4">En voyant un saccage Vae Victis sur l'hôtel</label>
<input id="element_9_5" name="element_9" class="element radio" type="radio" value="5" />
<label class="choice" for="element_9_5">Autre</label>
</span><p class="guidelines" id="guide_9"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>


<li id="li_6" >
 <label class="description" for="element_6">Pourquoi avoir choisi Vae Victis ? </label>
 <div>
 <input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_6"><small>Explique nous pourquoi tu as décidé de prétendre à rejoindre Vae Victis plutôt qu'une autre organisation.</small></p>
</li>



<li id="li_7" >
 <label class="description" for="element_7">Fréquentes-tu des mafieux sur Habbo ? Si oui, lesquels en particulier ? </label>
 <div>
 <input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_7"><small>Indique nous si tu fréquentes des mafieux sur l'hôtel.</small></p>
</li>



<li id="li_8" >
 <label class="description" for="element_8">Quelles sont tes activités en dehors du RPG mafieux sur Habbo ? </label>
 <div>
 <input id="element_8" name="element_8" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_8"><small>Indique nous si tu as d'autres passe-temps sur Habbo que le RPG mafieux (casino, troc, sport...).</small></p>
</li>


 <li id="li_10" >
 <label class="description" for="element_10">Aimes-tu travailler en équipe ? </label>
 <span>
 <input id="element_10_1" name="element_10" class="element radio" type="radio" value="1" />
<label class="choice" for="element_10_1">Oui</label>
<input id="element_10_2" name="element_10" class="element radio" type="radio" value="2" />
<label class="choice" for="element_10_2">Non</label>
<input id="element_10_3" name="element_10" class="element radio" type="radio" value="3" />
<label class="choice" for="element_10_3">Sans avis</label>

 </span><p class="guidelines" id="guide_10"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>



<li id="li_11" >
 <label class="description" for="element_11">Sais-tu prendre une capture d'écran (un screen) ? </label>
 <span>
 <input id="element_11_1" name="element_11" class="element radio" type="radio" value="1" />
<label class="choice" for="element_11_1">Oui</label>
<input id="element_11_2" name="element_11" class="element radio" type="radio" value="2" />
<label class="choice" for="element_11_2">Non</label>

 </span><p class="guidelines" id="guide_11"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>



 <li id="li_12" >
 <label class="description" for="element_12">Sais-tu effectuer un saccage correctement ? </label>
 <span>
 <input id="element_12_1" name="element_12" class="element radio" type="radio" value="1" />
<label class="choice" for="element_12_1">Oui</label>
<input id="element_12_2" name="element_12" class="element radio" type="radio" value="2" />
<label class="choice" for="element_12_2">Non</label>

 </span><p class="guidelines" id="guide_12"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>
</form>

 

<center><fieldset><legend>Création du post</legend><li class="buttons">

<input type="submit" name="post" value="Soumettre !" />
<input type="reset" name="post" value="Recommencer" />
</fieldset></center></li>
 </ul>
 </form>
</div>
 </body>
</html>


Dernière édition par Testeur94 le Mer 23 Oct 2013 - 23:14, édité 1 fois

Testeur94
Nouveau membre

Messages : 12
Inscrit(e) le : 06/07/2013

http://123jetest.forumactif.org/
Testeur94 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [Formulaire] "Vous devez entrer un message avant de poster."

Message par Testeur94 le Mer 23 Oct 2013 - 16:56

Up !

Testeur94
Nouveau membre

Messages : 12
Inscrit(e) le : 06/07/2013

http://123jetest.forumactif.org/
Testeur94 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [Formulaire] "Vous devez entrer un message avant de poster."

Message par Testeur94 le Mer 23 Oct 2013 - 20:09

Ah ça y est, j'y suis enfin arriver
Mais le seul soucis à présent c'est que je ne sais pas comment gérer les checkbox ( afficher uniquement le choix qu'on a cocher...)

Voici le code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>La prétention.</title>
<style type="text/css">
body
{
 background:#222222;
 font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
 font-size:small;
 margin:8px 0 16px;
 text-align:center;
}

#form_container
{
 background:#fff;
 
margin:0 auto;
 text-align:left;
 width:640px;
}

#top
{
 display:block;
 height:10px;
 margin:10px auto 0;
 width:650px;
}

#footer
{
 width:640px;
 clear:both;
 color:#999999;
 text-align:center;
 width:640px;
 padding-bottom: 15px;
 font-size: 85%;
}

#footer a{
 color:#999999;
 text-decoration: none;
 border-bottom: 1px dotted #999999;
}

#bottom
{
 display:block;
 height:10px;
 margin:0 auto;
 width:650px;
}

form.appnitro
{
 margin:20px 20px 0;
 padding:0 0 20px;
}

/**** Logo Section  *****/
h1
{
 background-color:#444444;
 margin:0;
 min-height:0;
 padding:0;
 text-decoration:none;
 text-indent:-8000px;
 
}

h1 a
{
 
display:block;
 height:100%;
 min-height:40px;
 overflow:hidden;
}


img
{
 behavior:url(css/iepngfix.htc);
 border:none;
}


/**** Form Section ****/
.appnitro
{
 font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
 font-size:small;
}

.appnitro li
{
 width:61%;
}

form ul
{
 font-size:100%;
 list-style-type:none;
 margin:0;
 padding:0;
 width:100%;
}

form li
{
 display:block;
 margin:0;
 padding:4px 5px 2px 9px;
 position:relative;
}

form li:after
{
 clear:both;
 content:".";
 display:block;
 height:0;
 visibility:hidden;
}

.buttons:after
{
 clear:both;
 content:".";
 display:block;
 height:0;
 visibility:hidden;
}

.buttons
{
 clear:both;
 display:block;
 margin-top:10px;
}

* html form li
{
 height:1%;
}

* html .buttons
{
 height:1%;
}

* html form li div
{
 display:inline-block;
}

form li div
{
 color:#444;
 margin:0 4px 0 0;
 padding:0 0 8px;
}

form li span
{
 color:#444;
 float:left;
 margin:0 4px 0 0;
 padding:0 0 8px;
}

form li div.left
{
 display:inline;
 float:left;
 width:48%;
}

form li div.right
{
 display:inline;
 float:right;
 width:48%;
}

form li div.left .medium
{
 width:100%;
}

form li div.right .medium
{
 width:100%;
}

.clear
{
 clear:both;
}

form li div label
{
 clear:both;
 color:#444;
 display:block;
 font-size:9px;
 line-height:9px;
 margin:0;
 padding-top:3px;
}

form li span label
{
 clear:both;
 color:#444;
 display:block;
 font-size:9px;
 line-height:9px;
 margin:0;
 padding-top:3px;
}

form li .datepicker
{
 cursor:pointer !important;
 float:left;
 height:16px;
 margin:.1em 5px 0 0;
 padding:0;
 width:16px;
}

.form_description
{
 border-bottom:1px dotted #ccc;
 clear:both;
 display:inline-block;
 margin:0 0 1em;
}

.form_description[class]
{
 display:block;
}

.form_description h2
{
 clear:left;
 font-size:160%;
 font-weight:400;
 margin:0 0 3px;
}

.form_description p
{
 font-size:95%;
 line-height:130%;
 margin:0 0 12px;
}

form hr
{
 display:none;
}

form li.section_break
{
 border-top:1px dotted #ccc;
 margin-top:9px;
 padding-bottom:0;
 padding-left:9px;
 padding-top:13px;
 width:97% !important;
}

form ul li.first
{
 border-top:none !important;
 margin-top:0 !important;
 padding-top:0 !important;
}

form .section_break h3
{
 font-size:110%;
 font-weight:400;
 line-height:130%;
 margin:0 0 2px;
}

form .section_break p
{
 font-size:85%;

 margin:0 0 10px;
}

/**** Buttons ****/
input.button_text
{
 overflow:visible;
 padding:0 7px;
 width:auto;
}

.buttons input
{
 font-size:120%;
 margin-right:5px;
}

/**** Inputs and Labels ****/
label.description
{
 border:none;
 color:#222;
 display:block;
 font-size:95%;
 font-weight:700;
 line-height:150%;
 padding:0 0 1px;
}

span.symbol
{
 font-size:115%;
 line-height:130%;
}

input.text
{
 background:#fff url(../../../images/shadow.gif) repeat-x top;
 border-bottom:1px solid #ddd;
 border-left:1px solid #c3c3c3;
 border-right:1px solid #c3c3c3;
 border-top:1px solid #7c7c7c;
 color:#333;
 font-size:100%;
 margin:0;
 padding:2px 0;
}

input.file
{
 color:#333;
 font-size:100%;
 margin:0;
 padding:2px 0;
}

textarea.textarea
{
 background:#fff url(../../../images/shadow.gif) repeat-x top;
 border-bottom:1px solid #ddd;
 border-left:1px solid #c3c3c3;
 border-right:1px solid #c3c3c3;
 border-top:1px solid #7c7c7c;
 color:#333;
 font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
 font-size:100%;
 margin:0;
 width:99%;
}

select.select
{
 color:#333;
 font-size:100%;
 margin:1px 0;
 padding:1px 0 0;
 background:#fff url(../../../images/shadow.gif) repeat-x top;
 border-bottom:1px solid #ddd;
 border-left:1px solid #c3c3c3;
 border-right:1px solid #c3c3c3;
 border-top:1px solid #7c7c7c;
}


input.currency
{
 text-align:right;
}

input.checkbox
{
 display:block;
 height:13px;
 line-height:1.4em;
 margin:6px 0 0 3px;
 width:13px;
}

input.radio
{
 display:block;
 height:13px;
 line-height:1.4em;
 margin:6px 0 0 3px;
 width:13px;
}

label.choice
{
 color:#444;
 display:block;
 font-size:100%;
 line-height:1.4em;
 margin:-1.55em 0 0 25px;
 padding:4px 0 5px;
 width:90%;
}

select.select[class]
{
 margin:0;
 padding:1px 0;
}

*:first-child+html select.select[class]
{
 margin:1px 0;
}

.safari select.select
{
 font-size:120% !important;
 margin-bottom:1px;
}

input.small
{
 width:25%;
}

select.small
{
 width:25%;
}

input.medium
{
 width:50%;
}

select.medium
{
 width:50%;
}

input.large
{
 width:99%;
}

select.large
{
 width:100%;
}

textarea.small
{
 height:5.5em;
}

textarea.medium
{
 height:10em;
}

textarea.large
{
 height:20em;
}

/**** Errors ****/
#error_message
{
 background:#fff;
 border:1px dotted red;
 margin-bottom:1em;
 padding-left:0;
 padding-right:0;
 padding-top:4px;
 text-align:center;
 width:99%;
}

#error_message_title
{
 color:#DF0000;
 font-size:125%;
 margin:7px 0 5px;
 padding:0;
}

#error_message_desc
{
 color:#000;
 font-size:100%;
 margin:0 0 .8em;
}

#error_message_desc strong
{
 background-color:#FFDFDF;
 color:red;
 padding:2px 3px;
}

form li.error
{
 background-color:#FFDFDF !important;
 border-bottom:1px solid #EACBCC;
 border-right:1px solid #EACBCC;
 margin:3px 0;
}

form li.error label
{
 color:#DF0000 !important;
}

form p.error
{
 clear:both;
 color:red;
 font-size:10px;
 font-weight:700;
 margin:0 0 5px;
}

form .required
{
 color:red;
 float:none;
 font-weight:700;
}

/**** Guidelines and Error Highlight ****/
form li.highlighted
{
 background-color:#fff7c0;
}

form .guidelines
{
 background:#f5f5f5;
 border:1px solid #e6e6e6;
 color:#444;
 font-size:80%;
 left:100%;
 line-height:130%;
 margin:0 0 0 8px;
 padding:8px 10px 9px;
 position:absolute;
 top:0;
 visibility:hidden;
 width:42%;
 z-index:1000;
}

form .guidelines small
{
 font-size:105%;
}

form li.highlighted .guidelines
{
 visibility:visible;
}

form li:hover .guidelines
{
 visibility:visible;
}

.no_guidelines .guidelines
{
 display:none !important;
}

.no_guidelines form li
{
 width:97%;
}

.no_guidelines li.section
{
 padding-left:9px;
}

/*** Success Message ****/
.form_success
{
 clear: both;
 margin: 0;
 padding: 90px 0pt 100px;
 text-align: center
}

.form_success h2 {
    clear:left;
    font-size:160%;
    font-weight:normal;
    margin:0pt 0pt 3px;
}

/*** Password ****/
ul.password{
    margin-top:60px;
    margin-bottom: 60px;
    text-align: center;
}
.password h2{
    color:#DF0000;
    font-weight:bold;
    margin:0pt auto 10px;
}

.password input.text {
  font-size:170% !important;
  width:380px;
  text-align: center;
}
.password label{
  display:block;
  font-size:120% !important;
  padding-top:10px;
  font-weight:bold;
}

#li_captcha{
  padding-left: 5px;
}


#li_captcha span{
 float:none;
}

/** Embedded Form **/

.embed #form_container{
 border: none;
}

.embed #top, .embed #bottom, .embed h1{
 display: none;
}

.embed #form_container{
 width: 100%;
}

.embed #footer{
 text-align: left;
 padding-left: 10px;
 width: 99%;
}

.embed #footer.success{
 text-align: center;
}

.embed form.appnitro
{
 margin:0px 0px 0;
 
}



/*** Calendar **********************/
div.calendar { position: relative; }

.calendar table {
cursor:pointer;
border:1px solid #ccc;
font-size: 11px;
color: #000;
background: #fff;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

.calendar .button {
text-align: center;   
padding: 2px;         
}

.calendar .nav {
background:#f5f5f5;
}

.calendar thead .title {
font-weight: bold;     
text-align: center;
background: #dedede;
color: #000;
padding: 2px 0 3px 0;
}

.calendar thead .headrow {
background: #f5f5f5;
color: #444;
font-weight:bold;
}

.calendar thead .daynames {
background: #fff;
color:#333;
font-weight:bold;
}

.calendar thead .name {
border-bottom: 1px dotted #ccc;
padding: 2px;
text-align: center;
color: #000;
}

.calendar thead .weekend {
color: #666;
}

.calendar thead .hilite {
background-color: #444;
color: #fff;
padding: 1px;
}

.calendar thead .active {
background-color: #d12f19;
color:#fff;
padding: 2px 0px 0px 2px;
}


.calendar tbody .day {
width:1.8em;
color: #222;
text-align: right;
padding: 2px 2px 2px 2px;
}
.calendar tbody .day.othermonth {
font-size: 80%;
color: #bbb;
}
.calendar tbody .day.othermonth.oweekend {
color: #fbb;
}

.calendar table .wn {
padding: 2px 2px 2px 2px;
border-right: 1px solid #000;
background: #666;
}

.calendar tbody .rowhilite td {
background: #FFF1AF;
}

.calendar tbody .rowhilite td.wn {
background: #FFF1AF;
}

.calendar tbody td.hilite {
padding: 1px 1px 1px 1px;
background:#444 !important;
color:#fff !important;
}

.calendar tbody td.active {
color:#fff;
background: #529214 !important;
padding: 2px 2px 0px 2px;
}

.calendar tbody td.selected {
font-weight: bold;
border: 1px solid #888;
padding: 1px 1px 1px 1px;
background: #f5f5f5 !important;
color: #222 !important;
}

.calendar tbody td.weekend {
color: #666;
}

.calendar tbody td.today {
font-weight: bold;
color: #529214;
background:#D9EFC2;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell {
visibility: hidden;
}

.calendar tbody .emptyrow {
display: none;
}

.calendar tfoot .footrow {
text-align: center;
background: #556;
color: #fff;
}

.calendar tfoot .ttip {
background: #222;
color: #fff;
font-size:10px;
border-top: 1px solid #dedede;
padding: 3px;
}

.calendar tfoot .hilite {
background: #aaf;
border: 1px solid #04f;
color: #000;
padding: 1px;
}

.calendar tfoot .active {
background: #77c;
padding: 2px 0px 0px 2px;
}

.calendar .combo {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
border: 1px solid #ccc;
background: #f5f5f5;
color: #222;
font-size: 90%;
z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
text-align: center;
padding: 1px;
}

.calendar .combo .label-IEfix {
width: 4em;
}

.calendar .combo .hilite {
background: #444;
color:#fff;
}

.calendar .combo .active {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
background: #dedede;
font-weight: bold;
}


</style>
<script type="text/javascript" src="view.js"></script>

</head>
<body id="main_body" >
 
<img id="top" src="top.png" alt="">
 <div id="form_container">
 

<h1><a>La prétention.</a></h1>

 <div class="form_description">
 <h2>La prétention.</h2>
 <p>Voici le formulaire à compléter et à soumettre pour pouvoir officialiser votre prétention.</p>
 </div>



<script type="text/javascript">
function envoiMessage(form)
{


// Créer un message à partir des informations fournies

var txt_message ="<center><br /><div style='line-height: 10px;'>\n"
+ "<span style='font-size: 29px; font-family: Time New Roman; color: #BABABA; text-transform: uppercase;'>Vae</span>\n"
+ "<span style='font-size: 29px; font-family: Monotype Corsiva; color: #531014; margin-left: 100px;'>Victis</span></div>\n\n"
+ "[color=#ffffff][b]Nom du Habbo : [/b][/color]" + form.element_1.value+"\n\n\n"
+ "[color=#ffffff][b]Nom de tes clones: [/b][/color]" + form.element_2.value + "\n\n\n"
+ "[color=#ffffff][b]Date d'arrivée sur Habbo: [/b][/color]" + form.element_3.value + "\n\n\n" 
+ "[color=#ffffff][b]Début dans le monde mafieux : [/b][/color]"+ form.element_4.value + "\n\n\n"
+ "[color=#ffffff][b]Passé mafieux : [/b][/color]" + form.element_5.value + "\n\n\n"
+ "[color=#ffffff][b]Comment as-tu connu Vae Victis ? :[/b][/color] " + form.element_9.value + "\n\n\n"
+ "[color=#ffffff][b]Pourquoi avoir choisi Vae Victis ? :[/b][/color] " + form.element_6.value + "\n\n\n"
+ "[color=#ffffff][b]Fréquentes-tu des mafieux sur Habbo ? Si oui, lesquels en particulier ? :[/b][/color] " + form.element_7.value + "\n\n\n"
 + "[color=#ffffff][b]Quelles sont tes activités en dehors du RPG mafieux sur Habbo ? :[/b][/color] " + form.element_8.value + "\n\n\n"
 + "[color=#ffffff][b]Aimes-tu travailler en équipe ?  :[/b][/color] " + form.element_10.value + "\n\n\n"
 + "[color=#ffffff][b]Sais-tu prendre une capture d'écran (un screen) ? :[/b][/color] " + form.element_11.value + "\n\n\n"
 + "[color=#ffffff][b]Sais-tu effectuer un saccage correctement ? :[/b][/color] " + form.element_12.value + "\n\n\n";

// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}

</script>
</head>

<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" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="6" /> <!--  ID du forum dans lequel le message sera posté -->


<ul >
<label class for="titre">Titre du sujet :</label> <input type="text" name="subject" id="titre" value="" size="45" maxlength="60" />
 

<li id="li_1" >
 <label class="description" for="element_1">Nom du Habbo. </label>
 <div>
 <input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_1"><small>Quel est le nom de ton Habbo ?</small></p>
</li>


 <li id="li_2" >
 <label class="description" for="element_2">Noms de tes clones. </label>
 <div>
 <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_2"><small>Quels sont tes autres comptes clones ? Indique les à la suite en les séparant par une virgule.</small></p>
</li>


<li id="li_3" >
 <label class="description" for="element_3">Date d'arrivée sur Habbo. </label>
 <div>
 <input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_3"><small>Depuis quand es-tu sur Habbo ?</small></p>
</li>


<li id="li_4" >
 <label class="description" for="element_4">Début dans le monde mafieux. </label>
 <div>
 <input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_4"><small>Quand as-tu débuté dans le monde mafieux ?</small></p>
</li>

<li id="li_5" >
 <label class="description" for="element_5">Passé mafieux. </label>
 <div>
 <input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_5"><small>Quels sont tes antécédents mafieux ? Indique nous les organisations que tu as fréquentées en mentionnant entre parenthèses le grade atteint.</small></p>
</li>


 <li id="li_9" >
 <label class="description" for="element_9">Comment as-tu connu Vae Victis ? </label>
 <span>
 <input id="element_9_1" name="element_9" class="element radio" type="radio" value="1" />
<label class="choice" for="element_9_1">Par un ami</label>
<input id="element_9_2" name="element_9" class="element radio" type="radio" value="2" />
<label class="choice" for="element_9_2">Par hasard en te baladant sur l'hôtel</label>
<input id="element_9_3" name="element_9" class="element radio" type="radio" value="3" />
<label class="choice" for="element_9_3">Sur un autre forum</label>
<input id="element_9_4" name="element_9" class="element radio" type="radio" value="4" />
<label class="choice" for="element_9_4">En voyant un saccage Vae Victis sur l'hôtel</label>
<input id="element_9_5" name="element_9" class="element radio" type="radio" value="5" />
<label class="choice" for="element_9_5">Autre</label>
</span><p class="guidelines" id="guide_9"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>


<li id="li_6" >
 <label class="description" for="element_6">Pourquoi avoir choisi Vae Victis ? </label>
 <div>
 <input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_6"><small>Explique nous pourquoi tu as décidé de prétendre à rejoindre Vae Victis plutôt qu'une autre organisation.</small></p>
</li>



<li id="li_7" >
 <label class="description" for="element_7">Fréquentes-tu des mafieux sur Habbo ? Si oui, lesquels en particulier ? </label>
 <div>
 <input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_7"><small>Indique nous si tu fréquentes des mafieux sur l'hôtel.</small></p>
</li>



<li id="li_8" >
 <label class="description" for="element_8">Quelles sont tes activités en dehors du RPG mafieux sur Habbo ? </label>
 <div>
 <input id="element_8" name="element_8" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_8"><small>Indique nous si tu as d'autres passe-temps sur Habbo que le RPG mafieux (casino, troc, sport...).</small></p>
</li>


 <li id="li_10" >
 <label class="description" for="element_10">Aimes-tu travailler en équipe ? </label>
 <span>
 <input id="element_10_1" name="element_10" class="element radio" type="radio" value="1" />
<label class="choice" for="element_10_1">Oui</label>
<input id="element_10_2" name="element_10" class="element radio" type="radio" value="2" />
<label class="choice" for="element_10_2">Non</label>
<input id="element_10_3" name="element_10" class="element radio" type="radio" value="3" />
<label class="choice" for="element_10_3">Sans avis</label>

 </span><p class="guidelines" id="guide_10"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>



<li id="li_11" >
 <label class="description" for="element_11">Sais-tu prendre une capture d'écran (un screen) ? </label>
 <span>
 <input id="element_11_1" name="element_11" class="element radio" type="radio" value="1" />
<label class="choice" for="element_11_1">Oui</label>
<input id="element_11_2" name="element_11" class="element radio" type="radio" value="2" />
<label class="choice" for="element_11_2">Non</label>

 </span><p class="guidelines" id="guide_11"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>



 <li id="li_12" >
 <label class="description" for="element_12">Sais-tu effectuer un saccage correctement ? </label>
 <span>
 <input id="element_12_1" name="element_12" class="element radio" type="radio" value="1" />
<label class="choice" for="element_12_1">Oui</label>
<input id="element_12_2" name="element_12" class="element radio" type="radio" value="2" />
<label class="choice" for="element_12_2">Non</label>

 </span><p class="guidelines" id="guide_12"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>
</form>

 

<center><fieldset><legend>Création du post</legend><li class="buttons">

<input type="submit" name="post" value="Soumettre !" />
<input type="reset" name="post" value="Recommencer" />
</fieldset></center></li>
 </ul>
 </form>
</div>
 </body>
</html>

Testeur94
Nouveau membre

Messages : 12
Inscrit(e) le : 06/07/2013

http://123jetest.forumactif.org/
Testeur94 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [Formulaire] "Vous devez entrer un message avant de poster."

Message par pierre du 31 le Mer 23 Oct 2013 - 21:31

Code:
+ "<strong>Un titre</strong>\n<ul>";
for(var i = 0; i < form.gouts1.length; i++)
{
if(form.gouts1[i].checked == true) { txt_message = txt_message + '<li>' + form.gouts1[i].value + '\n'; }
}
à mettre dans le javascript


Et dans la partie html x)
Code:
<input type="checkbox" name="identifiant1" value ="1" id="1" /> <label for="1">1</label>
<input type="checkbox" name="identifiant2" value ="2 id="2" /> <label for="2">2</label>
<input type="checkbox" name="identifiant3" value ="3" id="3" /> <label for="3">3/label>
avatar

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [Formulaire] "Vous devez entrer un message avant de poster."

Message par Scoubifitz le Mer 23 Oct 2013 - 22:03

Bonsoir,

voilà :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>La prétention.</title>
<style type="text/css">
body
{
background:#222222;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:small;
margin:8px 0 16px;
text-align:center;
}

#form_container
{
background:#fff;

margin:0 auto;
text-align:left;
width:640px;
}

#top
{
display:block;
height:10px;
margin:10px auto 0;
width:650px;
}

#footer
{
width:640px;
clear:both;
color:#999999;
text-align:center;
width:640px;
padding-bottom: 15px;
font-size: 85%;
}

#footer a{
color:#999999;
text-decoration: none;
border-bottom: 1px dotted #999999;
}

#bottom
{
display:block;
height:10px;
margin:0 auto;
width:650px;
}

form.appnitro
{
margin:20px 20px 0;
padding:0 0 20px;
}

/**** Logo Section  *****/
h1
{
background-color:#444444;
margin:0;
min-height:0;
padding:0;
text-decoration:none;
text-indent:-8000px;
}

h1 a
{
display:block;
height:100%;
min-height:40px;
overflow:hidden;
}

img
{
behavior:url(css/iepngfix.htc);
border:none;
}

/**** Form Section ****/
.appnitro
{
font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
font-size:small;
}

.appnitro li
{
width:61%;
}

form ul
{
font-size:100%;
list-style-type:none;
margin:0;
padding:0;
width:100%;
}

form li
{
display:block;
margin:0;
padding:4px 5px 2px 9px;
position:relative;
}

form li:after
{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}

.buttons:after
{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}

.buttons
{
clear:both;
display:block;
margin-top:10px;
}

* html form li
{
height:1%;
}

* html .buttons
{
height:1%;
}

* html form li div
{
display:inline-block;
}

form li div
{
color:#444;
margin:0 4px 0 0;
padding:0 0 8px;
}

form li span
{
color:#444;
float:left;
margin:0 4px 0 0;
padding:0 0 8px;
}

form li div.left
{
display:inline;
float:left;
width:48%;
}

form li div.right
{
display:inline;
float:right;
width:48%;
}

form li div.left .medium
{
width:100%;
}

form li div.right .medium
{
width:100%;
}

.clear
{
clear:both;
}

form li div label
{
clear:both;
color:#444;
display:block;
font-size:9px;
line-height:9px;
margin:0;
padding-top:3px;
}

form li span label
{
clear:both;
color:#444;
display:block;
font-size:9px;
line-height:9px;
margin:0;
padding-top:3px;
}

form li .datepicker
{
cursor:pointer !important;
float:left;
height:16px;
margin:.1em 5px 0 0;
padding:0;
width:16px;
}

.form_description
{
border-bottom:1px dotted #ccc;
clear:both;
display:inline-block;
margin:0 0 1em;
}

.form_description[class]
{
display:block;
}

.form_description h2
{
clear:left;
font-size:160%;
font-weight:400;
margin:0 0 3px;
}

.form_description p
{
font-size:95%;
line-height:130%;
margin:0 0 12px;
}

form hr
{
display:none;
}

form li.section_break
{
border-top:1px dotted #ccc;
margin-top:9px;
padding-bottom:0;
padding-left:9px;
padding-top:13px;
width:97% !important;
}

form ul li.first
{
border-top:none !important;
margin-top:0 !important;
padding-top:0 !important;
}

form .section_break h3
{
font-size:110%;
font-weight:400;
line-height:130%;
margin:0 0 2px;
}

form .section_break p
{
font-size:85%;

margin:0 0 10px;
}

/**** Buttons ****/
input.button_text
{
overflow:visible;
padding:0 7px;
width:auto;
}

.buttons input
{
font-size:120%;
margin-right:5px;
}

/**** Inputs and Labels ****/
label.description
{
border:none;
color:#222;
display:block;
font-size:95%;
font-weight:700;
line-height:150%;
padding:0 0 1px;
}

span.symbol
{
font-size:115%;
line-height:130%;
}

input.text
{
background:#fff url(../../../images/shadow.gif) repeat-x top;
border-bottom:1px solid #ddd;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-top:1px solid #7c7c7c;
color:#333;
font-size:100%;
margin:0;
padding:2px 0;
}

input.file
{
color:#333;
font-size:100%;
margin:0;
padding:2px 0;
}

textarea.textarea
{
background:#fff url(../../../images/shadow.gif) repeat-x top;
border-bottom:1px solid #ddd;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-top:1px solid #7c7c7c;
color:#333;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
margin:0;
width:99%;
}

select.select
{
color:#333;
font-size:100%;
margin:1px 0;
padding:1px 0 0;
background:#fff url(../../../images/shadow.gif) repeat-x top;
border-bottom:1px solid #ddd;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-top:1px solid #7c7c7c;
}

input.currency
{
text-align:right;
}

input.checkbox
{
display:block;
height:13px;
line-height:1.4em;
margin:6px 0 0 3px;
width:13px;
}

input.radio
{
display:block;
height:13px;
line-height:1.4em;
margin:6px 0 0 3px;
width:13px;
}

label.choice
{
color:#444;
display:block;
font-size:100%;
line-height:1.4em;
margin:-1.55em 0 0 25px;
padding:4px 0 5px;
width:90%;
}

select.select[class]
{
margin:0;
padding:1px 0;
}

*:first-child+html select.select[class]
{
margin:1px 0;
}

.safari select.select
{
font-size:120% !important;
margin-bottom:1px;
}

input.small
{
width:25%;
}

select.small
{
width:25%;
}

input.medium
{
width:50%;
}

select.medium
{
width:50%;
}

input.large
{
width:99%;
}

select.large
{
width:100%;
}

textarea.small
{
height:5.5em;
}

textarea.medium
{
height:10em;
}

textarea.large
{
height:20em;
}

/**** Errors ****/
#error_message
{
background:#fff;
border:1px dotted red;
margin-bottom:1em;
padding-left:0;
padding-right:0;
padding-top:4px;
text-align:center;
width:99%;
}

#error_message_title
{
color:#DF0000;
font-size:125%;
margin:7px 0 5px;
padding:0;
}

#error_message_desc
{
color:#000;
font-size:100%;
margin:0 0 .8em;
}

#error_message_desc strong
{
background-color:#FFDFDF;
color:red;
padding:2px 3px;
}

form li.error
{
background-color:#FFDFDF !important;
border-bottom:1px solid #EACBCC;
border-right:1px solid #EACBCC;
margin:3px 0;
}

form li.error label
{
color:#DF0000 !important;
}

form p.error
{
clear:both;
color:red;
font-size:10px;
font-weight:700;
margin:0 0 5px;
}

form .required
{
color:red;
float:none;
font-weight:700;
}

/**** Guidelines and Error Highlight ****/
form li.highlighted
{
background-color:#fff7c0;
}

form .guidelines
{
background:#f5f5f5;
border:1px solid #e6e6e6;
color:#444;
font-size:80%;
left:70%;
line-height:130%;
margin:0 0 0 8px;
padding:8px 10px 9px;
position:absolute;
top:0;
visibility:hidden;
width:42%;
z-index:1000;
}

form .guidelines small
{
font-size:105%;
}

form li.highlighted .guidelines
{
visibility:visible;
}

form li:hover .guidelines
{
visibility:visible;
}

.no_guidelines .guidelines
{
display:none !important;
}

.no_guidelines form li
{
width:97%;
}

.no_guidelines li.section
{
padding-left:9px;
}

/*** Success Message ****/
.form_success
{
clear: both;
margin: 0;
padding: 90px 0pt 100px;
text-align: center
}

.form_success h2 {
clear:left;
font-size:160%;
font-weight:normal;
margin:0pt 0pt 3px;
}

/*** Password ****/
ul.password{
margin-top:60px;
margin-bottom: 60px;
text-align: center;
}
.password h2{
color:#DF0000;
font-weight:bold;
margin:0pt auto 10px;
}

.password input.text {
font-size:170% !important;
width:380px;
text-align: center;
}
.password label{
display:block;
font-size:120% !important;
padding-top:10px;
font-weight:bold;
}

#li_captcha{
padding-left: 5px;
}

#li_captcha span{
float:none;
}

/** Embedded Form **/

.embed #form_container{
border: none;
}

.embed #top, .embed #bottom, .embed h1{
display: none;
}

.embed #form_container{
width: 100%;
}

.embed #footer{
text-align: left;
padding-left: 10px;
width: 99%;
}

.embed #footer.success{
text-align: center;
}

.embed form.appnitro
{
margin:0px 0px 0;

}

/*** Calendar **********************/
div.calendar { position: relative; }

.calendar table {
cursor:pointer;
border:1px solid #ccc;
font-size: 11px;
color: #000;
background: #fff;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

.calendar .button {
text-align: center; 
padding: 2px;       
}

.calendar .nav {
background:#f5f5f5;
}

.calendar thead .title {
font-weight: bold;   
text-align: center;
background: #dedede;
color: #000;
padding: 2px 0 3px 0;
}

.calendar thead .headrow {
background: #f5f5f5;
color: #444;
font-weight:bold;
}

.calendar thead .daynames {
background: #fff;
color:#333;
font-weight:bold;
}

.calendar thead .name {
border-bottom: 1px dotted #ccc;
padding: 2px;
text-align: center;
color: #000;
}

.calendar thead .weekend {
color: #666;
}

.calendar thead .hilite {
background-color: #444;
color: #fff;
padding: 1px;
}

.calendar thead .active {
background-color: #d12f19;
color:#fff;
padding: 2px 0px 0px 2px;
}

.calendar tbody .day {
width:1.8em;
color: #222;
text-align: right;
padding: 2px 2px 2px 2px;
}
.calendar tbody .day.othermonth {
font-size: 80%;
color: #bbb;
}
.calendar tbody .day.othermonth.oweekend {
color: #fbb;
}

.calendar table .wn {
padding: 2px 2px 2px 2px;
border-right: 1px solid #000;
background: #666;
}

.calendar tbody .rowhilite td {
background: #FFF1AF;
}

.calendar tbody .rowhilite td.wn {
background: #FFF1AF;
}

.calendar tbody td.hilite {
padding: 1px 1px 1px 1px;
background:#444 !important;
color:#fff !important;
}

.calendar tbody td.active {
color:#fff;
background: #529214 !important;
padding: 2px 2px 0px 2px;
}

.calendar tbody td.selected {
font-weight: bold;
border: 1px solid #888;
padding: 1px 1px 1px 1px;
background: #f5f5f5 !important;
color: #222 !important;
}

.calendar tbody td.weekend {
color: #666;
}

.calendar tbody td.today {
font-weight: bold;
color: #529214;
background:#D9EFC2;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell {
visibility: hidden;
}

.calendar tbody .emptyrow {
display: none;
}

.calendar tfoot .footrow {
text-align: center;
background: #556;
color: #fff;
}

.calendar tfoot .ttip {
background: #222;
color: #fff;
font-size:10px;
border-top: 1px solid #dedede;
padding: 3px;
}

.calendar tfoot .hilite {
background: #aaf;
border: 1px solid #04f;
color: #000;
padding: 1px;
}

.calendar tfoot .active {
background: #77c;
padding: 2px 0px 0px 2px;
}

.calendar .combo {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
border: 1px solid #ccc;
background: #f5f5f5;
color: #222;
font-size: 90%;
z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
text-align: center;
padding: 1px;
}

.calendar .combo .label-IEfix {
width: 4em;
}

.calendar .combo .hilite {
background: #444;
color:#fff;
}

.calendar .combo .active {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
background: #dedede;
font-weight: bold;
}

</style>
<script type="text/javascript" src="view.js"></script>

<script type="text/javascript">
function envoiMessage(form)
{

// Créer un message à partir des informations fournies
var element_9 = "";
if(form.element_9[0].checked == true)
element_9 = "Par un ami";
else if(form.element_9[1].checked == true)
element_9 = "Par hasard en te baladant sur l'hôtel";
else if(form.element_9[2].checked == true)
element_9 = "Sur un autre forum";
else if(form.element_9[4].checked == true)
element_9 = "En voyant un saccage Vae Victis sur l'hôtel";
else if(form.element_9[4].checked == true)
element_9 = "Autre";
 
var element_10 = "";
if(form.element_10[0].checked == true)
element_10 = " Oui";
else if(form.element_10[1].checked == true)
element_10 = "Non";
else if(form.element_10[2].checked == true)
element_10 = "Sans avis";

var element_11 = "";
if(form.element_11[0].checked == true)
element_11 = " Oui";
else if(form.element_11[1].checked == true)
element_11 = "Non";
 
var element_12 = "";
if(form.element_12[0].checked == true)
element_12 = " Oui";
else if(form.element_12[1].checked == true)
element_12 = "Non";
 
var txt_message ="<center><br /><div style='line-height: 10px;'>\n"
+ "<span style='font-size: 29px; font-family: Time New Roman; color: #BABABA; text-transform: uppercase;'>Vae</span>\n"
+ "<span style='font-size: 29px; font-family: Monotype Corsiva; color: #531014; margin-left: 100px;'>Victis</span></div>\n\n"
+ "[color=#ffffff][b]Nom du Habbo : [/b][/color]" + form.element_1.value+"\n\n\n"
+ "[color=#ffffff][b]Nom de tes clones: [/b][/color]" + form.element_2.value + "\n\n\n"
+ "[color=#ffffff][b]Date d'arrivée sur Habbo: [/b][/color]" + form.element_3.value + "\n\n\n"
+ "[color=#ffffff][b]Début dans le monde mafieux : [/b][/color]"+ form.element_4.value + "\n\n\n"
+ "[color=#ffffff][b]Passé mafieux : [/b][/color]" + form.element_5.value + "\n\n\n"
+ "[color=#ffffff][b]Comment as-tu connu Vae Victis ? :[/b][/color] " + element_9 + "\n\n\n"
+ "[color=#ffffff][b]Pourquoi avoir choisi Vae Victis ? :[/b][/color] " + form.element_6.value + "\n\n\n"
+ "[color=#ffffff][b]Fréquentes-tu des mafieux sur Habbo ? Si oui, lesquels en particulier ? :[/b][/color] " + form.element_7.value + "\n\n\n"
+ "[color=#ffffff][b]Quelles sont tes activités en dehors du RPG mafieux sur Habbo ? :[/b][/color] " + form.element_8.value + "\n\n\n"
+ "[color=#ffffff][b]Aimes-tu travailler en équipe ?  :[/b][/color] " + element_10 + "\n\n\n"
+ "[color=#ffffff][b]Sais-tu prendre une capture d'écran (un screen) ? :[/b][/color] " + element_11 + "\n\n\n"
+ "[color=#ffffff][b]Sais-tu effectuer un saccage correctement ? :[/b][/color] " + element_12 + "\n\n\n</center>";

// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}

</script>
</head>


<body id="main_body" >

<img id="top" src="top.png" alt="">
<div id="form_container">


<h1><a>La prétention.</a></h1>

<div class="form_description">
<h2>La prétention.</h2>
<p>Voici le formulaire à compléter et à soumettre pour pouvoir officialiser votre prétention.</p>
</div>

<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" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="6" /> <!--  ID du forum dans lequel le message sera posté -->


<ul >
<li>
<label class="description" for="titre">Titre du sujet :</label>
<div>
<input type="text" name="subject" id="titre" class="element text medium" maxlength="60" />
</div><p class="guidelines" id="guide_1"><small>Un titre , pas une déclaration d'amour !</small></p>
</li>

<li id="li_1" >
<label class="description" for="element_1">Nom du Habbo. </label>
<div>
<input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_1"><small>Quel est le nom de ton Habbo ?</small></p>
</li>

<li id="li_2" >
<label class="description" for="element_2">Noms de tes clones. </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_2"><small>Quels sont tes autres comptes clones ? Indique les à la suite en les séparant par une virgule.</small></p>
</li>

<li id="li_3" >
<label class="description" for="element_3">Date d'arrivée sur Habbo. </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_3"><small>Depuis quand es-tu sur Habbo ?</small></p>
</li>

<li id="li_4" >
<label class="description" for="element_4">Début dans le monde mafieux. </label>
<div>
<input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_4"><small>Quand as-tu débuté dans le monde mafieux ?</small></p>
</li>

<li id="li_5" >
<label class="description" for="element_5">Passé mafieux. </label>
<div>
<input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_5"><small>Quels sont tes antécédents mafieux ? Indique nous les organisations que tu as fréquentées en mentionnant entre parenthèses le grade atteint.</small></p>
</li>


<li id="li_9" >
<label class="description" for="element_9">Comment as-tu connu Vae Victis ? </label>
<span>
<input id="element_9_1" name="element_9" class="element radio" type="radio" value="1" />
<label class="choice" for="element_9_1">Par un ami</label>
<input id="element_9_2" name="element_9" class="element radio" type="radio" value="2" />
<label class="choice" for="element_9_2">Par hasard en te baladant sur l'hôtel</label>
<input id="element_9_3" name="element_9" class="element radio" type="radio" value="3" />
<label class="choice" for="element_9_3">Sur un autre forum</label>
<input id="element_9_4" name="element_9" class="element radio" type="radio" value="4" />
<label class="choice" for="element_9_4">En voyant un saccage Vae Victis sur l'hôtel</label>
<input id="element_9_5" name="element_9" class="element radio" type="radio" value="5" />
<label class="choice" for="element_9_5">Autre</label>
</span><p class="guidelines" id="guide_9"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>

<li id="li_6" >
<label class="description" for="element_6">Pourquoi avoir choisi Vae Victis ? </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_6"><small>Explique nous pourquoi tu as décidé de prétendre à rejoindre Vae Victis plutôt qu'une autre organisation.</small></p>
</li>

<li id="li_7" >
<label class="description" for="element_7">Fréquentes-tu des mafieux sur Habbo ? Si oui, lesquels en particulier ? </label>
<div>
<input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_7"><small>Indique nous si tu fréquentes des mafieux sur l'hôtel.</small></p>
</li>

<li id="li_8" >
<label class="description" for="element_8">Quelles sont tes activités en dehors du RPG mafieux sur Habbo ? </label>
<div>
<input id="element_8" name="element_8" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_8"><small>Indique nous si tu as d'autres passe-temps sur Habbo que le RPG mafieux (casino, troc, sport...).</small></p>
</li>

<li id="li_10" >
<label class="description" for="element_10">Aimes-tu travailler en équipe ? </label>
<span>
<input id="element_10_1" name="element_10" class="element radio" type="radio" value="1" />
<label class="choice" for="element_10_1">Oui</label>
<input id="element_10_2" name="element_10" class="element radio" type="radio" value="2" />
<label class="choice" for="element_10_2">Non</label>
<input id="element_10_3" name="element_10" class="element radio" type="radio" value="3" />
<label class="choice" for="element_10_3">Sans avis</label>

</span><p class="guidelines" id="guide_10"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>

<li id="li_11" >
<label class="description" for="element_11">Sais-tu prendre une capture d'écran (un screen) ? </label>
<span>
<input id="element_11_1" name="element_11" class="element radio" type="radio" value="1" />
<label class="choice" for="element_11_1">Oui</label>
<input id="element_11_2" name="element_11" class="element radio" type="radio" value="2" />
<label class="choice" for="element_11_2">Non</label>

</span><p class="guidelines" id="guide_11"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>

<li id="li_12" >
<label class="description" for="element_12">Sais-tu effectuer un saccage correctement ? </label>
<span>
<input id="element_12_1" name="element_12" class="element radio" type="radio" value="1" />
<label class="choice" for="element_12_1">Oui</label>
<input id="element_12_2" name="element_12" class="element radio" type="radio" value="2" />
<label class="choice" for="element_12_2">Non</label>

</span><p class="guidelines" id="guide_12"><small>Coche la réponse qui correspond à ta situation.</small></p>
</li>
</ul>

<center><fieldset><legend>Création du post</legend>

<input type="submit" name="post" value="Soumettre !" />
<input type="reset" name="post" value="Recommencer" />
</fieldset></center>
</form>
</div>
</div>
</body>
</html>
Dites moi si vous avez compris le principe ?

( ce sont des boutons radio , à choix unique , différents des checkboxs qui sont à choix multiple ... )
avatar

Scoubifitz
Membre actif

Masculin
Messages : 3600
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [Formulaire] "Vous devez entrer un message avant de poster."

Message par Testeur94 le Mer 23 Oct 2013 - 23:13

Ah oui, je vois vous êtes passer par des variables.
Merci à vous deux pour votre aide.

Testeur94
Nouveau membre

Messages : 12
Inscrit(e) le : 06/07/2013

http://123jetest.forumactif.org/
Testeur94 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum