PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 08/01/2016 14:45:20

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 274

label et input[type="checkbox"]

pour les cases à cocher, c'est bien d'avoir la case et le label à côté.
Hors avec pluCSS les labels sont des blocs, ils se retrouvent donc en dessous des cases à cocher.
Sachant qu'on met généralement la case avant le label,
Est-il possible d'avoir une règle de ce type ?

[== CSS ==]
input[type="checkbox"]+label{display:inline-block}

et en HTML

[== Indéfini ==]
<input type="checkbox" name="radio" value="ok" id="raio"><label for="radio">Mon Label</label>

Que l'inspiration soit avec vous, à jamais !

Hors ligne

#2 08/01/2016 15:30:19

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 535
Site Web

Re : label et input[type="checkbox"]

Bonjour,

Je trouve également dérangeant cette disposition de "display: block" pour les labels. D'abord ce n'est qu'une ligne de texte. Ensuite la plupart des visiteurs utilisent un PC ou une tablette qui, par défaut, sont en mode paysage et ont donc une largeur plus grande que la hauteur. On doit  donc privilégier la plus grande dimension en juxtaposant côte à côte les boites.
Il reste le cas des smartphones dont on utilise en général l'écran en mode portrait. Ce n'est pas un problème car display: inline-block permet de fixer la largeur de la boite. Et donc, si l'écran n'est pas assez large pour juxtaposer toutes les largeurs fixées, les boites vont s'empiler naturellement.

Reste à se positionner à droite ou à gauche.
Perso, je suis partisan à gauche. En effet, l'usage des labels n'est pas réservé exclusivement aux checkboxes. Ils peuvent être employés pour les 'input type="text"' et les "select".
Et il est plus agréable visuellement d'aligner tous champs de saisie où doit agir le visiteur. Ce qu'on obtient facilement en donnant une largeur fixe aux labels. Et pour éviter un grand champ d'espaces entre le label et le champ de saisie j'ajoute au label la règle "text-align: right". Et dans le HTML, je colle directement le label contre le "input", "select" ou "checkbox", en ajustant l'espace visuel dans les CSS avec "margin-right :5px". On final, j'arrive à ceci, par exemple :

[== CSS ==]
label { display: inline-block; width: 250px; margin-right: 5px; text-align: right; }

Il y a juste une exception où le label est placé après le checkbox. C'est quand le checkbox n'est pas affiché mais sert à afficher ou masquer d'autres éléments. Une astuce bien pratique qui évite d'avoir recours au javascript. Ce qui amène à ceci :

[== HTML ==]
<input type="checkbox" id="id_bloc1_nav" style="display: none">
<label for="id_bloc1_nav">Afficher le bloc</label>
<div>
Le bloc est affiché
</div>
[== CSS ==]
#id_bloc1_nav + label + div { display: none; }
#id_bloc1_nav:checked + label + div { display: block; }

Merci d'avoir soulevé le problème.

Dernière modification par bazooka07 (08/01/2016 15:32:48)


Geek à temps perdu, ubuntero en plus
( Un site hébergé chez LWS | un site en cours chez OVH | La plateforme de test chez FREE )
Bananapi, Orangepi, Raspberrypi
https://github.com/bazooka07/PluXml

Hors ligne

#3 08/01/2016 15:40:49

Gzyg
Membre
Inscription : 25/09/2006
Messages : 828

Re : label et input[type="checkbox"]

Salut,

Pour moi, le label à gauche est plus intuitif : on se pose d'abord une question, on fait un choix ensuite.

Et il faut aussi penser aux navigateurs vocaux qui devront lire l'intitulé de la case à cocher avant de présenter ladite case.


à plus,

Gzyg

Hors ligne

#4 08/01/2016 17:57:58

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 535
Site Web

Re : label et input[type="checkbox"]

Exactement c'est comme ceux qui signent avant d'avoir lu.


Geek à temps perdu, ubuntero en plus
( Un site hébergé chez LWS | un site en cours chez OVH | La plateforme de test chez FREE )
Bananapi, Orangepi, Raspberrypi
https://github.com/bazooka07/PluXml

Hors ligne

#5 08/01/2016 19:21:57

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 274

Re : label et input[type="checkbox"]

en fait les labels devraient tous être en inline-block big_smile


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#6 03/03/2016 14:42:08

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

Re : label et input[type="checkbox"]

Bonjour,

Merci pour votre remontée. Je vais voir comment améliorer ça.

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés