You want to make your forms as easy to fill out equally possible. That'south where checkboxes come in.

Checkboxes make subscribing to your newsletter or taking another activity on your site equally piece of cake as, well, checking a box. They can also permit users to select 1 or several options in a listing. That makes it possible to ask visitors how they heard about your brand, what their interests are, and other complex questions without asking them to type out lengthy responses.

That also makes information technology possible for visitors to have more complex actions, like signing up for multiple newsletters at once. Here's an example of a HubSpot grade that does exactly that with checkboxes.

Now that y'all sympathise the benefits of using checkboxes, permit'south cover everything you need to know about creating them in HTML.

Download Now: Free Intro Guide to HTML & CSS

HTML Checkbox Input

In HTML, a checkbox is an <input element> with a type aspect defined as "checkbox". The complete syntax is:

                                          
<input blazon="checkbox">

A checkbox typically contains a name and value attribute as well. This proper noun/value pair will be submitted to the server when the grade is submitted.

For case, let's say a form with checkboxes is asking about how someone heard nigh your business. In that case, the proper noun attribute of each input element might be "source." 1 of the value attributes of the input element might be instagram. And then the data submitted to the server would be "source=instagram."

If the value aspect is not specified, then the reported value is "on" by default.

Let's look at some examples of checkboxes below.

HTML Checkbox Instance

Let'southward say you want to ask visitors how they heard about your business concern. Parade, for case, includes this form on its order confirmation page.

Parade form uses checkboxes to ask buyers how they heard about the company

You tin create something like using the HTML checkbox element. In the example beneath, the user tin can select one or more options in the list.

See the Pen HTML Checkbox Example by Christina Perricone (@hubspot) on CodePen.

HTML Checkbox Checked

Many ecommerce businesses volition brandish an e-mail opt-in checkbox that's pre-selected during the checkout procedure. Take the social club grade on Nobull's site, for example.

You lot can code a checkbox to be pre-selected when the page loads using the checked boolean attribute. Yous simply have to add the give-and-take checked within the opening tag of the input element.

Here's an example of a checkbox toggled on by default:

Run across the Pen by Christina Perricone (@hubspot) on CodePen.

HTML Checkbox Required

Using another boolean attribute, you tin lawmaking a checkbox to be required. That ways, the user won't exist able to submit the form until they check the box. This attribute is often practical to the checkbox for agreeing to terms and conditions.

For example, AWS requires users to read and agree to the terms of the AWS Customer Understanding. If the box is unchecked, they can't continue on with the registration process.

AWS form requires users to check the AWS customer agreement checkbox to complete registration process

You can create something like using the required boolean attribute. In the example beneath, if you click the button without checking off the box, then you'll see an error message that says "Delight check this box if you desire to proceed."

See the Pen by Christina Perricone (@hubspot) on CodePen.

HTML Checkbox Size

Let's say y'all want to change the size of the checkbox. You can do and so using two different methods.

The first method is setting the width and tiptop backdrop in CSS. In the example beneath, I set the width and height of the checkbox to 10px. That makes the checkbox smaller than its default size, which is approximately 13px by 13px in Chrome.

Come across the Pen by Christina Perricone (@hubspot) on CodePen.

The second method is using the CSS transform property. Specifically, you'll use the scale() method to change the size of the checkbox. Whatever value y'all place inside the parentheses will increase or decrease the size of the checkbox by a multiple of its original size. This method works for all major browsers, including Mozilla Firefox. In the example beneath, I prepare the transform property to scale(one.5) then that it's one and half times its default size.

Meet the Pen HTML Checkbox Size [Transform Property] by Christina Perricone (@hubspot) on CodePen.

HTML Checkbox Style

You can style the HTML checkbox with custom CSS. It will require multiple rule sets since yous take to hide the browser'due south default checkbox, then create a custom checkbox besides equally a custom checkmark. Only the effect can brand your forms await more than consistent with your branding.

For example, the order grade on MBM Swim features a checkbox that turns black when a user clicks on information technology.

MBM Swim form includes custom HTML checkbox that turns black when checked off

Y'all can create a similar outcome on your website. Here'due south an instance of a custom checkbox with rounded edges that turns a shade of navy when checked:

Run into the Pen past Christina Perricone (@hubspot) on CodePen.

Coding Checkboxes

Checkboxes can assistance improve the user feel of filling out forms — which will likely mean more conversions on your site. The best part is that they're simple to lawmaking using HTML and a bit of CSS.

New Call-to-action

css introduction

Originally published Jun 24, 2021 7:00:00 AM, updated August 23 2021