5568 sujets

Sémantique web et HTML

[Résolu] Span dans un <p> seulement ?

Salut Smiley cligne

Ca fait longtemps que j'étais pas venu mais j'étais entièrement plongé dans le PHP Smiley lol

Donc, là j'ai un problème :
a écrit :
Line 97, column 22: document type does not allow element "span" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

<span class="design">Th&egrave;me du site : </span>

Ca veut dire que le <span> doit obligatoirement se trouver dans un <p> n'est-ce pas ?
Mais si il est dans une <div>, ça suffit pas ? Ce qui me paraît bizarre, c'est que c'est la même chose avec mon select :
a écrit :
Line 98, column 46: document type does not allow element "select" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

<select name="design" title="Design du site">

Un select dans un <p> ? Ca me paraît vraiment bizarre là Smiley rolleyes
Modifié par Skybattle (21 Feb 2005 - 23:04)
Administrateur
Salut, comme te le dit le validateur, tu as le choix entre toutes ces balises pour contenir span : "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" Smiley cligne

Pour select, c'est la même chose.

En doctype strict, aucune balise en-ligne (span, select) ne peut se trouver directement dans le <body>
Le problème, c'est que voici mon code :
<div id="design">
<span class="design">Th&egrave;me du site : </span>
<form method="post" action="./design.php">
<select name="design" title="Design">
<option value="1">DarkBlue</option>
<option value="2">BrownLS</option>
</select>
<input type="submit" value="OK" id="ok" />
</form>
</div>


Donc là c'est clair : tout est dans une div...

Alors, plusieurs questions :
- qu'est-ce qui cloche ici ?
- l'erreur du span a été otée (je l'avais mis dans le form...), mais comment faire pour que le span et le form soient alignés ?
Administrateur
Skybattle a écrit :

- qu'est-ce qui cloche ici ?

<form> ne peut être parent direct d'éléments inline :
http://www.alsacreations.com/blog/index.php?2004/09/09/58-parents-et-enfants

Skybattle a écrit :
- l'erreur du span a été otée (je l'avais mis dans le form...), mais comment faire pour que le span et le form soient alignés ?

<span> est une balise inline; <form> est une balise bloc.
Par défaut ils ne peuvent pas être alignés.
Il faut voir du côté des schémas de positionnement (float, absolute, etc.) pour les positionner hors du flux.
Modifié par Raphael (20 Feb 2005 - 16:52)
Administrateur
Skybattle a écrit :
Mais alors, j'en fait quoi moi de mon form ?
Je dois le conserver, nan ? Mais après je sais pas quoi mettre Smiley confus

Oui si tu veux un formulaire, il te faut un <form> Smiley smile

Quel est le soucis exactement ?
- <form> ne peut pas être parent direct d'objets inline, donc...
- <form> et <span> par défaut s'affichent l'un sous l'autre, donc...
Modifié par Raphael (20 Feb 2005 - 17:15)
J'ai une marge entre le span et le form quand je les mets sur la même ligne (avec un float pour le span)

Mais surtout : quelle balise utiliser alors entre le <form> et le <select> ?

Et aussi : ça foire aussi entre un <form> et un <input> ?
Plutôt que de mettre ton Th&egrave;me du site dans un span extérieur au formulaire, pourquoi n'utilise-tu pas un fieldset et un élément <legend>, dans le formulaire ? C'est exactement fait pour cela.
L'effet visuel sera différent, mais la page sera plus accessible et plus cohérente.

<div id="design">
<form method="post" action="./design.php">
<fieldset>
<legend>Th&egrave;me du site : </legend>
<select name="design" title="Design">
<option value="1">DarkBlue</option>
<option value="2">BrownLS</option>
</select>
<input type="submit" value="OK" id="ok" />
</fieldset>
</form>
</div>


cela règle en outre le problème d'un élément bloc où placer tes éléments de formulaire.
Pas de problème l'important c'est de le mettre. Merci Smiley cligne

Chouette le site, il a bien progressé. (Un petit soucis sous ie).
Modifié par Igor (21 Feb 2005 - 23:10)
Ah, merci beaucoup Smiley cligne
Ben, il est tout fini là, mais sur IE j'arrive pas à corriger ces "petits" décallages lol ^^ (le plus beau c'est que toutes mes pages sont identiques à priori Smiley lol )

Mais là c'est pour un autre site, j'ai plus de problèmes avec parce qu'à cause du PHP, comme je suis pas le seul à inscrire des trucs, je dois essayer de le rendre valide Smiley murf et c'est plus dur lol ^^
Bonjour,


J'ai le même problème dans mon formulaire :

  		<div id="contenu">

<p>Les champs marqués d'un astérisque (*) sont obligatoires.
<br />
Veillez à donner une adresse email valide pour que je puisse vous répondre.</p>
<form action="check_form.php" method="post">


<span class="form">Votre nom :</span>
<input type="text" id="nom" name="nom" />

<span class="form">Votre email (*) :</span>
<input type="text" id="email" name="email" />

<span class="form">Sujet du message :</span>

<input type="text" id="sujet" name="sujet" />

<span class="form">Votre message (*) :</span>
<textarea id="message" name="message" rows="10" cols="50"></textarea>

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

</div>


Le problème c'est que je veux pouvoir afficher le texte en rouge en cas d'erreur du formulaire.
Que me conseillez vous de faire ?
L'élément label est ton ami, puisqu'il sert précisément à étiquetter les contrôles de formulaire Smiley cligne :

<form action="check_form.php" method="post">
<fieldset>
<legend>Envoyer un message</legend>
<label for="nom">Votre nom :</label>
<input type="text" id="nom" name="nom" />
(...)
</fieldset>
</form>



En ajoutant une classe "error" sur le label ou les labels correspondant aux saisies erronées, tu pourras facilement les différencier.
Attention cependant à ne pas se limiter à la couleur pour cela (pour que le formulaires soit accessible, une information textuelle doit désigner les saisies à corriger).
En tout cas, le <legend> peut être remplacé par un simple <span>, c'est peut-être moins adapté mais ça marche bien, et ça met deux inline donc sans CSS ça passe nickel aussi Smiley cligne
Sujet clos
Aller à