How to Add Checkbox in HTML Table ?

How to create an HTML checkbox with a clickable label?

Last Updated : 11 Jul, 2025

To create an HTML checkbox with a clickable label, use the <label> element and associate it with the checkbox using the for attribute, matching the checkbox's id. This makes the label clickable, toggling the checkbox state when clicked. The clickable label means the checkbox gets on/off when the label is clicked.

Inside Label Tag

Example: The example below shows the checkbox input is wrapped inside the <label> tag.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Checkbox with Clickable Label</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
    </style>
</head>

<body>

    <div>
        <p>Wrapping Inside Label Tag</p>
        <label>
            <input type="checkbox" name="option1">
            Option 1
        </label>
    </div>

</body>

</html>

Output:

label — Output

Using the for Attribute

Example: In this method, the for attribute of the <label> tag is used to link it with the checkbox by matching the id of the checkbox.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Checkbox with Clickable Label</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
    </style>
</head>

<body>

    <div>
        <input type="checkbox" id="o" name="op">
        <label for="opt">GfG</label> <br>
        <input type="checkbox" id="option2" 
               name="option2">
        <label for="option2">
          GeeksforGeeks
          </label>
    </div>

</body>

</html>

Output:

for — Output

How to Add Checkbox in HTML Table ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to create a clickable button in HTML ?

In this article, we will create a Button by using the <Button> Element in the Document. It is used to submit the content. The images and text content can use inside a button tag. Syntax: <button type = "button"> Example: Using HTML <button> type Attribute html <!DOCTYPE html>

How to Create a Checkbox in HTML?

The checkbox is the HTML form element that lets users select one or more options from predefined choices. It can often be used when a user selects multiple items in the list. Checkboxes can be checked or unchecked, and they are created using the <input> tag with the type attributes set to the

How to Make Entire Custom Checkbox/Div Clickable ?

In this article, we are going to learn how to make the entire custom checkbox/Div clickable. A custom checkbox is achieved by hiding the default checkbox input and styling a label element to resemble a checkbox using CSS. The label is associated with the checkbox using the for attribute, and the app

How to add a checkbox in forms using HTML ?

In this article, we will learn how to add a checkbox in HTML Forms. Basically, the checkbox is used to select one or more options from a variety of options. It is a multi-control unit that will be presented as a small square box on the screen. Normally, Checkbox has 3 states namely- Checked, uncheck

How to Add Checkbox in HTML Table ?

Adding checkboxes to an HTML table can be useful for various purposes, such as selecting multiple rows for batch processing or toggling the state of individual items. In this article, we will explore two methods to add checkboxes to an HTML table i.e. using basic HTML and JavaScript for dynamic inte

Create a Custom Checkbox using HTML CSS and JavaScript

This article will show you how to create a custom checkbox using HTML, CSS, and JavaScript that enables users to check on checkboxes along with the " Select all " feature. We have written a code that generates a card in the center of the window. The card displays a list of items along with checkboxe