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 >
< 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 >
GeeksforGeeks
</ h1 >
< label class = "GFG" >
< input type = "checkbox"
name = "checkbox"
value = "Geeks" >
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 >
< 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 >GeeksforGeeks</ h1 >
< input type = "checkbox"
name = "checkbox"
id = "checkID"
value = "Geeks" >
< label class = "GFG"
for = "checkID" >
GFG
</ label >
</ body >
</ html >
|
Output:
Before clicking the label:
After clicking the label:
Last Updated :
10 Apr, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...