label et input[type="checkbox"]

danielsandanielsan Member
dans Discussions
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>

Réponses

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    janvier 2016 modifié
    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.

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

  • GzygGzyg Member
    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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Exactement c'est comme ceux qui signent avant d'avoir lu.

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

  • danielsandanielsan Member
    en fait les labels devraient tous être en inline-block :D
  • JosJos Member
    Bonjour,

    Merci pour votre remontée. Je vais voir comment améliorer ça.
Connectez-vous ou Inscrivez-vous pour répondre.