The check box HTML displays a checkbox on a web page. The checkbox is useful for various purposes. This element makes it possible in particular to obtain authorization from the Internet user in accordance with legal requirements: he ticks the dedicated box to accept only essential cookies, to confirm that he accepts the T&Cs of the company before proceeding to the online payment or again to consent to receive the brand’s newsletter.
> Download this guide and learn the basics of HTML and CSS ” align=”middle”/>The checkbox is also an essential element of the multiple-choice form: the company uses it to enrich its customer knowledge by means of a questionnaire which suggests answers. Note that unlike radio buttons, the checkbox system allows the user to freely select and deselect several boxes. Inserting checkboxes speeds up the filling of forms, thus improving the user experience on the site: the Internet user does not need to write his answers, he is more inclined to fill out the form. And once the form is submitted, the company recovers valuable data to use as part of its business strategy.
Table of Contents
Input checkbox in HTML
In HTML, the checkbox is an input element. Input elements display an interactive control on the web page, to allow the user to perform an action or enter information. There are a multitude of them, and it is their type attribute that controls their behavior. The input element of type “button”, for example, creates a clickable button. The input element of type “checkbox” creates a checkbox.
To insert a checkbox on the web page, you must use the HTML code: .
The element has several attributes:
- The “checkbox” type attribute commands the browser to display a checkbox. By default, the box is square and has standard dimensions. The CSS language allows you to customize the appearance of the box, with rounded corners for example, as well as its dimensions.
- The name attribute gives a name to the checkbox. Example: the company asks the Internet user how he found out about his website; the name attribute can be named “source”.
- The value attribute, for value in French, provides information on the response. In the previous example: the value attributes can be “search engine”, “social network” and “word of mouth”.
In the example: when the Internet user ticks the “social network” box, the data is transmitted in the form “source=social network”. Note that the name and value attributes are not visible to the Internet user: it is HTML language that allows the machine and the human to communicate. Only item text
HTML checkbox examples
Checkbox in a form
HubSpot offers webinars for businesses. A page of the site is dedicated to registrations. On this occasion, the professional can ask to be contacted for a product demo and to subscribe to the HubSpot newsletter. To this end, the webinar registration form includes two checkboxes. The checkbox allows here to collect contact information to provide the requested service.
Checkbox in an e-commerce shopping cart
The Sézane ready-to-wear brand provides credit notes and promotional codes under conditions. The customer can use them when validating his basket, to deduct the sum from the total price of his order. On the delivery page, a checkbox allows the customer to use his credit note or promo code: by checking the box, a field appears to enter the code or credit note number. The checkbox here allows you to trigger an action.
Checkbox for cookie consent
In accordance with the law, the Ferrero company allows the site visitor to set cookies. The user checks and unchecks the boxes according to his requirements. The checkbox here allows you to authorize or prohibit the company from depositing cookies.
Checkbox to filter
Amazon provides an advanced search engine to refine its product suggestions. To find a novel, the user can for example check his language and format preferences. The checkbox allows here to deepen customer knowledge to improve the quality of service.
How to code a checkbox?
The HTML language offers many possibilities for configuring the checkbox. In particular, it is possible to insert a single-choice or multiple-choice form, to make a checkbox mandatory or to display a box checked by default.
HTML code for a single choice checkbox
To code a single-choice checkbox, you must use the HTML code: and add a label to inform about the purpose of the form. The user then chooses to tick the box or not.
The single-choice checkbox is used in particular to authorize the company to collect customer data for the sending of its marketing communications. Example of HTML code for a single choice checkbox:
See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.
HTML code for a multiple choice checkbox
To code a multiple-choice checkbox, insert as many elements in the HTML code as there are choices. For each, you must enter a specific value attribute and add a dedicated label. The user can then check all the boxes of his choice.
The multiple-choice checkbox is used in particular to enrich customer knowledge, and makes it possible to collect information about the user. Example: the company asks the visitor to the site about his centers of interest, to offer him personalized purchase suggestions. To enrich the suggestions, the questionnaire must allow multiple choices. The company uses the following HTML code to create its checkbox:
See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.
HTML code for a mandatory selection checkbox
The form can condition an action on the mandatory prior selection of a box: if the box is not checked, an error message is displayed. To code a checkbox with mandatory selection, you must use the boolean attribute required.
This type of checkbox is used in particular when the company must obtain the customer’s guarantee that he has read and accepts the general conditions of sale, before validating his order online. Example of HTML code to make the selection of the box mandatory:
See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.
HTML code to check a default checkbox
The checkbox can be displayed when loading the web page with a box checked by default. To code a checked box in HTML, you must use the boolean attribute checked.
The company wants the box to be preselected by default when opening the form page, leaving the user free to deselect it. In this example, the company is targeting a French audience. To facilitate filling, and thus improve the UX, the “French” language is already checked.
See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.
To go further, download this free guide and learn the definitions, differences and basic code elements of these two programming languages to manage your website.
