La checkbox HTML affiche sur une page web une case à cocher. La checkbox est utile à des fins diverses. Cet élément permet notamment d'obtenir une autorisation de l'internaute conformément aux exigences légales : il coche la case dédiée pour accepter les seuls cookies essentiels, pour confirmer qu'il accepte les CGV de l'entreprise avant de procéder au paiement en ligne ou encore pour consentir à recevoir la newsletter de la marque.

>> Téléchargez ce guide et découvrez les bases des langages HTML et CSS La checkbox est également un élément incontournable du formulaire à choix multiple : l'entreprise s'en sert pour enrichir sa connaissance client au moyen d'un questionnaire qui suggère des réponses. À noter que contrairement aux boutons radio, le système de checkbox permet à l'internaute de sélectionner et désélectionner librement plusieurs cases. Insérer des checkbox permet d'accélérer le remplissage des formulaires, améliorant ainsi l'expérience utilisateur sur le site : l'internaute n'a pas besoin de rédiger ses réponses, il est mieux enclin à remplir le formulaire. Et une fois le formulaire soumis, l'entreprise récupère des données précieuses à exploiter dans le cadre de sa stratégie commerciale.


Input checkbox en HTML

En langage HTML, la checkbox est un élément input. Les éléments input affichent sur la page web un contrôle interactif, pour permettre à l'internaute d'effectuer une action ou de saisir des informations. Il en existe une multitude, et c'est leur attribut type qui commande leur comportement. L'élément input de type "button", par exemple, crée un bouton cliquable. L'élément input de type "checkbox" crée une case à cocher.

Pour insérer une case à cocher sur la page web, il faut utiliser le code HTML : < input type="checkbox" > .

L'élément a plusieurs attributs :

  • L'attribut type "checkbox" commande au navigateur d'afficher une case à cocher. Par défaut, la case est carrée et aux dimensions standards. Le langage CSS permet de personnaliser l'aspect de la case, aux coins arrondis par exemple, ainsi que ses dimensions.
  • L'attribut name donne un nom à la case à cocher. Exemple : l'entreprise demande à l'internaute comment il a connu son site web ; l'attribut name peut porter le nom de « source ».
  • L'attribut value, pour valeur en français, renseigne sur la réponse. Dans l'exemple précédent : les attributs value peuvent être « moteur de recherche », « réseau social » et « bouche-à-oreille ».

Dans l'exemple : lorsque l'internaute coche la case « réseau social », les données sont transmises sous la forme "source=réseau social". À noter que les attributs name et value ne sont pas visibles par l'internaute : c'est du langage HTML qui permet à la machine et à l'humain de communiquer. Seul le texte de l'élément

Que sont les langages CSS et HTML ?

Téléchargez ce guide gratuit et découvrez les définitions, les différences et les éléments de code de base de ces deux langages de programmation pour gérer votre site web.

Exemples de checkbox HTML

 

Checkbox dans un formulaire

HubSpot propose des webinars à destination des entreprises. Une page du site est dédiée aux inscriptions. À cette occasion, le professionnel peut demander à être contacté pour une démo produit et à s'abonner à la newsletter HubSpot. À cet effet, le formulaire d'inscription au webinar inclut deux cases à cocher. La checkbox permet ici de collecter les informations de contact pour fournir le service demandé.

exemple de checkbox sur le site HubSpot

 

Checkbox dans un panier e-commerce

La marque de prêt-à-porter Sézane fournit sous conditions des avoirs et des codes promotionnels. Le client peut les utiliser au moment de valider son panier, pour déduire la somme du prix total de sa commande. Sur la page de livraison, une case à cocher permet au client d'utiliser son avoir ou son code promo : en cochant la case, un champ apparaît pour renseigner le numéro du code ou de l'avoir. La checkbox permet ici de provoquer une action.

checkbox promo sézane

 

Checkbox pour le consentement aux cookies

