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 Create Checkbox with a Clickable Label?
The HTML <checkbox> tag is used to define the square boxes that are ticked (checked) when activated. Checkboxes are used to allow a user to select one or more options from a limited number of options. The type attribute of the <input> element, as shown in the following syntax, creates it.
<input type="checkbox" name="field name" value="Initial value">
Checkbox supports the following attributes:
Checked: A Boolean attribute that indicates whether this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state changes, this content attribute does not update.
Value: The value attribute is shared by all the input types, but it serves a specific purpose for checkbox inputs: when a form is submitted, only checkboxes that are currently checked are submitted to the server, and the reported value is the value of the value attribute.
Making an HTML checkbox with a clickable label means that the checkbox turns on or off when the label is clicked. In this tutorial we will discuss two methods by which we can create a checkbox with a clickable label.
Wrapping the Label Tag
In HTML, the <label> tag is used to improve mouse usability; for example, if a user clicks on the text within the <label> element, it toggles the control. The <label> tag specifies the label for a button, input, metre, output, progress, select, or textarea element. A label can also be bound to an element by enclosing it in the <label> element.
It supports the following attributes.
For: The for attribute specifies which form element a label is bound to.
Form: The form attribute specifies the form the label belongs to.
Example
In the following example we use the checkbox inside the label tag and apply certain CSS styling properties.
<!DOCTYPE html>
<html>
<head>
<title>How to Create Checkbox with a Clickable Label?</title>
<style>
.label1 {
background-color:floralwhite;
color:darkolivegreen;
font-weight:550;
font-size:20px;
border:2px solid darkolivegreen;
border-radius:10px;
padding:8px 20px 12px 15px;
display:inline-block;
margin:10px;
text-align:center;
}
</style>
</head>
<body>
<h2>This is a Clickable Checkbox</h2>
<label class="label1">
<input type="checkbox" name="checkbox" value="text">Click Me
</label>
</body>
</html>
Using the ‘for’ Attribute
The for attribute is a valid attribute for <label> and <output>. When used on a <label> element, it indicates the form element what this label describes. When we click the label, we bring the focus to the associated input element.
The for attribute links the label being defined to another control explicitly. When this attribute is present, it must have the same value as the id attribute of another control in the same document. When the label is missing, the element's contents are associated with the label.
To implicitly associate a label with another control, the control element must be contained within the Label element's contents. The label may only have one control element in this case. The label can appear before or after the associated control.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to Create Checkbox with a Clickable Label?</title>
<style>
.label1,
.label2{
background-color:thistle;
color:purple;
font-weight:550;
font-size:20px;
border:3px solid rebeccapurple;
border-radius:20px;
padding:8px 20px 12px 15px;
display:inline-block;
text-align:center;
}
.container{
height:200px;
width:300px;
background-color:powderblue;
margin:20px;
border-radius:10px;
padding:10px;
}</style>
</head>
<body>
<div class="container">
<h3>This is a clickable checkbox! Try it.</h3>
<input type="checkbox" name="checkbox" id="checkbox_id1" value="text">
<label class="label1" for="checkbox_id">Click Here</label><br><br>
<input type="checkbox" name="checkbox" id="checkbox_id2" value="text">
<label class="label2" for="checkbox_id2">Click Here</label>
</div>
</body>
</html>
Conclusion
The first method, as shown above, has some advantages over using the for attribute. If a label contains up to one input but lacks the for attribute, it is assumed that it is for the input contained within it.
Wrapping the label tag is more efficient and useful. It has many advantages over the for attribute. There is no need to assign an id to each checkbox. There is no need to include the extra attribute in the <label>. The clickable area of the input is also the clickable area of the label, so there aren't two separate places to click to control the checkbox - only one, no matter how far apart the input> and actual label text are, or what kind of CSS you apply to it.
238 Views
