Est-ce valide ?

Bonjour,

je voulais faire un select multiple mais... j'ai vite compris qu'il valait mieux laisser tomber.

J'ai donc trouvé une solution sur internet, mais elle utilisait le javascript, hors, j'aimerais tant que possible éviter le javascript.

J'ai donc bidouiller le tout, et je suis arrivé à ce qui suit; tout d'abord voici le code:

<form action="<!-- du php -->" method="post" name="edit_news">
<fieldset title="News">
<legend>Ajouter news</legend>
<input name="title" type="text" maxlength="255" />
<textarea name="news" cols="60" rows="4"><!-- du php --></textarea>
</fieldset>
<fieldset title="Section">
<ul class="checklist">
<li class="alt"><label for="section_01"><span><input id="section_01" name="section_01" type="checkbox" value="warcraft" />Warcraft</span></label></li>
<li><label for="section_02"><span><input id="section_02" name="section_02" type="checkbox" value="diablo" />Diablo</span></label></li>
<li class="alt"><label for="section_03"><span><input id="section_03" name="section_03" type="checkbox" value="strips" />Strips</span></label></li>
<li><label for="section_04"><span><input id="section_04" name="section_04" type="checkbox" value="site" />Site</span></label></li>
<li class="alt"><label for="section_05"><span><input id="section_05" name="section_05" type="checkbox" value="autre" />Autre</span></label></li>
</ul>
</fieldset>
<input name="add_news" type="submit" value="Ajouter" />
</form>

Et donc, le css qui correspond:

#main input[type="text"] { border: 1px solid #cdddcb; background-color: #fff; }
#main ul.checklist { list-style: none; padding-left: 0; width: 65%; max-height: 7.2em; border: 1px solid #cdddcb; overflow: auto; }
#main .checklist label { height: 1.8em; display: block; }
#main .checklist li { background-color: #dbe9db; overflow:hidden; }
#main .checklist li.alt { background-color: #edffed; }
#main .checklist li:hover { background-color: #9dbb9b; }
#main .checklist li span { height: 1.8em; display: block; cursor: pointer; }

Donc j'explique l'effet recherché: lorsque je me balade sur la zone de sélection, le background de l'élément survolé change de couleur, et le plus important : lorsque l'on clique n'importe où sur la ligne, la checkbox se coche.

Dans l'exemple que j'ai trouvé sur internet, la personne utilisait des divs, et les div ne permettent pas d'utiliser cette méthode à cause de l'imbrication, mais le span, lui l'autorise (ce doit être à cause d'une relation parent > enfant > enfant je suppose).

Cependant, je me pose la question vu que je ne suis pas un professionel du css, mais pourtant je veux rester dans les normes: est-ce valide ? Le validateur du W3C ne me renvoie pas d'erreur, mais je préfère être sûr, car si c'était vraiment valide, plus de monde utiliserait ma solution je pense.

Merci de vos réponses !

circle a écrit :
est-ce valide ? Le validateur du W3C ne me renvoie pas d'erreur

Tu poses la question et donnes la réponse.

[quote=circle]car si c'était vraiment valide, plus de monde utiliserait ma solution je pense[/url]
Ben il y a pas mal de monde qui utilise les checkbox, je te rassure. Quant à associer correctement des labels à des checkbox, c'est effectivement à faire, et il est vrai que c'est rarement fait sur les sites web.

Par contre, la syntaxe serait plutôt comme suit:

<input id="section_01" name="section_01" type="checkbox" value="warcraft" />
<label for="section_01">Warcraft</label>

Tout d'abord, merci

ensuite, justement tu pointe le doigt dessus ce qui me préoccupait, si je met le label comme cela, je n'obtien plus l'effet désiré, c'est à dire, le checkbox qui se valide en appuyant sur la ligne, et c'est vraiment l'effet que je recherche... là, je suis obligé de cliquer sur le texte pour que la checkbox se valide, et je trouve ça problématique car c'est bien moins simple de cliquer dessus un texte que sur une ligne.

Quelquechose doit m'échapper. Je regarderais à nouveau dans la journée pour voir si je trouve la solution qu'il me faut.

circle a écrit :
Tout d'abord, merci

ensuite, justement tu pointe le doigt dessus ce qui me préoccupait, si je met le label comme cela, je n'obtien plus l'effet désiré, c'est à dire, le checkbox qui se valide en appuyant sur la ligne, et c'est vraiment l'effet que je recherche... là, je suis obligé de cliquer sur le texte pour que la checkbox se valide, et je trouve ça problématique car c'est bien moins simple de cliquer dessus un texte que sur une ligne.

Bah il suffit d'adapter:

<span class="cbox">
	<input type="checkbox" id="truc" />
	<label for="truc">Bla bla</a>
</span>

.cbox {
	position: relative;
	display: block;
}
.cbox label {
	display: block;
	padding: 4px 10px 4px 30px;
	cursor: pointer;
}
.cbox input {
	position: absolute;
	top: 6px;
	left: 10px;
}

... quelque chose du genre.