Codage formulaire html

[Invité]

Salutation !

Alors après avoir lu, essayé et cannibalisé plusieurs formulaire, et à force de vouloir ajouter des options etc, je ne m'en sors plus et fini par avoir des choses inutilisables ou buggés à souhait. Donc je suis repartis sur une base simple, et je voudrais que l'on m'aide pour quelques ajouts / problèmes.

Voici mon code actuel :

Code:

<br/>
        <center>
        <form action="/post?mode=newtopic" method="post" name="post">
        <input type="hidden" name="topictype" value="0" checked="checked" />
        <input type="hidden" name="f" value="3"/>
        
       <input type="text" size="33" class="post" name="subject" value="( Entrez le nom de votre personnage )" />
        <br/><br/>

<textarea cols="150%" rows="1" class="post" name="message" "font-weight:bold">- Prénom : </textarea>
          
<br/><br/><textarea cols="150%" rows="1" class="post" name="message" "font-weight:bold">- Age : </textarea>
          
<br/><br/><textarea cols="150%" rows="1" class="post" name="message" "font-weight:bold">- Localisation : </textarea>
          
<br/><br/><textarea cols="150%" rows="2" class="post" name="message" "font-weight:bold">- Activités : </textarea>
          
<br/><br/><textarea cols="150%" rows="3" class="post" name="message" "font-weight:bold">- Expérience "The Elder Scrolls" : </textarea>
          
<br/><br/><textarea cols="150%" rows="5" class="post" name="message" "font-weight:bold">- Divers : </textarea>
          
<br/><br/><textarea cols="150%" rows="1" class="post" name="message" "font-weight:bold">- Photo ( facultatif ) : </textarea>
        
<br/><br/>
        
       <input type="submit" name="post" class="Valider" value="       " />
        
       <input type="reset" name="post" class="Recommencer" value="           " />
        
       <br/><br/></form>
        
       </center>

<object style="width: 1px; height: 1px;">
<param id="movie" value="http://www.youtube.com/v/5NgJAKWH__4&autoplay=1" />
<embed style="width: 1px; height: 1px;" src="http://www.youtube.com/v/5NgJAKWH__4&autoplay=1" type="application/x-shockwave-flash" />
</object>

D'une par, je voudrais supprimer la ligne :

Code:

<input type="text" size="33" class="post" name="subject" value="( Entrez le nom de votre personnage )" />

Pour qu'as la place, le titre soit directement le nom de l'auteur. J'ai essayer avec { USERNAME } ( sans les espaces bien sur ) mais ça me l'écrit en texte au lieu de le remplacer par le nom.

Ensuite, au niveau des contenus, je voudrais que le texte déjà écrit soit verrouillé, c'est à dire que dans :

Code:

<textarea cols="150%" rows="1" class="post" name="message" "font-weight:bold">- Prénom : </textarea>

On ne puisse pas supprimer prénom.

Et pour finir, lorsque je valide, le message ne se poste qu'avec le dernier <textarea... Les autres ne sont pas pris en compte.

Ps : Pour information, j'ai essayer de m'adapter avec ce formulaire https://forum.forumactif.com/t280246-formulaire#2492238, mais soit les cases de remplissage ont un fond blanc donc illisible, soit il ne fonctionne pas du tout, ou je ne sais plus quel autre erreurs, d'ou le fait que je suis partis sur une forme plus simple.

Merci en tout cas !

[Invité]

Petit up !

[Scoubifitz]

Bonjour,

Le formulaire sera-t-il sur une page HTML , sans le haut et bas du forum ?

La permission des formulaires est-elle activée ?

Y-a-t-il une mise en forme spéciale lors de l'envoi ?

[Invité]

Salut et merci de prendre en compte mon sujet.

Alors le formulaire est bien sur une page html ( http://ultima-nova.forumactif.org/h2-presentation je ne sais pas si tu le verra ) avec le haut est le bas du forum, les formulaires sont bien autorisés et pour l'instant, pas de mise en forme particulières ( peu être mettre les "titres" genre Prénom, age, etc en gras, mais c'est pas l’essentiel ).

[Scoubifitz]

on va donc y aller petit à petit ...

Remplacez entièrement votre code par celui ci :

Code:

<style type="text/css">
#fiche h2,#fiche #send{
text-align: center;
}
#fiche {
width: 450px;
margin:auto;
padding:1px 20px;
background:rgba(0,0,0,0.2);
}
#fiche label{
display:inline-block;
width: 130px;
}
#fiche input[type=text]:focus,
#fiche textarea:focus {
background:#cccccc;
}
</style>
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<script type="text/javascript">
function envoi(form){

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

var txt_message = "Prénom : " + form.prenom.value +"\n\n"
+ "Age :  " + form.age.value +"\n\n"
+ "Localisation : " + form.localise.value +"\n\n"
+ "Activités : " + form.activite.value +"\n\n"
+ "Expérience \"The Elder Scrolls\" : " + form.experience.value +"\n\n"
+ "Divers : " + form.diver.value +"\n\n"
+ (form.photo.value ? "Photo :  [img]" + form.photo.value +"[/img]\n\n":"");

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

form.message.value = txt_message;
}
</script>
<div id="fiche">
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoi(this)">
<input type="hidden" name="lt" value="0" />
<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="3"/>
<input type="hidden" name="subject" value="" class="USERNAME" />

<h2>Bonjour <span class="USERNAME"> </span></h2>

<p><label>Prénom : </label><input type="text" size="40" name="prenom" /></p>

<p><label>Age : </label><input type="text" size="10" name="age" /></p>

<p><label>Localisation : </label><input type="text" size="40" name="localise" /></p>

<p>Activités : <br /><textarea cols="55" rows="2" name="activite"></textarea></p>

<p>Expérience "The Elder Scrolls" : <br /><textarea cols="55" rows="3" name="experience"></textarea></p>

<p>Divers : <br /><textarea cols="55" rows="5" name="diver"></textarea></p>

<p><label>Photo (facultatif ) : </label><input type="text" size="40" name="photo" placeholder="http//:liendelimage.jpg"/></p>

<p id="send"><input type="submit" name="post" class="Valider" value="       " />
<input type="reset" name="post" class="Recommencer" value="           " /></p>

</form>
</div>
<object style="width: 1px; height: 1px;">
<param id="movie" value="http://www.youtube.com/v/5NgJAKWH__4&autoplay=1" />
<embed style="width: 1px; height: 1px;" src="http://www.youtube.com/v/5NgJAKWH__4&autoplay=1" type="application/x-shockwave-flash" />
</object>

[Invité]

Nickel, merci !

Il reste 1 détail, donc j'ai changer la couleur lorsque l'on est dans un champ ( c'était #cccccc; dans votre code ), mais il y a toujours le fait que autres champs sont blanc, j'aurais voulu pouvoir choisir la couleur. Car du texte blanc sur fond blanc, pas top pour se relire.



Et une dernière chose si possible, que les titres ( prénoms, age, etc ) se mettent automatiquement en gras une fois le message posté.

Après ces 2 détails, c'est parfait !

[Scoubifitz]

pour le premier point , rajouter ceci au CSS incorporé à la page HTML :

ce code met les champs avec un fond sombre

Code:


#fiche input[type=text],
#fiche textarea {
background:#222222;
}

pour le 2e point , il faut modifier le script d'envoi :

remplacez :

Code:

var txt_message = "Prénom : " + form.prenom.value +"\n\n"
+ "Age :  " + form.age.value +"\n\n"
+ "Localisation : " + form.localise.value +"\n\n"
+ "Activités : " + form.activite.value +"\n\n"
+ "Expérience \"The Elder Scrolls\" : " + form.experience.value +"\n\n"
+ "Divers : " + form.diver.value +"\n\n"
+ (form.photo.value ? "Photo :  [img]" + form.photo.value +"[/img]\n\n":"");

par :

Code:

var txt_message = "[b]Prénom : [/b]" + form.prenom.value +"\n\n"
+ "[b]Age :  [/b]" + form.age.value +"\n\n"
+ "[b]Localisation : [/b]" + form.localise.value +"\n\n"
+ "[b]Activités : [/b]" + form.activite.value +"\n\n"
+ "[b]Expérience \"The Elder Scrolls\" : [/b]" + form.experience.value +"\n\n"
+ "[b]Divers : [/b]" + form.diver.value +"\n\n"
+ (form.photo.value ? "[b]Photo :  [/b][img]" + form.photo.value +"[/img]\n\n":"");

[Invité]

Super, c'est exactement ce que je souhaitais, merci !

Votre statut de Méritactif est bien mérité !

[Scoubifitz]

dernier point ,

remplacez le début du CSS de la page html par ceci :

Code:

#fiche {
width: 460px;
margin:auto;
padding:1px 20px;
background:rgba(0,0,0,0.6);
}

[Invité]

C'est fait, testé et approuvé, merci encore !