[HTML] label et input, div au milieu

[Ter Rowan]

Bonjour, je me pose une question de validation sémantique (j'ai passé le code au validateur w3 mais je ne suis pas sûr...

voici le bout de code qui m'interroge :

<label class="gridCol2" for="av_global_0_c_input">color</label>

<div class="gridCol2 gridLast">

	<input id="av_global_0_c_input" type="text" value="0" size="3">

</div>

au départ, c'est un simple "INPUT" et son label.

mais voilà, je commence à positionner les éléments via une grille css (d'où les gridCol2 et gridLast)

le label répond bien, le <input class="gridCol2 gridLast"> ne répond pas. J'ai donc rajouté un"div" pour encapsuler mon input et réserver la taille qui va bien.

tout se passe correctement à l'affichage. Je pourrais me contenter de cela.

Maintenant, est une bonne façon de faire ? est ce que, par exemple, avoir un input et son label qui ne sont pas "frères" dans le dom pose un problème ?

[Xenos]

Je ne sais pas si label/div est accepté. En revanche, ton problème de "le input ne répond pas" peut venir du fait que div est, par défaut, en

display:block;

Donc, passer ton input en "display:block;" peut résoudre le problème de présentation qui te pousse à ajouter un "div".
Sémantiquement parlant, ton div n'a en effet aucun "sens": il n'est là que pour palier au manque du CSS.


D'après la norme W3C de "label", ce tag (label) est de type "display:inline". Or, les éléments "block" ne sont pas vraiment adapté à un conteneur "inline" (ce serait comme mettre un tag XML dans un TextNode...). Bon, j'ai rien dans la norme qui dit que c'est interdit, mais je trouve cela ... bizare!

J'ajouterai que, pour recoller plus à la norme qu'à une opinion personnelle:

Each LABEL element is associated with exactly one form control.

Donc, on ne peut pas attacher une "div" (qui n'est pas un "form control") à "label" (en pratique, c'est peut-être possible, mais la norme ne le veut pas).

[Ter Rowan]

arf le display block, ou même inline-block n'a pas fonctionné.

par contre, je ne suis pas complètement d'accord avec toi concernant l'attachement du label au div. En effet, le <label for="id"> indique formellement quel objet est attaché, et dans ce cadre c'est bien l'id de l'input que je donne.

Le div "polue" bien puisqu'il n'apporte rien sémantiquement mais il ne brise pas le lien for-mel. Non ?

[Xenos]

C'est exact. Mon objection n'est plus valide (celle de inline/block reste :p)
Je pense que div est acceptable dans un label, mais si on peut avoir le code HTML, le CSS associé, et ce que tu veux faire comme rendu, on pourra peut-être résoudre le problème sans recourir à un moche et insipide "div".

[Ter Rowan]

dans un formulaire qui occupe x% de la page (je ne connais pas les x%, ça dépendra du contexte), j'ai décidé de travailler avec des grilles css (basé sur one% mais j'ai modifié les %)

grosso modo je découpe mon formulaire en 12 colonnes.

Chaque ligne correspond à une variable. En standard, je peux modifier cette variable de deux manières :
- par un composant graphique
- par un input

de fait ma ligne affiche trois choses :

le composant graphique qui occupe 8 colonnes
le label de l'input, qui occupe 2 colonnes
l'input, qui occupe 2 colonnes

ainsi tout est bien aligné, indépendamment des différents morceaux (et pour plus tard, la css grid me permettra de jouer avec les mediaqueries).

A noter que le label, affiché à l'écran représente autant l'input que le composant graphique que la variable.

en pj le résultat, et le code ci dessous (j'ai ramé un peu, il est généré via javascript, de plus j'ai laissé le résultat de jquery ui pour les sliders)

<form  name="tabs" id="tabs">

	<div class="gridContainer av_selector">

		<div class="gridRow">

			<select name="av_global_0_img" id="av_global_0_img">

				<option selected="selected" value="#visage1">#visage1</option><option value="#visage2">#visage2</option></select>

		</div>

		<div class="gridRow">

			<div class="av_slider gridCol8"><div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" name="av_global_0_w_slider" id="av_global_0_w_slider"><a style="left: 50%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div></div>

			<label for="av_global_0_w_input" class="gridCol2">label1 inconnu</label>

			<div class="gridCol2 gridLast"><input id="av_global_0_w_input" size="3" value="50" type="text"></div>

		</div>

		<div class="gridRow">

			<div class="av_slider gridCol8"><div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" name="av_global_0_h_slider" id="av_global_0_h_slider"><a style="left: 70.6667%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div></div>

			<label for="av_global_0_h_input" class="gridCol2">toto</label>

			<div class="gridCol2 gridLast"><input id="av_global_0_h_input" size="3" value="53" type="text"></div>

		</div>

		<div class="gridRow">

			<div class="av_colorBoxes gridCol8" name="av_global_0_c" id="av_global_0_c">

				<div class="av_colorBox" id="av_global_0_c_0" style="background-color: pink"></div>

				<div class="av_colorBox" id="av_global_0_c_1" style="background-color: #FEC"></div>

				<div class="av_colorBox" id="av_global_0_c_2" style="background-color: #FCE"></div>

				<div class="av_colorBox" id="av_global_0_c_3" style="background-color: #EEF"></div>

			</div>

			<label for="av_global_0_c_input" class="gridCol2">color</label>

			<div class="gridCol2 gridLast">

				<input id="av_global_0_c_input" size="3" value="2" type="text">

			</div>

		</div>

	</div>

</form>

le seul css intéressant est celui de la grille basé sur one% (en pj aussi)

[Sezyth]

Bonsoir.

Et si tu vires ton div et que tu fais un :

<input class="gridCol2 gridLast">

?

Normalement les colonnes ne correspondent qu'à des largeurs en pourcentage, ça ne devrait pas poser de soucis..

[Ter Rowan]

Deja essayé, ça ne marche pas, ça modifie la taille de l input, et ça pousse en dessous

[Sezyth]

Qu'entends tu par 'ça pousse en dessous' ?

Sinon je ne comprend pas trop pourquoi tu souhaites les mettre dans des colonnes étant donné que tu définis sa largeur (size="3").

Sinon si des éléments flottants remontent lorsque tu supprimes ton div, essaye d'ajouter un div 'clearfix' après ton input.

[LiRyC]

D'ores et déjà, ton INPUT n'a pas de balise fermante...

<input id="av_global_0_c_input" size="3" value="2" type="text" />

[Xenos]

W3C

Some HTML element types allow authors to omit end tags (e.g., the P and LI element types). A few element types also allow the start tags to be omitted; for example, HEAD and BODY.

On n'est donc même pas obligé de fermer un tag <p> ou <li> !

W3C draft

The term void elements is used to designate elements that must be empty. These requirements only apply to the HTML syntax. In XHTML, all such elements are treated as normal elements, but must be marked up as empty elements.

These elements are forbidden from containing any content at all. In HTML, these elements have a start tag only. The self-closing tag syntax may be used. The end tag must be omitted because the element is automatically closed by the parser.

Les tags vides peuvent donc omettre, en HTML (pas xhtml!) l'auto-fermeture </>, puisque le navigateur fait la "correction" de lui-même.
Mais après, oui, je pense aussi que c'est une bonne habitude à prendre, un document xhtml ne coutant pas vraiment plus cher à faire, et étant plus sympatique à traiter puisque compatible XML.