Discussion :

[jlb59]

Bonsoir à tous,

Je valide mon site avec W3C et je corrige les erreurs que je comprends.

J'ai mis cette syntaxe en respectant (j'espère) pour être validée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" name="Envoyer" value="Envoyer" /><br /><br />

Seulement, W3C détecte une erreur et je ne vois pas pourquoi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Line 331, column 61: document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

Pourtant, j'ai suivi les conseils pour la validation de "input" !

Merci de votre aide.

[Erwan31]

Bonsoir,
est ce que ton form est directement suivi d'un élément de niveau block (div, p, fieldset)?
Les br ne sont pas fait pour créer des espacement..., utiliser un display:block avec un margin-bottom:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" name="Envoyer" value="Envoyer" style="display:block; margin-bottom:...px" />

[Bisûnûrs]

Pour préciser ce que dit Erwan31, ce n'est pas l'input qui gêne mais les br.

[Deallyra]

et si tu allais dans ton éditeur de texte et que tu tapais sur [enter] après la fin de ta balise input? ^^

Il me semble que la norme est à une balise par ligne.
En même temps, nous préciser ton doctype (même si xHTML donc facile à deviner) n'aurait pas été inutile...
Enfin si vu qu'on le devine mais bon
Pour ceux qui ne s'y connaissent pas et veulent faire des tests

[jlb59]

Bonsoir,
est ce que ton form est directement suivi d'un élément de niveau block (div, p, fieldset)?
Les br ne sont pas fait pour créer des espacement..., utiliser un display:block avec un margin-bottom:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" name="Envoyer" value="Envoyer" style="display:block; margin-bottom:...px" />

Merci Erwan31, mais une petite précision tout de même !

Le "margin-bottom:...px", ça pourrait correspondre à quoi ?

