Astuce #6: Styler les checkbox et les boutons radio avec la balise LABEL

Bonjour à tous et bienvenue dans cette nouvelle vidéo où l'on va découvrir une nouvelle astuce de développement web. Cette fois, nous allons nous intéresser au CSS et je vais vous montrer comment styler les champs de formulaires, en l'occurrence les boutons radio et les checkbox. À la fin de la vidéo, je partagerai avec vous une petite astuce qui permet de contourner les problèmes liés au cache du navigateur vis-à-vis des styles CSS. Si vous avez déjà essayé de styler un formulaire avant, alors vous avez certainement remarqué que les boutons radio et les checkbox refusent de se soumettre à vos styles CSS, et ils gardent leur style par défaut attribué par le navigateur qui affiche la page. De toute façon, c'est le cas sur la plupart des navigateurs courants. Bien entendu, ces éléments minuscules qui sortent du lot avec leur style médiocre au milieu des champs que vous avez stylés minutieusement compromettent sérieusement l'apparence de votre page. Alors nous allons voir ensemble comment donner un bon aperçu à ces champs-là. Dans ce code, nous avons intégré 2 champs de type radio, ce qui donne sur navigateur le rendu suivant. Puisqu'il est difficile de styler les boutons radio directement, alors nous allons recourir à une technique qui se base sur la balise label, que l'on va intégrer d'ailleurs juste après chacun de ces boutons radio que l'on a intégrés. Les balises <label> sont des éléments actifs que l'on peut associer à d'autres balises existantes dans le document, en l'occurrence les champs de formulaire. Et pour associer la balise <label> au champ de formulaire concerné, on va ajouter l'attribut for et comme valeur on mettra l'ID qui est dans ce cas lm1. Désormais, la balise <label> courante est associée à ce champ de formulaire. On fera la même chose pour la deuxième balise. Les balises label ne sont pas visibles puisqu'ils contiennent rien. Donc on va leur appliquer un style CSS afin qu'ils soient perceptibles. On appliquera par exemple la bordure avec une nuance bleue. Hauteur et une largeur de 20 pixels. On applique le inline-block parce que les balises label sont inline et du coup elles sont pas redimensionnables. Regardons maintenant ce que ça va donner. Nos balises label sont intégrées de cette manière. Une fois que je clique sur la balise, on constate bien que l'élément input associé est activé. On va essayer d'assurer un alignement vertical centré. Comme ça. Donc vous avez compris que ce qu'on va garder ce sont les labels et on va par la suite masquer les inputs. Mais une fois que je clique sur un label, il faut bien qu'il ait la même apparence que l'input type radio. Donc on va essayer d'inclure une div à l'intérieur que l'on va colorer avec du bleu aussi. On applique la largeur et la hauteur 14 pixels. Bon, il faut que ce soit inférieur à 20 pixels. Et pour l'arrière-plan, on mettra la même couleur que la bordure. Bien sûr, il faut pas oublier d'intégrer la div dans le HTML. Exécutons. Voilà. Maintenant on va essayer de centrer la div au milieu. On va appliquer le style flex sur le label. Comme ça on aura centré les éléments qui sont inclus dedans. C'est bon. Et pour ne pas avoir de retour à la ligne, on va mettre inline-flex. Comme ça. On va appliquer un arrondi de bordure pour avoir une forme circulaire comme le bouton type radio. Par exemple 40px. Même chose ici. Voilà, comme ça. L'idée c'est que le bouton radio qui sera activé, il aura la div qui sera visible au milieu. Donc ce qu'on va faire c'est masquer ces divs. On va tout simplement les colorer en blanc. On va changer leur couleur ici. Maintenant c'est du blanc. Une fois que je clique sur un label, ce qui a pour effet d'activer le bouton radio associé, dans ce cas je vais colorer la div en bleu. Donc on va faire le truc suivant. Dans le HTML, on va cibler les boutons type radio, bon avec leur classe. Et on va mettre la pseudo-classe checked pour dire les boutons radio qui sont activés. Plus. Label puis div. En fait, ce sélecteur signifie la balise div qui accompagne en direct la balise label qui est située juste après un checkbox activé. C'est un petit peu comme ça, donc la balise div qui est incluse dans un label qui est située après un checkbox à condition que celui-ci soit activé. Maintenant, on va changer la couleur d'arrière-plan de cette div en bleu. Regardons maintenant ce que ça va donner. Visiblement, j'ai commis une erreur. C'est checked comme ça. Voilà. Et voilà, donc maintenant on constate bien que ça donne l'effet souhaité. Alors tout ce qui nous reste à faire, c'est masquer les checkbox type radio. On mettra display none. Et voilà, donc maintenant on a réussi l'effet souhaité. On peut ajouter un petit effet d'animation avec les transitions. Même chose ici, exécutons. Voilà, c'est mieux comme ça. Alors, vous avez remarqué que nous avons reproduit le même comportement que les inputs type radio. D'ailleurs, on peut ajouter d'autres boutons sur le même document, comme ça. Tout ce qu'on a à faire, c'est changer le ID. Même chose ici. Par exemple, c'est 4. Et voilà. Et pour le checkbox, on va simplement changer le HTML. Au lieu de radio, on mettra checkbox. Comme ça. La forme n'a pas changé puisqu'il faut aussi retoucher le CSS, mais par nature les checkbox on peut les cocher simultanément. Alors là on va retourner sur le CSS, on va simplement retirer le border-radius pour retrouver la forme rectangulaire. Et voilà. Bien sûr vous êtes libre de modifier la forme de la div à l'intérieur comme vous souhaitez. Vous pouvez même inclure des images ou bien d'autres objets à l'intérieur. C'est-à-dire que cette technique vous permet de vraiment réussir votre style comme vous le souhaitez. Avant de finir, il y a une autre petite astuce que je souhaite partager avec vous. En fait, il y a des fois que vous apportez des modifications à votre feuille CSS, mais les nouveaux styles ne s'appliquent pas sur le document HTML malgré le fait que les codes vous semblent corrects. En effet, les navigateurs disposent d'un cache qui mémorise certaines données, comme les images, les styles CSS et même les documents PDF. Si vous actualisez la page, le navigateur vérifie s'il dispose déjà des ressources qui sont incluses dedans. En l'occurrence les feuilles CSS. Si celle-ci est présente dans le cache alors elle n'est pas chargée et c'est le style mémorisé qui est appliqué. Sur le plan technique, c'est une excellente chose car vous épargnez au navigateur de télécharger quelques kilooctets de plus ce qui optimise le temps de chargement de la page. Mais si vous êtes en phase de développement et que vous souhaitez tester vos styles CSS alors le cache du navigateur présente un obstacle dans ce cas, car il faut à chaque chargement vider celui-ci en effaçant l'historique de navigation. La solution est simple, il s'agit de changer le nom de la feuille de style CSS à chaque chargement. Ne vous inquiétez pas, nous n'allons pas renommer notre fichier CSS mais nous allons juste ajouter un paramètre variable à l'attribut href pour faire croire au navigateur que c'est une feuille de style différente qui est sollicitée. Nous allons opter pour le timestamp Unix à l'aide de la fonction PHP time comme ceci. Dans l'attribut href, on va ajouter point d'interrogation. Le paramètre t par exemple, et on appelle la fonction PHP TIME. Nous avons déjà vu cette fonction dans la leçon consacrée aux dates et heures en PHP. Il permet de retourner le Timestamp Unix représenté par le nombre de secondes qui se sont écoulées depuis le 1er janvier 1970 à minuit. Autrement dit, à chaque seconde la valeur de TIME change. Regardons ce qui va se passer sur le navigateur. On va visualiser le code source chargé sur le client. Et voilà la valeur de t. Quand j'actualise, on constate que ça change. Et dans ce cas, le navigateur aura l'impression que c'est une nouvelle feuille de style qui est sollicitée et il sera obligé de la charger. Merci pour votre attention et à la vidéo prochaine.