Encore une histoire de formulaire

[Alexiel111]

Bonjour...

Voilà, alors déjà, je suis... GRANDE novice dans se domaine, donc désolé si mes questions semble... Stupide, et certaines le seront.

J’essaie d'apprendre comme une grande à faire un formulaire. J'ai utilisé pour ça Se site

Puis j'ai essayé de le compléter avec [url=https://forum.forumactif.com/t280246-formulaire#2492238]Lui...Mais là, je comprends plus rien...

Déjà... Ca se met où... un formulaire... (je vous l'avez bien dit...) J'ai essayé dans nouvelle pages HTML mais ca marche pas, j'ai juste un gros blanc... Désolé ><

Merci d'avance

Alexiel

[Invité]

Bonjour,
Je ne peut pas vous aidez se soir mais commencez par expliquer ce que vous voulez faire, nous mettre votre code source.
Merci d'avance

[Alexiel111]

Bah j'aimerai faire différent formulaire. Donc je m'entraine avec un tout bête et classique en fait, pour savoir comment on fait.

Code:

<form method="post" action="http://epistolaria.forumactif.com/posting.forum">
  <p>
<label for="pseudo">Pseudo</label> : <input type="text" name="pseudo" id="pseudo" tabindex="10"/>
<label for="beau">Fait il beau ?</label><br />
<textarea name="beau" id="beau" tabindex="20"/>
Comment je peux le savoir</textarea>

Coche s'il fait
<input type="checkbox" name="bof" id="bof" tabindex="30"/> <label for="bof">Un peu</label>
<input type="checkbox" name="soleil" id="soleil" /> <label for="soleil">Beau</label
</p>
<p><input type="submit" />
</p>
</form>


[Scoubifitz]

bonjour,

Créer une page HTML:

à partir de là on peut faire des essais ...

[Alexiel111]

Voilà, j'ai crée ma page. Mais après je fais éditer, je rentre mon code et ca marche pas...

[Scoubifitz]

bien ! ^^

puisque votre page est créée , remplacez "a b c" par votre code et validez !

ça ne veut pas dire que ça marchera , mais au moins vous verrez votre formulaire !

(pour que ça marche , il y a des corrections à apporter ... mais chaque chose en son temps ...)

une fois validé , cliquez sur "prévisualisation" pour le voir ...

[Alexiel111]

Bah justement... Je vois..... Rien/ Un espace Vide

Edit: Ah si voila... Mon pc qui rame ><

[Scoubifitz]

ça dépend du navigateur ...

Firefox a auto-corrigé les erreurs que vous avez mises dans le code ,
je ne sais pas si les autres navigateurs en font autant ...

on va déjà corriger les quelques lignes de code ...

<form method="post" action="http://epistolaria.forumactif.com/posting.forum">
<p>
<label for="pseudo">Pseudo</label> : <input type="text" name="pseudo" id="pseudo" tabindex="10"/>
<label for="beau">Fait il beau ?</label><br />
<textarea name="beau" id="beau" tabindex="20"/>
Comment je peux le savoir</textarea>

Coche s'il fait
<input type="checkbox" name="bof" id="bof" tabindex="30"/> <label for="bof">Un peu</label>
<input type="checkbox" name="soleil" id="soleil" /> <label for="soleil">Beau</label
</p>
<p><input type="submit" />
</p>
</form>

- les "tabindex" sont facultatives , elles permettent de tabuler d'un champ à
l'autre avec la touche "tab" dans l'ordre d'indexage fourni ...

- le textarea a une balise ouvrante et fermante , donc il ne faut pas mettre
de slash à la fermeture de la première balise

- il manque le crochet fermant du label "soleil" ...

- il est préférable de mettre une dimension au textarea ,
nombres de caractères (cols) , nombre de lignes (rows) (voir en dessous)

- ainsi que des "values" pour récupérer les valeurs du formulaire ...

<form method="post" action="http://epistolaria.forumactif.com/posting.forum">
<p>
<label for="pseudo">Pseudo</label> :
<input type="text" name="pseudo" id="pseudo" value="" /><br />

<label for="beau">Fait il beau ?</label><br />
<textarea name="beau" id="beau" rows="4" cols="50" value="">
Comment je peux le savoir</textarea><br />

Coche s'il fait
<input type="checkbox" name="bof" id="bof" value="bof" /> <label for="bof">Un peu</label>
<input type="checkbox" name="soleil" id="soleil" value="Beau" /> <label for="soleil">Beau</label>
</p>
<p><input type="submit" /></p>
</form>

ce n'est qu'une première étape !^^

une fois qu'on a définit les valeurs , il faut les récupérer dans un script , et les transmettre ...

[Alexiel111]

Voilà corrigé. Mais une question. Ca sert à quoi les /br ? (oui, je les ai mit parce qu'ils étaient dans le code explicatif)

[Scoubifitz]

les "br" sont des retour à la ligne (en HTML) (en anglais : breakline = bris de ligne)

j'en ai rajouté dans le 2e code ...

on continue ?

[Alexiel111]

Oki merci

Voui on continue o/

[Scoubifitz]

on continue sur l'exemple ...

il faut donc récupérer 4 valeurs ...

dernière mise au point , pour récupérer une liste des "checkboxs" ,
elles doivent avoir le même nom (name) ...

<form method="post" action="http://epistolaria.forumactif.com/posting.forum">
<p>
<label for="pseudo">Pseudo</label> :
<input type="text" name="pseudo" id="pseudo" value="" /><br />

<label for="beau">Fait il beau ?</label><br />
<textarea name="beau" id="beau" rows="4" cols="50" value="">
Comment je peux le savoir</textarea><br />

Coche s'il fait
<input type="checkbox" name="temps" id="bof" value="bof" /> <label for="bof">Un peu</label>
<input type="checkbox" name="temps" id="soleil" value="Beau" /> <label for="soleil">Beau</label>
</p>
<p><input type="submit" /></p>
</form>

passons au script , il doit contenir le message à envoyer à partir des valeurs recueillies ...

donc ouverture-fermeture de la balise "script" ,

définition d'une variable qui contient le message ,

dire que cette variable et égale à la valeur à envoyer ...

------------------

on voit ça demain ?

[Alexiel111]

xD.

Si tu veux. Je vais chercher de mon coté histoire de facilité la tâche (et ressortir mes cours qui doivent être... Quelque part)

[Scoubifitz]

re,

je disais donc , le script ...

le script renferme une fonction d'envoi ...

Cette fonction contient le message et les valeurs recueillies du formulaire ...

nous avons donc :

form.pseudo.value
form.beau.value

qui sont des valeurs simples et :

form.temps.value

qui peut contenir plusieurs valeurs ...

on lui rajoute donc une variable " i " qui va gérer le nombre de cases pouvant être cochées ...

Code:

<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[b]Pseudo :[/b] " + form.pseudo.value + '\n'
+ "[b]Fait-il beau ? :[/b] " + form.beau.value + '\n'
+ "[b]Comment est le temps ? :[/b] ";
for(var i = 0; i < form.temps.length; i++)
{
if(form.temps[i].checked == true) { txt_message += form.temps[i].value + " "; }
}
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>

Allez ! on pose les questions avant de passer au dernier chapitre !^^

[Alexiel111]

Alors...

Je comprends le côté "logique pur" If, for etc...

Donc la en fait, c'est comment ressortira les réponses ? Je vois les balises b etc...

Qu'est ce que /n ?

Donc si j'ai bien compris, form permet de faire des 'groupe' ?
Que représente les + partout ? C'est de la logique donc "ou" ou pas ? (pareil pour le .)

J'ai du mal à comprendre

for(var i = 0; i < form.temps.length; i++)

et là

if(form.temps[i].checked == true) { txt_message += form.temps[i].value + " "; }

Si je comprends bien, c'est si la box 'temps' est coché, c'est vrai. Mais 'temps' admet deux réponses non ?

[Scoubifitz]

Qu'est ce que /n ?

hihi ! d'abord , c'est \n (et pas /n) , et c'est une commande retour à la ligne en javascript ...
donc le texte envoyé aura un retour à la ligne là où on placera le \n ...

en clair :

"il était \n une fois , \n un prince charmant\n "

devient après envoi :

"il était
une fois ,
un prince charmant
"

Donc si j'ai bien compris, form permet de faire des 'groupe' ?

le "form" de form.pseudo.value va dire au script de chercher dans le formulaire , entre les balises <form></form> ,
la valeur (value) entrée dans le champ "pseudo"

Que représente les + partout ? C'est de la logique donc "ou" ou pas ? (pareil pour le .)

tout ce qui est texte sera entre guillemets , il faut rajouter à ce texte les valeurs du formulaire (avec des + )

on a donc : "texte" + valeur + "texte"
mettre un + sur la ligne en dessous permet d'aérer l'écriture du script ...

J'ai du mal à comprendre

for(var i = 0; i < form.temps.length; i++)

"Pour une variable " i " égale à zéro , inférieure au nombre de cases avec le nom "temps" , vérifier tous les nombres"

et là

if(form.temps[i].checked == true) { txt_message += form.temps[i].value + " "; }

Si je comprends bien, c'est si la box 'temps' est coché, c'est vrai. Mais 'temps' admet deux réponses non ?

si la première case "temps" est cochée , i=0 sera vrai
si la deuxième case "temps" est cochée , i=1 sera vrai
si la troisième case "temps" est cochée , i=2 sera vrai ...

donc si form.temps[0].checked == true , le "text_message" sera

égal au "text_message"+ la valeur de la première case (form.temps[0].value)

donc si form.temps[0].checked et form.temps[1].checked == true , le "text_message" sera

égal au "text_message"+ la valeur des 2 cases (form.temps[0].value + form.temps[1].value)

[Alexiel111]

Ok je commence à comprendre!

On peut suivre !

(enfin.. Juste, i++ ?)

[Scoubifitz]

Ok je commence à comprendre!

On peut suivre !

(enfin.. Juste, i++ ?)

i++ est l'incrémentation entre i=0 et i < au nombre de cases ...

---

il nous reste à voir comment envoyer , où envoyer , par quel moyen envoyer ... le message .

c'est là que la balise "form" prend toute son importance ...

cette balise contient l'ordre de transmission , la méthode et l'adresse ...

elle dit que , si le bouton "envoyer" (de type submit) est cliqué ,

la balise utilise la fonction envoiMessage qu'elle envoie dans un post ...

il s'en suit des champs cachés pour préciser l'endroit exact (n° du forum , nouveau topic ...)...
le titre du sujet (caché ou non ) ...

<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(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="1" />

<input type="hidden" name="subject" value="test de formulaire" />

.....

<input type="submit" name="post" value="Envoyer" />
</form>

[Alexiel111]

Ok.. je pense suivre.

Mais euh.. Question bête... dans quel ordre je met tout ça oO. Quoi va ou

[Scoubifitz]

maintenant qu'on a tous les éléments , on met ça dans l'ordre ..

- script
- formulaire
- champs à remplir
- bouton envoi

Code:

<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[b]Pseudo :[/b] " + form.pseudo.value + '\n'
+ "[b]Fait-il beau ? :[/b] " + form.beau.value + '\n'
+ "[b]Comment est le temps ? :[/b] ";
for(var i = 0; i < form.temps.length; i++)
{
if(form.temps[i].checked == true) { txt_message += form.temps[i].value + " "; }
}
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>

<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(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="1" />

<input type="hidden" name="subject" value="test de formulaire" />
<p>
<label for="pseudo">Pseudo</label> :
<input type="text" name="pseudo" id="pseudo" value="" /><br />

<label for="beau">Fait il beau ?</label><br />
<textarea name="beau" id="beau" rows="4" cols="50" value="">
Comment je peux le savoir</textarea><br />

Coche s'il fait
<input type="checkbox" name="temps" id="bof" value="bof" /> <label for="bof">Un peu</label>
<input type="checkbox" name="temps" id="soleil" value="Beau" /> <label for="soleil">Beau</label>
</p>
<p><input type="submit" name="post" value="Envoyer" /></p>
</form>

voilà un code basique et fonctionnel ...

[Alexiel111]

Merci beaucoup !
Mais... Ca marche pas...>< quand je vais sur la page du code j'ai... Le code...

[Scoubifitz]

quand vous mettez le code dans la page HTML , le signe :+html: doit être visible ! ^^

si c'est le signe :-html: , cliquez dessus pour changer de version , puis recollez le code ..

[Alexiel111]

Ah oui, y'a du mieux...

Mais j'ai ca

Comment je peux le savoir<br />

Coche s'il fait
<input type="checkbox" name="temps" id="bof" value="bof" /> <label for="bof">Un peu</label>
<input type="checkbox" name="temps" id="soleil" value="Beau" /> <label for="soleil">Beau</label>
</p>
<p><input type="submit" name="post" value="Envoyer" /></p>
</form>
</html></td><td valign="top" width="0"><div id="emptyidright"></div></td></tr></tbody></table></div></div><!--
close div id="page-body" --><div id="page-footer"><div align="center"><div class="gen"><strong><a href="/admin/index.forum?part=admin&tid=0c85d3906cd01e5d873bed661dce777f">Panneau d'administration</a></sctong><br /><br /><strong><a href="https://www.forumactif.com/forum-gratuit" target="_blank" class="copyright">Forum gratuit</a></strong> | <span class="gensmall">©</span> <a href="https://www.forumactif.com/fr/phpbb/" target="_blank" class="copyright">phpBB</a> | <a name="bottom" href="https://forum.forumactif.com/" target="_blank" class="copyright">Forum gratuit d'entraide</a> | <a name="bottom" href="/statistics" class="copyright" rel="nofollow">Statistiques</a> | <a name="bottom" href="/contact" class="copyright" rel="nofollow">Contact</a> | <a href="/abuse?page=%2Fpage_html.forum%3Fmode%3Dpreview&report=1" class="copyright" rel="nofollow">Signaler un abus</a></div></div></div></td></tr></table><script type="text/javascript">//<![CDATA[
fa_endpage();//]]></script></body></html>

Dans une case texte multiligne... Et pas le reste ^^"

[Scoubifitz]

maintenant que vous êtes en "vert" , effacez complètement ce qui est dans la page HTML et remplacez par le code suivant :

Code:

<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[b]Pseudo :[/b] " + form.pseudo.value + '\n'
+ "[b]Fait-il beau ? :[/b] " + form.beau.value + '\n'
+ "[b]Comment est le temps ? :[/b] ";
for(var i = 0; i < form.temps.length; i++)
{
if(form.temps[i].checked == true) { txt_message += form.temps[i].value + " "; }
}
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>

<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(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="1" />

<input type="hidden" name="subject" value="test de formulaire" />
<p>
<label for="pseudo">Pseudo</label> :
<input type="text" name="pseudo" id="pseudo" value="" />


<label for="beau">Fait il beau ?</label>

<textarea name="beau" id="beau" rows="4" cols="50" value="">
Comment je peux le savoir</textarea>


Coche s'il fait
<input type="checkbox" name="temps" id="bof" value="bof" /> <label for="bof">Un peu</label>
<input type="checkbox" name="temps" id="soleil" value="Beau" /> <label for="soleil">Beau</label>
</p>
<p><input type="submit" name="post" value="Envoyer" /></p>
</form>

vérifiez aussi que le haut et le bas du forum sont activés !^^

[Alexiel111]

Bah c'est ce que j'avais fait

Bref... Ca marche ! Mais y'a pas de saut de ligne ><

[Scoubifitz]

pouvez vous me donner l'adresse de la page HTML ?

[Alexiel111]

Oui bien sur

Ici

[Scoubifitz]

oups ! les "br" ont disparus ! ^^

code corrigé :

Code:

<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[b]Pseudo :[/b] " + form.pseudo.value + '\n'
+ "[b]Fait-il beau ? :[/b] " + form.beau.value + '\n'
+ "[b]Comment est le temps ? :[/b] ";
for(var i = 0; i < form.temps.length; i++)
{
if(form.temps[i].checked == true) { txt_message += form.temps[i].value + " "; }
}
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>

<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(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="1" />

<input type="hidden" name="subject" value="test de formulaire" />
<p>
<label for="pseudo">Pseudo</label> :
<input type="text" name="pseudo" id="pseudo" value="" /><br />

<label for="beau">Fait il beau ?</label><br />
<textarea name="beau" id="beau" rows="4" cols="50" value="">
Comment je peux le savoir</textarea><br />

Coche s'il fait
<input type="checkbox" name="temps" id="bof" value="bof" /> <label for="bof">Un peu</label>
<input type="checkbox" name="temps" id="soleil" value="Beau" /> <label for="soleil">Beau</label>
</p>
<p><input type="submit" name="post" value="Envoyer" /></p>
</form>

[Alexiel111]

Ouais ca marche o/

Bon ben maintenant je vais essayer de faire le test définitif (que je ferai corriger quand meme ^^)

Encore merci !