Il faut que je te précise que c'est un script PHP, tout au moins, du Html dans du Php, donc cela ne m'arrange pas du tout !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php if(empty($_POST))
{
        if($_GET["message"]=="ok")
                $corps.="Votre mail a bien été envoyé, ainsi que votre adresse IP : ".$_SERVER['REMOTE_ADDR']."\r\n<br />" ;
        else
                echo '<span class="titre-page">Formulaire de contact</span><br /><br />';
                echo '<form method="post" action="index.php?id=contact"><br />
                <label for="email">Votre adresse e-mail : * </label><input type="text" name="email" id="email" /><br /><br />
                <label for="objet">Sujet : * </label><input type="text" name="objet" id="objet" /><br /><br />
                <label for="message">Message : * </label><br /><textarea name="message" id="message" cols="50" rows="10"></textarea><br /><br />
                <label for="question">Code antispams :</label> (Ceci évite la recherche d\'adresses par les robots)<br />
                
                <input type="text" name="premiernombre" value="'.rand(0,100).'" size="1" readonly="readonly" />
<!--            <input type="text" name="secondnombre" size="1" value="'.rand(100, 200).'" readonly="readonly" /> -->
                <input type="text" name="troisiemenombre" value="'.rand(0, 200).'" size="1" readonly="readonly" /><br />
                
<!--            <span style="font-weight:bold;color:red;">Recopiez les nombres contenus dans le <u>premier</u> et le <u>troisième champ</u></span> (ci-dessus) l\'un à la suite de l\'autre dans le champ ci-dessous :<br /> -->
                Recopiez les nombres que vous voyez dans le champ ci-dessus (sans espace) : *<br />
                <input type="text" name="question" id="question" size="4" /><br /><br />
                Votre adresse IP sera automatiquement envoyée quand vous enverrez votre message.<br />
                <input type="submit" name="Envoyer" value="Envoyer" /><br /><br />
                </form>' ;
}
else
{
...

J'ai pris ce script dans un exemple de site, qui, lui, était totalement valide (exemple_site_valide).
J'ai fais ça par que j'en avais marre de galérer avec un formulaire de contact contenant un captchat.

De plus, toi-même et Bisûnûrs m'avaient précisé que le Php n'était pas ananalyé par W3C ! Mais si dans un code Php (dans une variable) il y a du code Html, est-ce normal que ça passe au validateur ?

[Deallyra]

personnellement j'enregistrais la page fournie par mon client puis je la passais sans php à la validation W3C...

[Erwan31]

Bonjour,
jbl59, c'est bien ce que je pensais et c'(est pour ça que je
te demandais

est ce que ton form est directement suivi d'un élément de niveau block (div, p, fieldset)?

Les élément form ne peuvent directement contenir que des éléments de niveau block (div, p, fieldset pour l'essentiel), donc ni input, ni br.
Le validateur t'indique les br parce que ce sont les premiers éléments inline qui apparaissent après form, si tu les supprimes, il va te dire pareil pour les LABEL.

Le W3C valide ton code une fois interprétée par le parseur qui ne renvoit que du code HTML, quelqu'un me dira si je me trompe mais ça me semble assez logique.

Le margin-bottom sert à donner une marge au dessous de l'input pas difficile à deviner.

[SpaceFrog]

personnellement dans ces cas là j'utilise un fieldset ...

[Erwan31]

personnellement dans ces cas là j'utilise un fieldset ...

Si les champs sont sur le même thème ça peut convenir en effet.

[SpaceFrog]

ou des fieldset imbriqués

suffit de les styler invisibles en border ...

[Erwan31]

ou des fieldset imbriqués
suffit de les styler invisibles en border ...

Salut SpaceFlog,
les fieldset imbriqués sont en fait un frein à l'accessibilité.
D'une part tu le sais sans doute déjà mais les fieldset sans l'élément
legend n'ont aucun sens, les bordures pouvant obtenue par un simple div;
et d'autre part le rôle du fieldset étant d'associer une légende à chaque label,
une double légende ne peut que difficilement se justifier.

Je veux faire là référence à ce que lirait un lecteur d'écran, je sais pas si j'ai été très clair

[talondachil]

Je ne suis pas sur de ce que j'avance, mais si tu englobes tout le formulaire dans un bloc ( une <div> peut suffire) cela ne résout pas le problème ??
Merci d'infirmer ou d'affirmer cette théorie.

<div>

<form ... >

<input .../>

<input .../>

</form>

</div>

Et ensuite faut jouer avec le CSS pour donner de l'air dans ton formulaire avec bottom-top comme cité précédemment.

PS : au passage, au lieu de faire <span class="titre-page">Mon titre</span>, utlise les balises <h1...6 classe="titre-page">Mon titre</h1...6>. cela est beaucoup plus approprié, surtout que <span></span> est une balise inline !!!

[Erwan31]

Je ne suis pas sur de ce que j'avance, mais si tu englobes tout le formulaire dans un bloc ( une <div> peut suffire) cela ne résout pas le problème ??
Merci d'infirmer ou d'affirmer cette théorie.
<div>

<form ... >

<input .../>

<input .../>

</form>

</div>

Non ça ne changera rien à son problème de validité qui vient de l'erreur que j'ai citée plus haut
+1 sur les Hn en revanche.

[talondachil]

J'ai chargé ton script pour tester la validation. Après plusieurs essais, la validation passe en ajoutant un <fieldset></fieldset>(avec ou sans <legend></legend>) ou bien une <div></div> dans le formulaire (et non autour comme je le pensais dans mon message précédent.
En gros, le problème viendrait (je parle au conditionnel, car je ne suis pas sur de moi) des balises <br /> de type inline qui ne seraient pas englobées dans un parent de type block.

La solution donne ça :
<form>

<fieldset> (ou <div>)

<legend>Ta légende</legend> (ligne facultative, mais conseillée)

<input ... />

<input ... />

</fieldset> (ou </div>)

</form>

PS : cela ne nuit pas à la lisibilité de la page par un lecteur d'écran pour les mal-voyants ou autres handicapes

PS2: Si ton problème est résolu, pense à mettre RESOLU pour la discussion.

Ciao

[Erwan31]

Talondachil, tu n'as pas lu le post, c'est ce que j'ai expliqué plus haut Donc t'as raison, car comme chacun sait Erwan31 à toujours raison

[talondachil]

Le problème est résolu alors ??

Je viens de jeter un oeil sur le site où le script à été copié, et il y a bien un <fieldset></fieldset> qui englobe tout l'interieur du formulaire (et qui a été supprimé après recopiage, d'où l'erreur a la validation).

Ciao

[SpaceFrog]

[jlb59]

Les élément form ne peuvent directement contenir que des éléments de niveau block (div, p, fieldset pour l'essentiel), donc ni input, ni br.

Je croyais que "input" faisait partie d'un "form" ???
Pour moi, enfin je le vois comme ça, c'est plus logique sinon le formulaire ne sert à rien.
J'ai peut-être mal interprété ce que tu m'as dit !!!!

Le validateur t'indique les br parce que ce sont les premiers éléments inline qui apparaissent après form, si tu les supprimes, il va te dire pareil pour les LABEL.

En définitive, il ne dois y avoir aucun <br> dans un formulaire pour qu'il soit validé ?
C'est ce que j'ai compris.

Le W3C valide ton code une fois interprétée par le parseur qui ne renvoit que du code HTML, quelqu'un me dira si je me trompe mais ça me semble assez logique.

Là, tu en connais plus que moi, mais si tu le dis, je pense que tu as raison :

Le margin-bottom sert à donner une marge au dessous de l'input pas difficile à deviner.

Là, je commence à comprendre parce que dans ma petite tête, je voyais "margin-bottom" comme servant à mettre un écart à partir du bord de la page, ici en bas.

J'avais du mal à définir cette fonction comme tu me l'as écrit.
J'ai essayé mais c'est pas ça.

En tout cas, un grand merci de ton aide.

[jlb59]

Le problème est résolu alors ??

Je viens de jeter un oeil sur le site où le script à été copié, et il y a bien un <fieldset></fieldset> qui englobe tout l'interieur du formulaire (et qui a été supprimé après recopiage, d'où l'erreur a la validation).

Ciao

Non, à l'origine, il n'y avait pas de Fieldset, je l'ai rajouté après pensant avoir cette page validée... mais je me suis trompé.

Je vais essayer avec le truc d'Erwan31, je verrais ce que ça donne.

++

[Erwan31]

J'ai peut-être mal interprété ce que tu m'as dit !!!!

Oui la mise en exergue du mot directement n'a manifestement pas suffit
Quand je dis "directement" ça ne veut pas dire que les form ne peuvent pas contenir d'input! Ca veut tout simplement dire qu'ils ne peuvent pas avoir d'éléments inline (input, br...) comme enfants directs.

Donc tu peux avoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<form>
<p>
<input... /><br />
</p>
</form>

mais pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form>
<input... /><br />
</form>