In web development, when creating forms, you must provide options to enable users to choose either a single option or multiple options. This is where you can use an HTML checkbox. A checkbox is a small square box that allows users to select several choices out of a list of options. It is implemented in registration forms, surveys, settings panels, etc. In this blog, you will learn what a Checkbox in HTML is, its syntax, how you can create it, and which tag creates a checkbox for a form in HTML.
Table of Contents:
What is a Checkbox in HTML?
An HTML checkbox is an input element that enables the user to choose a single item or a number of items from a given list. It is displayed using a small square box that can be selected or unselected. The browser or JavaScript can easily read the state of a checkbox for processing forms.
Syntax of HTML Checkbox
The syntax of the HTML checkbox uses the <input> tag with the type=”checkbox” attribute. The basic syntax looks like this:
<input type="checkbox" name="option1" value="HTML"> HTML
Where,
- <input>: It is used to define the input field in HTML.
- type=”checkbox”: It specifies that the input field is a checkbox.
- name: It gives a name to the checkbox.
- value: It is used to define the value that is sent when the checkbox is clicked.
Master Full Stack Development from Scratch
Learn web development, deployment, and application management from the basics
HTML Checkbox Attributes and Values
While working with an HTML checkbox, you can customize its behavior and appearance using different attributes and values. These attributes allow you to control the way the checkbox works inside a form, what data it sends, and how it interacts with the users. Understanding these will help you to create better and more interactive forms.
In this section, you will learn about the most commonly used HTML checkbox attributes and values.
1. type Attribute
The most important attribute of an HTML checkbox is the type attribute. It tells the browser that the input field is a checkbox.
Explanation: Here, type=”checkbox” is used to define that this input will appear as a small box that the users can check and uncheck.
2. name Attribute
The name attribute gives a unique name to your checkbox inside the form. This name helps the server to identify which checkbox was checked when you submit the form.
If there are multiple checkboxes with the same name, all the checked values are grouped together when you submit the form.
3. value Attribute
The value attribute is not specified. A default value of “on” is sent to the servers when the checkboxes are checked.
Explanation: Here, if the checkbox is selected, language=HTML is sent by the form to the server.
4. checked Attribute
The checked attribute selects the checkbox by default when the page loads. This can be useful when you want the checkbox to start in a checked state.
Explanation: Here, the checkbox will appear as checked when you load the page.
5. id Attribute
The id attribute provides the checkbox with a unique identifier. It is used mainly with the <label> tag, which makes the form easy to use.
Explanation: Here, when you click on the label text, the checkbox toggles automatically. This is because the label is linked to the checkbox through the id.
6. disabled Attribute
The disabled attribute disables the checkbox and makes it unclickable. It is used when you want to show an option, but don’t want the users to change it.
Explanation: Here, the checkbox will be visible, but you cannot use it because the disabled attribute prevents any user interaction or form submission for that option.
7. required Attribute
The required attribute makes it important for the users to check the checkbox before the form is submitted. This is often used in terms and conditions or for important agreements.
Explanation: Here, if the user does not check the checkbox, the form will not be submitted.
The form attribute is used to connect a checkbox to a specific form, even if the checkbox is placed outside the <form> tag. You have to just refer to the form’s id.
Explanation: Here, even though the checkbox is present outside the form, it will still be a part of the form submission. This is because of the form attribute.
9. class Attribute
You can use the class attribute to style your HTML checkbox with the help of CSS. You can also assign one or more class names and apply them to custom designs.
Explanation: Here, the checkbox includes a custom class that allows applying unique CSS styles, helping maintain a consistent and visually appealing design across all checkboxes on the webpage.
How to Create a Checkbox in HTML
In order to create a checkbox, you can use the <input> tag with the type=”checkbox” attribute. This tells the browser to display a checkbox element. If you ever wonder which tag is used to create a checkbox in HTML, it is the <input> tag.
Now, let us have a look at a simple example of how to create a checkbox in HTML.
Example:
Output:
In the above example, you have learned how to create a checkbox in HTML and how to add a checkbox inside HTML.
Adding Checkboxes with Labels
You can use labels with checkboxes, which helps to make your form more user-friendly and accessible. A label allows the users to click on the text that is present next to a checkbox, and not just the small box. A label can be created in two ways:
1. By wrapping the checkbox inside the <label> tag.
2. By linking the label to the checkbox using the for and id attributes.
Example 1: Wrapping Method
Output:
In the above example, by clicking on the “Receive Updates”, you will check or uncheck the box.
Example 2: Linking Method
Output:
Explanation: In the above code, the for=”terms” in the <label> tag is used to link it to the checkbox with the id=”terms”. This is an alternative way to connect text and checkboxes.
Grouping and Default Checked State
Sometimes, you might need to group multiple checkboxes so that users can select multiple options. For example, if you want the users to choose their favourite programming languages, you can do it like this:
Example: Grouping Checkboxes
Output:
Explanation: The above HTML code is used to create a simple form that allows users to select one or more of their favourite programming languages using checkboxes.
Adding a Default Checked State
You can also make a checkbox checked by default by using the checked attribute. This means that when the page loads, the checkbox will already be selected.
Example:
Output:
Explanation: The above HTML code is used to create a checkbox that is checked by default. This allows the users to enable or disable notifications.
Checkbox Validation in HTML
When you use checkboxes in your forms, it is important for you to make sure that the users select them correctly before they submit the form. This process is called Checkbox Validation in HTML. Validations help to ensure that the users give the required responses, like agreeing to terms or selecting at least one option. In this section, we will go through the different types of checkbox validation in simple terms.
1. Required Validation
In checkbox validation in HTML, the most basic form is the required attribute. If you want the users to check a box before submitting the form, you can add the required attribute inside the input tag of the checkbox.
For example, in a form where the users must agree to the terms and conditions, you can write:
This helps to ensure that the form cannot be submitted unless you have selected the checkbox.
2. JavaScript Validation
While HTML provides you with basic validation, JavaScript allows you to perform more flexible and dynamic checkbox validation in HTML. For example, you can check whether one or more boxes are selected before you submit the form. With the help of JavaScript, you can display a message or stop submitting the form if no checkbox is selected. This can be useful when you want to validate multiple checkboxes or customize error messages according to your needs.
3. Server-side Validation
Even though you use HTML or JavaScript for client-side validation, it is still important to validate the checkbox on the server side also. Server-side validation helps to ensure the security of data because users can sometimes bypass front-end validations. On the server (like in PHP, Python, or Node.js), you can check whether the data from the checkbox is received correctly before it is processed. This helps to prevent incomplete or incorrect form submissions and also helps to keep your data accurate.
4. Group Validation
At times, you might have multiple checkboxes where the users need to select one or more options. For example, choosing your favourite hobbies or skills. In group validation, you need to check whether at least one checkbox in the group is selected. You can perform this validation using JavaScript, which helps to make sure that users pick at least one option before they move forward. This can be helpful when multiple choices are optional, but selecting one does not make any sense to your form.
5. Feedback to Users
When a user forgets to check a box that is required, it can be helpful to show the feedback. It makes your form more user-friendly and reduces confusion. You can also display error messages like “Please check this box to continue” or highlight the checkbox field in red. This visual cue helps users understand what they missed and how they can fix it quickly.
6. HTML5 Validation
HTML5 makes checkbox validation easier with the help of its built-in attributes, such as required and novalidate. When you use the required attribute, the browser checks the checkbox automatically before submission. If the user tries to submit before selecting the checkbox, the browser shows a default error message.
The difference between a Checkbox and a Radio Button is given below in tabular format for your better understanding.
| Feature |
Checkbox |
Radio Button |
| Selection Type |
Allows you to select multiple options at once. |
Allows you to select only one option at a time. |
| Input Type |
<input type=”checkbox”> |
<input type=”radio”> |
| Use Case |
Used when users can choose more than one answer (e.g., selecting hobbies). |
Used when users must choose only one answer (e.g., selecting gender). |
| Independent Selection |
Each checkbox works independently of the others. |
Radio buttons are grouped together using the same name attribute. |
| Deselection |
Users can uncheck a checkbox to remove the selection. |
Once selected, users cannot deselect a radio button unless another option is chosen. |
| Default State |
Can be checked or unchecked by default. |
Only one radio button in a group can be checked by default. |
| Example |
Select your skills: [ ] HTML [ ] CSS [ ] JavaScript |
Choose your gender: ( ) Male ( ) Female |
Get 100% Hike!
Master Most in Demand Skills Now!
Styling HTML Checkboxes with CSS
While creating an HTML checkbox, it looks different depending on the type of browser or operating system. You can use CSS to style the checkbox and make it look more attractive.
Now, we will discuss how to style an HTML checkbox using CSS.
1. Hiding the Default Checkbox
By default, browsers can show their own style for checkboxes. In order to customize it, you need to hide the default checkbox first and then your own checkbox using CSS. To do this, you need to set the opacity of the checkbox to 0 and then use a label element to display a custom checkbox.
2. Creating a Custom Checkbox
You can use the ::before or ::after pseudo-elements of the label in order to create a design of a custom checkbox, such as a colored box or checkmark when it is selected. A code example is given below to demonstrate the process.
Example:
Output:
Explanation:
The above HTML and CSS code is used to create a custom-styled checkbox. It hides the default checkbox and shows a blue box with a white checkmark when it is selected.
Using JavaScript with Checkboxes
With the help of JavaScript, you can make an HTML checkbox more interactive. You can check whether the checkbox is checked or unchecked, perform actions based on its state, and handle form submission values very easily. Now, let’s break it down in simple terms:
1. Detecting and Toggling Checkbox State
If you want to know if your checkbox is checked or not, you can use the .checked property of JavaScript. This property gives you true if the checkbox is selected and false if it is not.
Example:
Output:
Explanation: The above HTML is used to check the state of the HTML checkbox when you click on the button. It then displays the message, which shows whether the checkbox is checked or not.
JavaScript can also be used to handle form submissions with checkboxes. When a user submits a form, you can capture the checkbox that is selected and show it on the screen or send it to the server.
Example:
Output:
Explanation: The above code is used to take all the checked HTML checkboxes. After that, it collects all their values and then displays them on the page when you click on the “Submit” button.
Accessibility and Browser Support
An HTML checkbox is accessible and supported by all the major browsers. In order to improve accessibility, you should always link the checkbox with a <label> so that the users and screen readers understand its purpose.
Example:
Users can navigate using the keyboard, and it works consistently on the major browsers like Chrome, Firefox, Edge, and Safari. Hence, you can say that the HTML checkbox is simple, reliable, and fully compatible across browsers.
Common Mistakes
1. Many people forget to add the label for this checkbox. This makes it hard for the users and screen readers to understand the use of the checkbox.
2. Each HTML checkbox should have a unique id attribute. Using the same id again and again can create confusion and prevent the labels from working properly.
3. Without a value, your form may not send the correct data when the HTML checkbox is checked. You should always set a meaningful value like value=”subscribe”.
4. While using multiple checkboxes for the related options, you need to ensure that they share the same name if you want to collect them together. Otherwise, your form might miss some inputs.
5. If you do not test your HTML checkbox for keyboard navigation or screen readers, this can make your form look less user-friendly. You should always ensure that it can be toggled using the keyboard and is clearly labeled.
Best Practices
1. Make sure that all the HTML checkboxes are linked with a label, as it makes it easier to understand and more accessible.
2. Clear names and values should be given to each box so that the form data becomes easy to identify.
3. The same name has to be used for related options so that you can organize and process them correctly.
4. Make sure that users can navigate and toggle the checkbox using the tab and spacebar keys.
5. Make sure that your checkbox looks and works properly on all browsers and screen sizes.
Real-World Use Cases
1. HTML checkboxes can be used in the subscription forms so that users can choose if they want to receive newsletters or updates.
2. The checkboxes can also be used in terms and conditions to make the users tick before submitting a form or signing up.
3. It is used to enable or disable features like dark mode or notifications.
4. Multiple checkboxes can be used to let the users select more than one answer or opinion.
5. It can also be used to allow the customers to refine the search results by checking for the product options like size, color, or brand.
Conclusion
In conclusion, the HTML checkbox is a simple yet powerful form element that allows users to make single or multiple selections easily. You can customize it, validate it, and even control it with JavaScript to make your web forms more interactive. Understanding how to create a checkbox in HTML using the <input> tag with type=”checkbox” is the key to building user-friendly forms. Remember, the tag that creates a checkbox for a form in HTML is the <input> tag, which you can enhance with labels, CSS styling, and accessibility features. When used correctly, HTML checkboxes make your forms cleaner, more flexible, and easier for users to interact with.
Upskill today by enrolling in our Full Stack Development Course. Prepare for your next interview with our JavaScript Interview Questions prepared by industry experts.
HTML Checkbox – FAQs
Q1. Can I select multiple checkboxes in an HTML form?
Yes, you can select multiple checkboxes at once since each HTML checkbox works independently.
Q2. How can I make a checkbox checked by default in HTML?
You can add the checked attribute to the tag to make it selected by default.
Q3. Can I disable a checkbox in HTML?
Yes, you can use the disabled attribute to prevent users from changing the checkbox state.
Q4. Is it possible to use images instead of the default checkbox design?
Yes, you can hide the default HTML checkbox and style it with CSS or images for a custom look.
Q5. How can I check if a checkbox is selected using JavaScript?
You can use the .checked property in JavaScript to see whether the checkbox is selected or not.