How to create a checkbox and radio button with a clickable label. here we have explained two methods with a demo example. Both are easy to create and the right ways to create input checkbox and radio button clickable with label tag.
We can use anyone “wrap the checkbox within the label tag” and “for attribute” to make your form user-friendly.
HTML
<!--First Way: Wrap the checkbox within a label tag-->
<label><input type="checkbox" name="male">Male</label>
<label><input type="checkbox" name="female">Female</label>
<label><input type="checkbox" name="other">Other</label>
<!--Second Way: By Using the for Attribute-->
<input type="checkbox" id="Male" name="male">
<label for="Male">Male</label>
<input type="checkbox" id="Female" name="female">
<label for="Female">Female</label>
<input type="checkbox" id="Other" name="other">
<label for="Other">Other</label>CSS
* {
font-family: arial;
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
width: 30px;
height: 30px;
margin: 30px 10px 30px 30px;
}
label {
font-size: 40px;
}