Comment faire une checkbox en HTML ? (+ exemples)

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.

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 s'affiche à l'écran.

Gagnez du temps dans la gestion de votre code et de vos données

Téléchargez ce guide pour effectuer des vérifications et des changements en masse avec les regex et gagner en productivité.

• Qu'est-ce qu'une regex ?
• La structure d'une regex
• Des astuces d'utilisation
• Mémento sur les regex

Télécharger le guide En savoir plus

Télécharger

Tous les champs sont obligatoires.

Merci d'avoir soumis le formulaire

Cliquez sur le lien pour accéder au contenu en tout temps

Télécharger

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é.

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 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 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.

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.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.