Besoin d'aide pour correction page HTML simple

le 15 octobre 2011

Bonjour,

Je me permets de poster aujourd'hui car je débute (complètement novice) dans la conception de ce type de page, et j'ai besoin d'aide. J'ai crée, pour un site, une page de changement d'adresse (un formulaire)dont voici la base :

Votre nom<br><input type="text" name="nom" size="20"><br>

Votre prénom<br><input type="text" name"prénom" size="20"><br>

Votre collectivité<br><select name="collectivité">

<option value="p1">Je ne sais pas

<option value="p2">Ville

<option value="p3">CA

<option value="p4">CCAS

<option value="p5">SIAD

<option value="p6">SDIS

<option value="p7">Retraité(e)

</select>

<br>

Votre nouvelle adresse<br><textarea name="adresse" cols=35 rows=3></textarea>

</span>

</form>

A noter que le code fonctionne bien.

Or cela ne me convenait pas tout à fait. J'ai voulu insérer un titre, et surtout, un code javascript pour vérifier que les champs étaient bien tous remplis avant l'envoi du formulaire. Voici la nouvelle mouture qui me pose donc problème :

<title>Formulaire de changement d'adresse</title><br>

Votre nom<br><input type="text" name="nom" size="20"><br>

Votre prénom<br><input type="text" name"prénom" size="20"><br>

Votre collectivité<br><select name="collectivité">

<option value="p1">Je ne sais pas

<option value="p2">Ville

<option value="p3">CA

<option value="p4">CCAS

<option value="p5">SIAD

<option value="p6">SDIS

<option value="p7">Retraité(e)

</select>

Votre nouvelle adresse<br><textarea name="adresse" cols=35 rows=3></textarea>

</span>

</form>

