Formulaire

bonjour,

lorsque que je valide ma page, le validateur me retourne 4 erreurs concernant un formulaire dont voici le code :

<form action="" method="post">
<h2>Pour recevoir plus d'informations</h2>
<label for="mel">Veuillez inscrire votre adresse mail ci-dessous :</label><br />
<input type="text" name="mel" id="mel"/>
<input type="image" src="img/button_ok.png" />
</form>

Les 4 erreurs sont :

# document type does not allow element "label" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
<label for="mel">Veuillez inscrire votre adresse mail ci-dessous :</label>

#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.
...adresse mail ci-dessous :</label><br />

#document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
<input type="text" name="mel" id="mel"/>


#document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
<input type="image" src="img/button_ok.png" />

Pour les 4 erreurs, il est précisé ceci :

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Ya t-il quelquechose qui cloche dans mon formulaire ???
Je pensais pourtant avoir suivi les règles...

Bonjour,

le 1er § indique la solution:

a écrit :
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element

(le 2ème § sur la cause possible est par contre une fausse piste)

En français, tu peux regarder cet article d'Openweb: Utilisation des formulaires (le § Emplacement dans la page et structure en particulier, ceci pour le Doctype Xhtml 1.0)

merci pour la réponse,

je ne parviens pas à suivre ton lien, apparemment le site est en rade ?

Solution la plus simple : insérer une div dans ton formulaire :

<form action="" method="post">
<div>

</div>
</form>

a+

Hello,

Certe c'est la solution la plus rapide et la plus simple.
Mais est-ce d'emblée la meilleure ?

G.

Moi je dirais d'emblée... voui voui voui...
Mème si je sait pertinemment que ce n'est pas bon de tout régler à coups de div, il y a des fois ou cela s'impose.

Merci Nico3333fr.

il faut une balise block, c'est vraisemblablle ... Mais pourquoi plus <div> que <p> ? ça dépend du contenu après.

<form action="" method="post">
	<h2>Pour recevoir plus d'informations</h2>
	<p><label for="mel">Veuillez inscrire votre adresse mail ci-dessous :</label><br />
	<input type="text" name="mel" id="mel"/>
	<input type="image" src="img/button_ok.png" /></p>
</form>

Ou un div, si on ne veut pas se prendre la tête avec les marges par défaut (margin: 1em 0;) de l'élément p.
Modifié par Florent V. (05 Mar 2007 - 15:25)

Malcolm a écrit :
Mais pourquoi plus <div> que <p> ? ça dépend du contenu après.

La principale différence entre div et p, c'est que p ne peut pas contenir d'éléments de type bloc, juste des éléments de type en-ligne.

Pour ma part, j'utilise généralement des p en bout de course, et réserve les div pour servir de conteneurs à des groupes d'éléments. Mais il n'y a pas de règle absolue, loin de là.

NB : la notion de « paragraphe » est quelque peu difficile à appliquer à une interface web ne comprenant pas que du texte à lire.

je suis aussi de ton avis, mais il arrive que j'accompagne mes champs d'un cour tetxte descriptif, par exemple :

<p>Choisissez votre sexe :<br />
<input type="radio" id="sexe_M" name="sexe" value="M" /><label for="sexe_M">Masculin</label><br />
<input type="radio" id="sexe_F" name="sexe" value="F" /><label for="sexe_F">Féminin</label>
</p>

C'est ici un exemple très simple, mais on *pourrait* imaginer une brève explication sur 2 types de choix qui ont des conséquences sur la suite de l'utilisation des pages web.
Cela dit je te rejoins sur le fait qu'il n'existe pas de règle absolue.

Bonjour,

Malcolm a écrit :

<p>Choisissez votre sexe :<br />
<input type="radio" id="sexe_M" name="sexe" value="M" /><label for="sexe_M">Masculin</label><br />
<input type="radio" id="sexe_F" name="sexe" value="F" /><label for="sexe_F">Féminin</label>
</p>

Remarque: dans cet exemple spécifique, c'est un fieldset/legend qui est requis. En l'état, l'exemple ne répond pas aux normes d'accessibilité WCAG.