Conformément à la loi, l'entreprise Ferrero permet au visiteur du site de paramétrer les cookies. L'utilisateur coche et décoche les cases selon ses exigences. La checkbox permet ici d'autoriser ou d'interdire l'entreprise à déposer des cookies.

checkbox cookies

 

Checkbox pour filtrer

Amazon met à disposition un moteur de recherche avancé pour affiner ses suggestions de produits. Pour trouver un roman, l'utilisateur peut par exemple cocher ses préférences de langue et de format. La checkbox permet ici d'approfondir la connaissance client pour améliorer la qualité du service.

checkbox choix multiple

 

Comment coder une checkbox ?

Le langage HTML offre de nombreuses possibilités pour paramétrer la checkbox. Il est notamment possible d'insérer un formulaire à choix unique ou à choix multiple, de rendre une case obligatoire à cocher ou encore d'afficher une case cochée par défaut.

 

Code HTML pour une checkbox à choix unique

Pour coder une checkbox à choix unique, il faut utiliser le code HTML : < input type="checkbox" > et ajouter un label pour renseigner sur l'objectif du formulaire. L'utilisateur choisit alors de cocher ou non la case.

La checkbox à choix unique est notamment utilisée pour autoriser l'entreprise à collecter des données clients pour l'envoi de ses communications marketing. Exemple de code HTML pour une checkbox à choix unique :

See the Pen checkbox-html_choix-unique by HubSpot France (@HubSpot-France) on CodePen.

 

Code HTML pour une checkbox à choix multiple

Pour coder une checkbox à choix multiple, il faut insérer dans le code HTML autant d'éléments < input type="checkbox" > qu'il y a de choix. Pour chacun, il faut renseigner un attribut value spécifique et ajouter un label dédié. L'utilisateur peut alors cocher toutes les cases de son choix.

La checkbox à choix multiple est notamment utilisée pour enrichir la connaissance client, et permet de collecter des informations à propos de l'utilisateur. Exemple : l'entreprise interroge le visiteur du site sur ses centres d'intérêts, pour lui proposer des suggestions d'achat personnalisées. Pour enrichir les suggestions, le questionnaire doit permettre des choix multiples. L'entreprise utilise le code HTML suivant pour créer sa checkbox :

See the Pen checkbox-html_choix-multiple by HubSpot France (@HubSpot-France) on CodePen.

 

Code HTML pour une checkbox à sélection obligatoire

Le formulaire peut conditionner une action à la sélection préalable obligatoire d'une case : si la case n'est pas cochée, un message d'erreur s'affiche. Pour coder une checkbox à sélection obligatoire, il faut utiliser l'attribut booléen required.

Ce type de checkbox est notamment utilisé lorsque l'entreprise doit obtenir la garantie du client qu'il a lu et qu'il accepte les conditions générales de vente, avant de valider sa commande en ligne. Exemple de code HTML pour rendre la sélection de la case obligatoire :

See the Pen checkbox-html_selection-obligatoire by HubSpot France (@HubSpot-France) on CodePen.

 

Code HTML pour cocher une case checkbox par défaut

La checkbox peut s'afficher au chargement de la page web avec une case cochée par défaut. Pour coder en HTML une case cochée, il faut utiliser l'attribut booléen checked.

L'entreprise veut que la case soit présélectionnée par défaut au moment d'ouvrir la page du formulaire, laissant l'internaute libre de la désélectionner. Dans cet exemple, l'entreprise s'adresse à une audience française. Pour faciliter le remplissage, et améliorer ainsi l'UX, la langue « Français » est déjà cochée.

See the Pen checkbox-html_coche-par-defaut by HubSpot France (@HubSpot-France) on CodePen.

Communauté HubSpot

 

Pour aller plus loin, téléchargez ce guide gratuit et découvrez les définitions, les différences et les éléments de code de base de ces deux langages de programmation pour gérer votre site web. Nouveau call-to-action

Publication originale le May 9, 2022 5:49:14 AM, mise à jour le 05 septembre 2022

Sujet(s):

HTML