[W3C] Erreur W3C sur "input"

Version imprimable

10/03/2008, 19h08
jlb59

[W3C] Erreur W3C sur "input"

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:

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

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

Code:

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.
10/03/2008, 21h13
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:

<input type="submit" name="Envoyer" value="Envoyer" style="display:block; margin-bottom:...px" />
11/03/2008, 09h28
Bisûnûrs

Pour préciser ce que dit Erwan31, ce n'est pas l'input qui gêne mais les br.
11/03/2008, 09h48
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 ;)

Citation:

Envoyé par 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:

<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:

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 ?

11/03/2008, 10h57
Deallyra

personnellement j'enregistrais la page fournie par mon client puis je la passais sans php à la validation W3C...
11/03/2008, 12h44
Erwan31

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

Citation:

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.
11/03/2008, 12h51
SpaceFrog

personnellement dans ces cas là j'utilise un fieldset ...
11/03/2008, 12h54
Erwan31

Citation:

Envoyé par SpaceFrog

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

Si les champs sont sur le même thème ça peut convenir en effet.
11/03/2008, 14h20
SpaceFrog

ou des fieldset imbriqués

suffit de les styler invisibles en border ...
11/03/2008, 14h34
Erwan31

Citation:

Envoyé par SpaceFrog

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 ;)
11/03/2008, 16h52
talondachil

le <Form> dans un bloc

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 !!!
11/03/2008, 17h33
Erwan31

Citation:

Envoyé par 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>

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.
11/03/2008, 18h11
talondachil

Fieldset est une solution, div aussi mais différement que dans mon message précédent

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
11/03/2008, 19h07
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 :mrgreen:
11/03/2008, 21h01
talondachil

PRobleme résolu alors

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
12/03/2008, 09h44
SpaceFrog

:roll:
12/03/2008, 20h53
jlb59

Citation:

Envoyé par Erwan31

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 !!!!

Citation:

Envoyé par Erwan31

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.

Citation:

Envoyé par Erwan31

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 :

Citation:

Envoyé par Erwan31

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.
12/03/2008, 20h56
jlb59

Citation:

Envoyé par 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

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.

++
12/03/2008, 22h22
Erwan31
Citation:

Envoyé par jlb59

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:

1 2 3 4 5 6 <form> <p> <input... /><br /> </p> </form>
mais pas
Code:

1 2 3 <form> <input... /><br /> </form>
13/03/2008, 00h11
clb56

Citation:

Envoyé par jlb59

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

Ce n'est pas un "truc"...

... Lire les spécifications por favor !

Enfant direct de <form> implique conteneur de type block
13/03/2008, 00h19
Candygirl

Citation:

Envoyé par clb56

Enfant direct de <form> implique conteneur de type block

Précisons quand même avec un doctype strict et pas en transitionnel
13/03/2008, 00h33
Erwan31

Citation:

Envoyé par Candygirl

Précisons quand même avec un doctype strict et pas en transitionnel

Oui c'est vrai, d'ailleurs c'est le genre de règle que je trouve pour ma part
un peu trop rigide et superflu mais bon c'est comme ça...

Citation:

Envoyé par Cbl56

... Lire les spécifications por favor !

Je doute que Jlb59 sache ce que c'est qu'une spec.
13/03/2008, 09h23
jlb59

Citation:

Envoyé par 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:

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

Bonjour Erwan31,

J'ai fait exactement comme tu m'as dit et ça a été validé sans problème.

Pour cela, c'est résolu, mais je suppose que je vais encore avoir besoin de tes lumières, mais on verra par la suite !

Merci encore de ton aide.