Possible to associate label with checkbox without using for=id?
Yes, place the input inside the label.
<label><input type=checkbox name=chkbx1> Label here</label>
See implicit label association in the HTML specifications.
How to associate label with checkbox but not using for=id
It doesn't seem to work for the first two "checkboxes" because putting the checkboxes in the label
elements makes this CSS rule stop working:
ul.ks-cboxtags li input[type="checkbox"]:checked + label
That rule only applies to a checkbox followed by a label, not a label with a checkbox inside it.
If you're going to use the pattern with the checkbox inside the label
, you're going to have to find a different way to do the styling. CSS isn't my strong suit, but as I understand it it's hard to style an element based on something inside that element. (There was once, briefly, a :contains
pseudo-class, but it was never broadly supported because IIRC there were issues with performance.) This question's answers describe ways to do it, but unfortunately I think you're stuck with JavaScript if you do the containment.
Label associated with checkbox does not work when checkbox moved inside label
The checkbox works just fine, as you can see if you make it visible (it currently has display:none
).
The problem is that your CSS expects it to be outside so it can style the .check-box
element when using input[type=checkbox]:checked + .check-box
.
To fix this you should add another element after the checkbox and add the check-box
class to that instead of the label.
<label>
<input type="checkbox" />
<span class="check-box">
</label>
Updated codepen at https://codepen.io/anon/pen/qjWopx
How can I use the FOR attribute of a LABEL tag without the ID attribute on the INPUT tag
The best, to my mind, what you can do, is to rename all the checkboxes, by adding some prefix to their ids, for example input
<ul>
<li>
<input type="checkbox" id="input_prologue" />
<label for="input_prologue">prologue</label>
</li>
<li>
<input type="checkbox" id="input_chapter" />
<label for="input_chapter">chapter</label>
</li>
<li>
<input type="checkbox" id="input_summary" />
<label for="input_summary">summary</label>
</li>
<li>
<input type="checkbox" id="input_etc" />
<label for="input_etc">etc</label>
</li>
</ul>
This way you will not have any conflicts with other ids on a page, and clicking the label will toggle the checkbox without any special javascript function.
How to create a checkbox with a clickable label?
Method 1: Wrap Label Tag
Wrap the checkbox within a label
tag:
<label><input type="checkbox" name="checkbox" value="value">Text</label>
Method 2: Use the for
Attribute
Use the for
attribute (match the checkbox id
):
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>
NOTE: ID must be unique on the page!
Explanation
Since the other answers don't mention it, a label can include up to 1 input and omit the for
attribute, and it will be assumed that it is for the input within it.
Excerpt from w3.org (with my emphasis):
[The for attribute] explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
Using this method has some advantages over for
:
No need to assign an
id
to every checkbox (great!).No need to use the extra attribute in the
<label>
.The input's clickable area is also the label's clickable area, so there aren't two separate places to click that can control the checkbox - only one, no matter how far apart the
<input>
and actual label text are, and no matter what kind of CSS you apply to it.
Demo with some CSS:
label {
border:1px solid #ccc;
padding:10px;
margin:0 0 10px;
display:block;
}
label:hover {
background:#eee;
cursor:pointer;
}
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>
label not working with checkbox
I believe the label
element links to the id
attribute, not the name
attribute. Try this:
<form>
<input type="checkbox" name="showRatings" id="showRatings" value="1" checked>
<label for="showRatings">Show Ratings</label>
</form>
Reference here.
HTML - Correct way of coding a checkbox with a Label
The common UI for a text input is either a label on the left:
Email address: [____________________]
Or the label above the input:
Email address:
[___________________________________]
For a checkbox however, the common UI is for the label to appear after the input, like this:
[x] Accept terms and conditions
For the first two cases, it drastically simplifies the CSS you have to create if the label comes before the input in the markup. One could argue that the label could wrap around the input still, but the important thing here is that the text comes before the input.
In the third example (the checkbox), the text comes after the label, and again, the CSS is greatly simplified by putting the label in the right place in the markup order (after the input).
So, the checkboxes were always going to be different to the rest of the inputs. In regards to the wrapping of the checkbox with a label, this was just a personal preference, although I'd argue that since the checkbox inputs are different, having the input inside the label makes it easier to target these inputs for styling with CSS, because the markup is different.
Using label for= with a HtmlHelper rendered element with an id that contains a space
When the HtmlHelper creates the <input>
element, it replaces all spaces in the id
attribute with underscores.
If you inspect the rendered HTML code, you will see the the input
element renders as follows:
<input id="remember_me" name="remember me" value="true" type="checkbox">
If you want to associate a label with the above element, therefore, you need to replace all spaces with underscores in the for
string:
@Html.CheckBox("remember me")
<label for="remember_me">Remember me</label>
Another way you can possibly avoid the above problem is by skipping the for=""
attribute all together, and just wrapping the <label>
tag around the entire input
element:
<label>
@Html.CheckBox("remember me")
Remember me
</label>
I've found this solution to sometimes causes issues, however, if I had some CSS styles set for all label elements, and didn't want the styles applied to all the elements that the label surrounded.
Related Topics
Javascript: How to Dynamically Create Nested Objects Using Object Names Given by an Array
Why Is My Onclick Being Called on Render? - React.Js
Get the Content (Text) of an Url After JavaScript Has Run with PHP
Keep Input Value After Refresh Page
Nesting Quotes in JavaScript/Html
Why Does a Form with One Text Input Submit on Enter While One with Two Text Inputs Does Not
Why Is the Variable Holding the Input Value Always Logged as Empty
Uncaught Referenceerror: $ Is Not Defined Error in Jquery
Fade Background Image in and Out with Jquery
JavaScript - .Innerhtml Changes Auto Close Tags
Detect Browser Wrapped Lines via JavaScript
Open a New Tab with JavaScript But Stay on Current Tab
How to Put Codes from Jsfiddle.Net into My Website
What Tag in HTML Should I Use Without Special Meaning, Only to Carry Meta Data
How to Change the Font (Family) for the Labels in Chart.Js
How to Test If a Variable Does Not Equal Either of Two Values