How to make a checkbox in HTML? (+ examples)

How to make a checkbox in HTML? (+ examples)

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.

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.

See also  How and Why to Advertise on TikTok?

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.

example of a checkbox on the HubSpot site

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.

See also  What is Neuromarketing? Operation, examples and limits

Sézane promo checkbox

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

multiple choice checkbox

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 also  9 Royalty Free Music Sites for Video Editing

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.

HubSpot Community

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.

CTA: Introductory guide to HTML and CSS

Leave a Comment

Your email address will not be published.