How to create an HTML checkbox with a clickable label?
To make an HTML checkbox with a clickable label means the checkbox gets on/off when the label is clicked.
Below are the methods:
- Using checkbox inside label tag:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Create an HTML checkbox with a clickable label
</
title
>
<!-- Adding Style to label -->
<
style
>
.GFG {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 10px;
cursor: pointer;
}
</
style
>
</
head
>
<
body
>
<
h1
>
w3wiki
</
h1
>
<!-- Putting checkbox inside label tag -->
<
label
class
=
"GFG"
>
<
input
type
=
"checkbox"
name
=
"checkbox"
value
=
"Beginner"
>
GFG
</
label
>
</
body
>
</
html
>
Output:
Before clicking the label:
After clicking the label:
- Using the for attribute: Create a checkbox using input tag then create a label for the created checkbox using the for attribute.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Create an HTML checkbox
with a clickable label
</
title
>
<!-- Adding Style to label -->
<
style
>
.GFG {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 10px;
cursor: pointer;
}
</
style
>
</
head
>
<
body
>
<
h1
>w3wiki</
h1
>
<!-- Using the for attribute in label -->
<
input
type
=
"checkbox"
name
=
"checkbox"
id
=
"checkID"
value
=
"Beginner"
>
<
label
class
=
"GFG"
for
=
"checkID"
>
GFG
</
label
>
</
body
>
</
html
>
Output:
Before clicking the label:
After clicking the label: