Codage formulaire html

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

Résolu Codage formulaire html

Message par Mysticals le Mer 12 Mar 2014 - 16:00

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 http://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 !


Dernière édition par Mysticals le Jeu 13 Mar 2014 - 17:43, édité 1 fois

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage formulaire html

Message par Mysticals le Jeu 13 Mar 2014 - 14:02

Petit up ! Smile

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage formulaire html

Message par Scoubifitz le Jeu 13 Mar 2014 - 14:35

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 ?

Scoubifitz
+ Hyperactif +

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

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

Résolu Re: Codage formulaire html

Message par Mysticals le Jeu 13 Mar 2014 - 14:41

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 ).

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage formulaire html

Message par Scoubifitz le Jeu 13 Mar 2014 - 16:19

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>

Scoubifitz
+ Hyperactif +

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

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

Résolu Re: Codage formulaire html

Message par Mysticals le Jeu 13 Mar 2014 - 17:22

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 !

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage formulaire html

Message par Scoubifitz le Jeu 13 Mar 2014 - 17:38

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":"");


Scoubifitz
+ Hyperactif +

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

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

Résolu Re: Codage formulaire html

Message par Mysticals le Jeu 13 Mar 2014 - 17:42

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

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

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage formulaire html

Message par Scoubifitz le Jeu 13 Mar 2014 - 17:44

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);
}

Scoubifitz
+ Hyperactif +

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

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

Résolu Re: Codage formulaire html

Message par Mysticals le Jeu 13 Mar 2014 - 18:25

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

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals 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