This blog will explain the basic idea about the creation of Checkbox, and its purpose and illustrate the basic implementation with the help of examples.
Introduction
The checkboxes are one of the essential components while creating the HTML Forms, as it plays a crucial role by allowing users to make binary choices, ie, yes/no, or true/false, or select multiple options from a list. In HTML, a checkbox can be created by defining the type attribute of the <input> tag inside a <form> tag. By default, checkbox inputs are rendered as checked boxes when activated.
Syntax
<input type="checkbox">
The checkbox can be categorized based on the requirement, ie checkbox can be Default Selection, disabled, Read-Only, Custom Styling, or Hidden.
Supported Attributes
A checkbox inherits all the global attributes that an input tag can support.
Example:
This example illustrates the basic implementation of Checkbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Checkbox </title>
</head>
<body>
<h3>Choose from the below options</h3>
<form>
<label>
<input type="checkbox" name="fruit" value="value1">
Fruits
</label>
<label>
<input type="checkbox" name="veg" value="value2">
Veggies
</label>
<label>
<input type="checkbox" name="non-veg" value="value3">
Non-veg
</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
Conclusion
By permitting the users to make single/multiple selections in a form, the checkbox can help to extend the functionality by adding additional features. Furthermore, this checkbox can be customized by including the CSS to style it and improve the functionality by including the JS function.
FAQ’s
Q1. What is a Checkbox?
The checkbox is an attribute value for type-attribute in the HTML Form which permits the users to select more than one option from a set.
Q2. How to create a checkbox in HTML?
The below syntax can be used to create the checkbox in HTML
<input type=”checkbox”>
Q3. Can the checkboxes be grouped in HTML Form?
Yes, the checkbox can be grouped in the Form by implementing the same name attribute for all checkboxes in the group.
Q4. How to use the checkbox for validation check before submitting a form?
The required attribute can be used to ensure the checkbox is selected before form submission.
Q5. Is it possible to make a checkbox check by default?
Yes, the checkbox can be checked by default using the checked attribute to pre-select a checkbox when the page loads.
Q6. How to disable a checkbox in HTML?
You can disable a checkbox by using the disabled attribute.
Q7. How to get the value of a checkbox in a form submission?
You can use the value attribute to check the value of a checkbox.
Q8. Can a checkbox have a label in HTML?
Yes, a checkbox can have a label. You can use the <label> tag.
Q9. How to check if a checkbox is checked using JavaScript?
You can check this by accessing its checked property.
Q10. What is the difference between a checkbox and a radio button in HTML?
A checkbox allows users to select multiple options, and a radio button allows users to select only one option from a set.