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 they play 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 check 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 a 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.