Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add a checkbox in forms using HTML?
The checkbox is a type of HTML input element that appears as a square box users can check or uncheck. Checkboxes are essential for forms where users need to select multiple options from a list, such as choosing interests, agreeing to terms, or selecting preferences. When a form is submitted, the data from checked checkboxes is sent to the server as name-value pairs.
A checkbox can exist in three states checked, unchecked, or indeterminate. The indeterminate state is typically used in JavaScript for tri-state checkboxes or when representing a partially selected group.
Syntax
Following is the basic syntax for creating a checkbox in HTML
<input type="checkbox" name="fieldName" value="optionValue">
The key attributes are
- type="checkbox" Specifies the input as a checkbox
- name Groups related checkboxes and identifies the field when submitted
- value The data sent to the server when the checkbox is checked
- checked Makes the checkbox selected by default
- disabled Prevents user interaction with the checkbox
Basic Checkbox Example
Following example demonstrates how to create simple checkboxes in a form
<!DOCTYPE html>
<html>
<head>
<title>HTML Checkbox Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Favorite Vehicles</h2>
<form action="/submit" method="post">
<input type="checkbox" name="vehicle" value="car" id="car">
<label for="car">Car</label><br><br>
<input type="checkbox" name="vehicle" value="bike" id="bike">
<label for="bike">Motorcycle</label><br><br>
<input type="checkbox" name="vehicle" value="plane" id="plane">
<label for="plane">Airplane</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The output displays three checkbox options with proper labels. Users can select multiple options before submitting
Select Your Favorite Vehicles ? Car ? Motorcycle ? Airplane [Submit]
Checkbox with Default Selection
Use the checked attribute to pre-select checkboxes when the page loads
<!DOCTYPE html>
<html>
<head>
<title>Default Checked Checkbox</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Popular Travel Destinations</h2>
<form action="/submit" method="post">
<p>Select places you'd like to visit:</p>
<input type="checkbox" name="destination" value="shimla" id="shimla">
<label for="shimla">Shimla</label><br><br>
<input type="checkbox" name="destination" value="ooty" id="ooty">
<label for="ooty">Ooty</label><br><br>
<input type="checkbox" name="destination" value="coorg" id="coorg" checked>
<label for="coorg">Coorg (Recommended)</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The "Coorg" option is pre-selected using the checked attribute
Popular Travel Destinations Select places you'd like to visit: ? Shimla ? Ooty ? Coorg (Recommended) [Submit]
Disabled Checkbox
The disabled attribute prevents users from interacting with specific checkboxes
<!DOCTYPE html>
<html>
<head>
<title>Disabled Checkbox Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Selection</h2>
<form action="/submit" method="post">
<p>Choose available courses:</p>
<input type="checkbox" name="course" value="html" id="html">
<label for="html">HTML5</label><br><br>
<input type="checkbox" name="course" value="python" id="python">
<label for="python">Python</label><br><br>
<input type="checkbox" name="course" value="java" id="java" disabled>
<label for="java" style="color: #999;">Java (Currently Unavailable)</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Java option appears grayed out and cannot be selected
Course Selection Choose available courses: ? HTML5 ? Python ? Java (Currently Unavailable) [grayed out] [Submit]
Grouping Checkboxes
Related checkboxes should share the same name attribute to group them logically
<!DOCTYPE html>
<html>
<head>
<title>Grouped Checkboxes</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Newsletter Preferences</h2>
<form action="/submit" method="post">
<fieldset>
<legend>Topics of Interest</legend>
<input type="checkbox" name="topics" value="tech" id="tech">
<label for="tech">Technology</label><br><br>
<input type="checkbox" name="topics" value="business" id="business">
<label for="business">Business</label><br><br>
<input type="checkbox" name="topics" value="health" id="health">
<label for="health">Health & Fitness</label><br><br>
</fieldset>
<fieldset>
<legend>Notification Preferences</legend>
<input type="checkbox" name="notifications" value="email" id="email" checked>
<label for="email">Email Updates</label><br><br>
<input type="checkbox" name="notifications" value="sms" id="sms">
<label for="sms">SMS Alerts</label><br><br>
</fieldset><br>
<input type="submit" value="Save Preferences">
</form>
</body>
</html>
Using fieldset and legend elements organizes related checkboxes into logical groups for better user experience.
Form Data Handling
When a form with checkboxes is submitted, only checked checkboxes send their name-value pairs to the server. Unchecked checkboxes are ignored entirely.
| Checkbox State | Data Sent | Example |
|---|---|---|
| Checked | name=value | vehicle=car |
| Unchecked | Nothing | No data sent |
| Disabled | Nothing | No data sent |
Accessibility Best Practices
For better accessibility and user experience
- Always use
<label>elements with properforattributes - Group related checkboxes using
<fieldset>and<legend> - Provide clear, descriptive text for each checkbox option
- Use meaningful
valueattributes that represent the data accurately
Conclusion
HTML checkboxes are essential form elements that allow users to select multiple options from a list. They use the <input
529 Views
