Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a checkbox in forms using HTML?
The checkbox is one of the characteristics of the HTML input tag. They display as square boxes that the front-end user can dynamically check off. When we want the user to offer a variety of inputs, the HTML checkbox comes in handy. Users choose the items they wish from the entire list when presented with a checkbox enquiry by checking or ticking these text boxes. The data from the checked checkboxes is gathered and stored in the background when the form is submitted.
Typically, a checkbox can be in one of three states: checked, unchecked, or indeterminate. When a user has the option of selecting many options, it is necessary on forms. Before we dive into the article let’s have a quick view on the HTML <input type="checkbox">.
HTML <input type="checkbox">
A checkbox field is created using the HTML <input type="checkbox"> tag. The checkbox is displayed as a square box that is checked when it is active. The user is given the option of choosing one or more options from the few available options.
Syntax
Following is the syntax for HTML checkbox tag
<input type="checkbox">
Example
In the following example, we are going to create a simple checkbox form using HTML.
<!DOCTYPE html>
<html>
<body style="text-align: center; font-family:verdana">
<h2 style="color:#58D68D ;"> HTML CheckBox </h2>
<form style="color:#DE3163">
<input type="checkbox" name="vehicle" value="car"> CAR <input type="checkbox" name="vehicle" value="bike"> BIKE <input type="checkbox" name="vehicle" value="aeroplane"> AEROPLANE <br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
When we run the above code, it will generate an output consisting of the option provided with checkboxes displayed on the webpage, allowing the user to select the option and submit the form.
Example
Let’s look at the following example, where we are going to set the default value for the checkbox in the form.
<!DOCTYPE html>
<html>
<body style="text-align: center; font-family:verdana">
<form style="color:#7D3C98 ">
<p>Places To Visit : </p>
<input type="checkbox" name="place" value="Shimla"> SHIMLA <input type="checkbox" name="place" value="Ooty"> OOTY <input type="checkbox" name="place" value="Coorg" checked> COORG <br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
On running the above code, the output window will pop up, displaying the checkboxes, out of which one is checked by default, displayed on the webpage, along with a submit button.
Example
Considering another scenario where we are going to disable the checkbox in the form.
<!DOCTYPE html>
<html>
<body style="text-align: center; font-family:verdana">
<h2 style="color:#27AE60 ">HTML disabled CheckBox</h2>
<form style="color:#7D3C98 ">
<p>Choose The Course :</p>
<input type="checkbox" name="course" value="html"> HTML <input type="checkbox" name="course" value="python"> PYTHON <input type="checkbox" name="course" value="java" disabled> JAVA <br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
When we run the above code, it will generate an output consisting of the disabled checkbox displayed on the webpage along with a submit button.
16 Views