(j'ai également essayé avec ceci : <script type="text/javascript" src="testForm.js"> en mettant mon code javascript à part dans un fichier intitulé "testForm.js" , sans résultat)

function testNom(form) {

var data=form.nom.value

if (data=="")

{alert("Saisissez votre nom");return false}

else

{return true}

function testPrenom(form) {

var data=form.prénom.value

if (data=="")

{alert("Saisissez votre prénom");return false}

else

{return true}

function testCollectivite(form) {

var data=form.collectivité.value

if (data=="")

{alert("Choisissez votre collectivité");return false}

else

{return true}

function testAdresse(form) {

var data=form.adresse.value

if (data=="")

{alert(Saisissez votre nouvelle adresse");return false}

else

{return true}

function testForm(form) {

if (testNom(form))

{if (testPrenom(form))

{if (testCollectivite(form))

{if (testAdresse(form)) {form.submit()}}}

}

// -->

</script>

Que ce soit ainsi, ou en ayant déplacé mon script (testForm.js), j'ai toujours le même résultat. A savoir :

Le titre (formulaire de changement d'adresse) ne s'affiche pas, et en cliquant sur le bouton "envoyer", plus rien ne se passe, pas même un message d'erreur...

Je "sèche" et compte sur une bonne âme charitable pour me corriger mon code et m'expliquer mon (ou mes) erreur, car c'est aussi le but, au delà de la correction pure.

Dans l'attente, en vous remerciant,

Modifié le 16 octobre 2011 par Dylav
Pas de coordonnées personnelles sur un espace public SVP ;o)

Dylav · le 15 octobre 2011

Bonjour ced02,

Trois éléments de réponse,

sur la ligne ci-dessous, il manque un signe = entre name et "prénom" :
```
Votre prénom<br><input type="text" name"prénom" size="20"><br>
```
la balise <title> est destinée à donner un nom à ta page HTML, et non pas un titre. Elle se place dans le header, c'est-à-dire entre les balises <head> et </head>. Pour les titres, utilise par exemple la balise <h1> (1er niveau de titre), ou <h2> (2nd niveau), etc. jusqu'à <h6>. Exemple :
```
<html>
<head>
<title>Page HTML pour le formulaire de changement d'adresse</title>
</head>
<body>
<h1>Formulaire de changement d'adresse</h1>
</body>
</html>
```
Dans ton script, il manque systématiquement le crochet de fin de chacune des cinq fonctions. Ceci dit, les ajouter ne fait pas fonctionner ton formulaire… il y a un autre problème, sans doute au niveau de la formalisation de l'appel.

le 15 octobre 2011

Merci Dylav,

Effectivement, il manque un "="

Quant au titre, effectivement, néophyte, je pensais qu'il s'agissait du titre affiché. Merci pour ces deux indications.

Entre mon post et votre aimable réponse, je me suis aperçu qu'il me manquait (même si le code fonctionne sans) les balise HTML, HEAD et BODY. je sais également que la balise </body> doit être insérée après la balise </script> (dans l'ordre : </script> </body> </html> )

Pour l'appel, je me suis contenté de reprendre, à l'identique, un code dans un livre concernant la programmation. Le premier code, qui fonctionne bien, il suffit de le coller dans le bloc note (hormis le signe "=" oublié en remettant ce code sur ce site) c'est pareil, il est donné dans le même ouvrage, ainsi que le code javascript qui est donné quelques pages après, pour justement renforcer le premier codage et vérifier que les champs du formulaire ne sont pas vides.

En tout cas, je progresse un peu, même si je ne sais toujours pas ce qui se passe avec le code javascript. Ce qui me parait étonnant, mais il est vrai que je n'y connais rien, c'est qu'il n'y a aucun message d'erreur lors de l’exécution.

En tout cas, encore merci !

Dylav · le 15 octobre 2011

J'ai trouvé sur l'excellent site SELFHTML la réponse à ton problème. Il faut en fait utiliser l'événement onSubmit au niveau de la balise <form>. La page Vérifier les saisies de formulaire te donne la solution et son explication détaillée.

Tu noteras au passage la notion de focus, qui ajoute un véritable plus au fonctionnement du formulaire…

Par ailleurs, le chapitre sur les formulaires du fameux tutoriel XHTML/CSS du Site du ZérO va très loin dans le paramétrage des formulaires, en matière de présentation. Ce chapitre mérite le détour :super:

le 15 octobre 2011

Décidément, merci à toi Dylav,

Je vais de ce pas me rendre aux adresses mentionnées.

Dès que j'ai trouvé quelque chose (je l'espère) je reviens pour poster et/ou indiquer résolu.

A plus tard,

Encore merci.

Dylav · le 15 octobre 2011

J'attends avec plaisir ton retour

le 16 octobre 2011

J'ai trouvé ce qu'il me fallait. J'ai adapté le code trouvé aux adresses que tu m'as données et cela fonctionne parfaitement bien. A titre d'info, voici le code source de mon formulaire qui est opérationnel !

<html>
<head>
<title>Vérifier les saisies de formulaire</title>
<script type="text/javascript">
<!--
function verif_formulaire()
{
if(document.formulaire.nom.value == "")  {
  alert("Veuillez entrer votre nom !");
  document.formulaire.nom.focus();
  return false;
 }
if(document.formulaire.prenom.value == "") {
  alert("Veuillez entrer votre prénom !");
  document.formulaire.prenom.focus();
  return false;
 }
if(document.formulaire.adresse.value == "") {
  alert("Veuillez entrer votre nouvelle adresse !");
  document.formulaire.adresse.focus();
  return false;
 }
}
//-->
</script>
</head>
<body bgcolor="#EEEEEE" text="#000000">

<h1>formulaire de changement d'adresse</h1> 

<form name="formulaire" action="mailto:c*****@wanadoo.fr?subject=formulaire chgt adresse" enctype="text/plain" method="post" onSubmit="return verif_formulaire()">
<pre>
Nom:     <input type="text" size="40" name="nom">
Prénom:  <input type="text" size="40" name="prenom">
Courriel (facultatif):   <input type="text" size="40" name="courriel">
Votre collectivité<br><select name="collectivite">
  <option value="p0">
  <option value="p1">Je ne sais pas
  <option value="p2">Ville
  <option value="p3">CA
  <option value="p4">CCAS
  <option value="p5">SIAD
  <option value="p6">SDIS
  <option value="p7">Retraité(e)
</select>
<br>
Votre nouvelle adresse<br><textarea name="adresse" cols=35 rows=3></textarea>
<br>
formulaire: <input type="submit" value="Envoyer"><input type="reset" value="Effacer">

Pour envoyer vous devez être connecté à Internet!
</pre>
</form>
</body>
</html>

Ce qui m'étonne, simplement, c'est que le code en javascript ne se trouve pas entre les balises BODY. Quant à FOCUS, c'est censé mettre le curseur au début de la fenêtre à remplir, mais en pratique, il n'y a rien.

Pour pouvoir récupérer mes données de façon lisibles, j'ai ajouté : enctype="text/plain" (utile à savoir, sinon les données ne sont guère lisibles !)

Je vais maintenant chercher une autre méthode pour récupérer mes données du formulaire, ce codage ayant l'inconvénient de faire appel au logiciel de messagerie de l'utilisateur ... Si quelqu'un connait, sachant que je suis complètement néophyte en la matière, je suis preneur !

Ce qui est dommage, c'est que je n'ai toujours pas trouvé mon erreur dans mon premier script, mais bon, je chercherai, j'ai besoin de comprendre. En attendant, j'ai le script qui me convient. Donc ...

Encore merci à toi Dylav, bonne journée,

Cordialement,

P.S : je vais attendre quelques jours, en cas de commentaires, puis je mettrai une balise [Résolu]

Dylav · le 16 octobre 2011

<form name="formulaire" action="mailto:c*****@wanadoo.fr […]">

N'indique jamais de données personnelles sur un espace public (et Zébulon en est un). Avec ton adresse mail en clair, tu risques de te faire envahir de pourriels !

Ce qui m'étonne, simplement, c'est que le code en javascript ne se trouve pas entre les balises BODY.

C'est normal, ce script est purement déclaratif, donc dans le header. Il décrit seulement (il n'exécute pas) des fonctions qui seront appelées par la méthode onSubmit de la balise <form>.

Quant à FOCUS, c'est censé mettre le curseur au début de la fenêtre à remplir, mais en pratique, il n'y a rien.

Pourquoi dis-tu cela ? Lorsque tu fermes la popup indiquant qu'il manque une donnée, tu retrouves le curseur en début la zone de saisie correspondante (ne pas confondre avec le pointeur).

Pour pouvoir récupérer mes données de façon lisibles, j'ai ajouté : enctype="text/plain" (utile à savoir, sinon les données ne sont guère lisibles !)

Effectivement, c'est plus clair, mais tu risques de mauvaises interprétations de certains caractères (lettres accentuées, par exemple).

P.S : je vais attendre quelques jours, en cas de commentaires, puis je mettrai une balise [Résolu]

Tu pourras également nous faire part de tes découvertes sur le script qui ne fonctionnait pas

le 16 octobre 2011

(re) bonjour,

Désolé pour le précédent post, je n'ai pas trouvé la fonction éditer ou supprimer ... Mea Culpa.

Oui, effectivement, avec enctype="text/plain", les caractères accentués ne passent pas. Aurais-tu une alternative ?

Pour les balises BODY, je comprends, idem pour FOCUS (je n'y ai pas assez prêté attention)

Pour l'heure, il est vrai que j'aimerais pouvoir intégrer les caractères accentués. J'ai également un autre problème : le site sur lequel je dois mettre mon formulaire est un site "Jimdo Pro" Or, si j'intègre bien mon formulaire, l'utilisateur peut le remplir, l'effacer et l'envoyer ... sauf que la fonction javascript censée vérifier les champs est ... inopérante !?...

De fait, j'ai seulement mis un lien (ce qui n'est pas du tout "esthétique") vers un serveur qui héberge mon formulaire, et là, cela fonctionne ...

Je vais chercher dans les forums de "Jimdo" afin de comprendre ce qui se passe.

Décidément, je n'en ai pas fini pour un malheureux formulaire ;-)

Merci Dylav

Dylav · le 16 octobre 2011

Oui, effectivement, avec enctype="text/plain", les caractères accentués ne passent pas. Aurais-tu une alternative ?

L'alternative, c'est l'interprétation des chaînes de caractères reçues, et ce n'est pas très compliqué. Il existe des langages qui traitent de façon très puissante une chaîne de caractères (avec par exemple les expressions régulières, qui permettent des substitutions, des découpages, etc). Dans l'exemple ci-dessus, la chaîne à décoder est

nom=Untel&prenom=G%E9rard&courriel=&collectivite=p0&adresse=Son+adresse+%E0+lui

découpage en sous-chaînes par split sur le & (et commercial),
pour chaque sous-chaîne, identification variable=valeur,
remplacement des + par des espaces,
traduction des chaînes %XX grâce à la table ASCII des caractères (XX est la valeur hexadécimale du caractère).

000[00]=   001[01]=   002[02]=   003[03]=   004[04]=   005[05]=   006[06]=   007[07]=   
008[08]=   009[09]=   010[0A]=   011[0B]=   012[0C]=   013[0D]=   014[0E]=   015[0F]=   
016[10]=   017[11]=   018[12]=   019[13]=   020[14]=   021[15]=   022[16]=   023[17]=   
024[18]=   025[19]=   026[1A]=   027[1B]=   028[1C]=   029[1D]=   030[1E]=   031[1F]=   
032[20]=   033[21]=!  034[22]="  035[23]=#  036[24]=$  037[25]=%  038[26]=&  039[27]='  
040[28]=(  041[29]=)  042[2A]=*  043[2B]=+  044[2C]=,  045[2D]=-  046[2E]=.  047[2F]=/  
048[30]=0  049[31]=1  050[32]=2  051[33]=3  052[34]=4  053[35]=5  054[36]=6  055[37]=7  
056[38]=8  057[39]=9  058[3A]=:  059[3B]=;  060[3C]=<  061[3D]==  062[3E]=>  063[3F]=?  
064[40]=@  065[41]=A  066[42]=B  067[43]=C  068[44]=D  069[45]=E  070[46]=F  071[47]=G  
072[48]=H  073[49]=I  074[4A]=J  075[4B]=K  076[4C]=L  077[4D]=M  078[4E]=N  079[4F]=O  
080[50]=P  081[51]=Q  082[52]=R  083[53]=S  084[54]=T  085[55]=U  086[56]=V  087[57]=W  
088[58]=X  089[59]=Y  090[5A]=Z  091[5B]=[  092[5C]=\  093[5D]=]  094[5E]=^  095[5F]=_  
096[60]=`  097[61]=a  098[62]=b  099[63]=c  100[64]=d  101[65]=e  102[66]=f  103[67]=g  
104[68]=h  105[69]=i  106[6A]=j  107[6B]=k  108[6C]=l  109[6D]=m  110[6E]=n  111[6F]=o  
112[70]=p  113[71]=q  114[72]=r  115[73]=s  116[74]=t  117[75]=u  118[76]=v  119[77]=w  
120[78]=x  121[79]=y  122[7A]=z  123[7B]={  124[7C]=|  125[7D]=}  126[7E]=~  127[7F]=  
128[80]=€  129[81]=  130[82]=‚ 131[83]=ƒ  132[84]=„  133[85]=…  134[86]=†  135[87]=‡  
136[88]=ˆ  137[89]=‰  138[8A]=Š  139[8B]=‹  140[8C]=Œ  141[8D]= 142[8E]=Ž  143[8F]=  
144[90]=� 145[91]=‘  146[92]=’  147[93]=“  148[94]=”  149[95]=•  150[96]=–  151[97]=—  
152[98]=˜  153[99]=™  154[9A]=š  155[9B]=›  156[9C]=œ  157[9D]=�  158[9E]=ž  159[9F]=Ÿ  
160[A0]=   161[A1]=¡  162[A2]=¢  163[A3]=£  164[A4]=¤  165[A5]=¥  166[A6]=¦  167[A7]=§  
168[A8]=¨  169[A9]=©  170[AA]=ª  171[AB]=«  172[AC]=¬  173[AD]=   174[AE]=®  175[AF]=¯  
176[b0]=°  177[b1]=±  178[b2]=²  179[b3]=³  180[b4]=´  181[b5]=µ  182[b6]=¶  183[b7]=·  
184[b8]=¸  185[b9]=¹  186[bA]=º  187[bB]=»  188[bC]=¼  189[bD]=½  190[bE]=¾  191[bF]=¿  
192[C0]=À  193[C1]=Á  194[C2]=Â  195[C3]=Ã  196[C4]=Ä  197[C5]=Å  198[C6]=Æ  199[C7]=Ç  
200[C8]=È  201[C9]=É  202[CA]=Ê  203[CB]=Ë  204[CC]=Ì  205[CD]=Í  206[CE]=Î  207[CF]=Ï  
208[D0]=Ð  209[D1]=Ñ  210[D2]=Ò  211[D3]=Ó  212[D4]=Ô  213[D5]=Õ  214[D6]=Ö  215[D7]=×  
216[D8]=Ø  217[D9]=Ù  218[DA]=Ú  219[DB]=Û  220[DC]=Ü  221[DD]=Ý  222[DE]=Þ  223[DF]=ß  
224[E0]=à  225[E1]=á  226[E2]=â  227[E3]=ã  228[E4]=ä  229[E5]=å  230[E6]=æ  231[E7]=ç  
232[E8]=è  233[E9]=é  234[EA]=ê  235[EB]=ë  236[EC]=ì  237[ED]=í  238[EE]=î  239[EF]=ï  
240[F0]=ð  241[F1]=ñ  242[F2]=ò  243[F3]=ó  244[F4]=ô  245[F5]=õ  246[F6]=ö  247[F7]=÷  
248[F8]=ø  249[F9]=ù  250[FA]=ú  251[FB]=û  252[FC]=ü  253[FD]=ý  254[FE]=þ  255[FF]=ÿ

Par exemple %E9, c'est le 233ème caractère (valeur décimale 233, valeur hexa E9) : c'est le « é ».

Rien de bien complexe, comme tu peux le constater…

Connexion

Pas encore inscrit ?

Besoin d'aide pour correction page HTML simple

Messages recommandés

Invité ced02

Dylav

Invité ced02

Dylav

Invité ced02

Dylav

Invité ced02

Dylav

Invité CNR issibén

Dylav

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer