L’utilisation de checkboxes est une bonne option lorsque vous souhaitez donner à vos visiteurs la possibilité de choisir plusieurs éléments dans un groupe de choix. À cet égard, la case à cocher fonctionne en face d’un bouton radio, ce qui ne vous permet de sélectionner qu’un élément parmi un groupe de choix., Dans sa forme la plus simple, une case à cocher est simplement un élément d’entrée avec la propriété type définie sur checkbox, comme ceci:
<input type="checkbox">cependant, comme pour tous les éléments d’entrée, vous devez définir un nom pour qu’il soit utilisable – sans nom, l’élément ne sera pas identifiable lors de Vous souhaitez également définir une valeur – ce sera la valeur envoyée au serveur si la case à cocher a été cochée., Voici un exemple:
<input type="checkbox" name="nameOfChoice" value="1">avec cet exemple, si la case a été cochée et que le formulaire est soumis à un serveur, le serveur pourra lire l’élément de formulaire « nameOfChoice » et sa valeur sera 1.
vérifié ou non vérifié?
notez que toutes les cases à cocher jusqu’à présent n’ont pas été cochées depuis le début – l’utilisateur devrait interagir avec la case à cocher pour changer son état de non coché à coché., C’est peut-être ce que vous voulez, mais parfois, vous voulez que la case à cocher soit cochée par défaut, soit pour suggérer un choix à l’utilisateur, soit parce que vous affichez une case à cocher avec une valeur qui correspond à un paramètre existant, par exemple à partir d’une base de données., Heureusement, c’est très simple – il suffit d’ajouter l’attribut coché à la case à cocher:
<input type="checkbox" name="nameOfChoice" value="1" checked>dans L’ancien temps de XHTML, où chaque attribut devrait toujours avoir une valeur, même les attributs booléens, cela ressemblerait à ceci:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />de toute façon devrait fonctionner dans tous les navigateurs « HTML5-comme ».
choix multiples
jusqu’à présent, toutes nos cases à cocher étaient de simples commutateurs, par exemple pour définir si une option est activée ou désactivée., Les cases sont grandes, mais comme mentionné précédemment, ils peuvent également être utilisés pour permettre à l’utilisateur une sélection d’options possibles. Permettez-moi de vous montrer un exemple soigné où cela a du sens:
remarquez comment nous avons maintenant plusieurs cases à cocher, mais elles partagent toutes le même nom (« favorite_pet ») mais des valeurs différentes (par exemple « Dogs »). Lorsque ce formulaire est renvoyé au serveur, toutes ces cases à cocher seront représentées par un seul nom, mais la valeur sera un tableau de 0 à 3 éléments., Si vous aviez utilisé des boutons radio au lieu de cases à cocher, l’utilisateur ne serait autorisé à choisir qu’un seul animal préféré, mais avec les cases à cocher, il ne peut sélectionner aucun d’entre eux, tous ou certains d’entre eux.
étiquettes pour les cases à cocher
Si vous avez testé l’exemple précédent, vous remarquerez que nous pouvons mettre du texte à côté d’une case à cocher, mais ce sont toujours deux choses distinctes – vous ne pouvez pas cliquer sur le texte pour déclencher la case à cocher. Cela peut être vraiment ennuyeux pour l’utilisateur, mais heureusement pour nous, c’est facile à résoudre: il suffit D’utiliser l’élément label!, Voici un exemple de base pour vous montrer la différence:
Deux cases, sans étiquette et un avec. Ils pourraient presque identiques, mais l’un avec l’étiquette peut être déclenchée en cliquant sur la case à cocher et de l’étiquette. C’est bien si vous êtes assis sur un PC de bureau avec une souris, mais encore mieux lorsque vous utilisez un appareil tactile comme un smartphone, où les petites cases à cocher peuvent être difficiles à frapper avec votre doigt.,
l’étiquette est très simple – elle utilise l’attribut for pour s’attacher à un élément de formulaire avec un attribut id correspondant (remarquez comment j’ai des « chiens » aux deux endroits).
travailler dynamiquement avec une case à cocher
comme tout autre élément DOM, vous pouvez manipuler une case à cocher en utilisant JavaScript. À cet égard, il pourrait être intéressant de vérifier si une case à cocher est cochée ou non et peut-être ajouter une logique pour contrôler le nombre d’options qu’un utilisateur peut sélectionner., Pour vous montrer comment cela peut être fait, j’ai étendu un exemple précédent (le sélecteur « animal préféré ») pour inclure de la magie JavaScript:
Permettez-moi de parcourir rapidement ce que fait ce code. Nous avons le même formulaire qu’auparavant, mais nous avons ajouté un gestionnaire d’événements à chacune des cases à cocher, ce qui les amène à appeler une fonction JavaScript (ValidatePetSelection) lorsque l’utilisateur clique dessus. Dans cette fonction, nous mettons la main sur toutes les cases à cocher pertinentes à l’aide de la fonction getElementsByName, puis nous les parcourons pour voir si elles sont cochées ou non – pour chaque élément vérifié, nous ajoutons à un nombre., Ce nombre est ensuite vérifié et s’il dépasse deux, nous alertons l’utilisateur du problème (seuls deux animaux peuvent être sélectionnés), puis nous renvoyons false. Renvoyer false empêchera la case à cocher d’être cochée.
c’était juste un exemple simple de la façon de travailler avec des cases à cocher en utilisant JavaScript. Vous pouvez faire beaucoup plus, surtout si vous utilisez un framework JavaScript comme jQuery, ce qui facilitera la sélection et la manipulation des éléments DOM.,
résumé
Les cases à cocher vous permettent de configurer des options sélectionnables pour vos utilisateurs – soit pour activer ou désactiver un seul paramètre, soit pour autoriser plusieurs choix, comme dans L’exemple Pet préféré. Vous devez utiliser des étiquettes pour lier votre case à cocher et le texte descriptif ensemble, pour permettre à l’utilisateur de cliquer sur une zone plus grande lors de la manipulation de la case à cocher – c’est également bon pour aider les technologies comme les lecteurs d’écran pour les malvoyants.
