I'm about to style some checkboxes for Bootstrap 3, and I absolutely cannot get my head around why in their examples they use this markup:
<label>
<input type="checkbox"> Check me out
</label>
instead of this:
<input type="checkbox" id="a"><label for="a">Check me out</label>
I just would love to know why they went with the nested approach. I can't see any upsides. The huge huge downside is, that checked/unchecked states cannot be styled with CSS such as:
input:checked + label { }
The answer is user-experience. Nesting your radio or checkbox inputs inside a <label> provides additional functionality. Consider:
<label>
<input type="checkbox" value="">
This is my Checkbox Option inside a Label
</label>
In the above code the checkbox is selected by clicking on either the box itself or the text within the <label>.
While in the below code the <label> text is not clickable. The only way to select the checkbox is to click directly upon the box.
<input type="checkbox" value="">
<label>This is my Checkbox Option outside a Label</label>
Related
I've been learning about the "for" attribute in HTML and what it does but I've stumbled upon a weird example that I've yet to understand
Code1
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
Code2
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<br>
<label><input type="checkbox" name="personality"> Loving</label>
I understand why "for" is used in the first block of code but I don't understand why the second code used "for" and "id" implicitly when it could've just worked fine without them.
Any help?
It is correct, that it works without it. But it is useful to connect the label with the input field. That is also important for the accessibility (e.g. for blind people, the text is read).
The browsers also allow you to click the labels and automatically focus the input fields.
For checkboxes this can be useful as well. But for these, you could also surround the checkbox-input like this:
<label>
<input type="checkbox"> I agree with the answer above.
</label>
In this case, the checkbox is automatically checked when you click on the text.
The surrounding of the inputs with a label works with every input field. But the text, that describes the input field, should always be inside it. That what for is for: When your HTML disallows the label-surrounding, you can use the for-attribute.
The the both following examples:
Simple stuctured:
<label>
Your Name:<br>
<input type="text"/>
</label>
Complex structure around input fields:
<div class="row">
<div class="col">
<label for="name">Your Name:</label>
</div>
<div class="col">
<input type="text" id="name" />
</div>
</div>
It could be used without "for" attribute, and it will be fine, according to docs.
This is just one option how to use "for" to omit confusing developers.
Anyway, in case of placing checkbox inside label, you can skip "for" and it will be fine.
<!-- labelable form-relation still works -->
<label><input type="checkbox" name="personality"> Loving</label>
"for" approach much preferable if you want to style it, f.e. using Bootstrap
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
To be able to use the label with the check box.
E.g., when rendered, click the label and it will toggle the check box ticked state.
Edit: Further to this, it allows putting the label anywhere on the page.
I want to have a group of radio buttons, so that one of them appears twice.
The result would look like this:
The tricky point is that I want to achieve this in pure HTML/CSS (although I doubt CSS will help here).
Here is the code I wrote to produce the four radio buttons above:
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button1">Choice 1</label>
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button">Choice 1</label>
<input type="radio" name="buttons" value="choice2" id="button3"/>
<label for="button3">Choice 2</label>
<input type="radio" name="buttons" value="choice3" id="button4"/>
<label for="button4">Choice 3</label>
I naively thought that attributing the same value to the first to buttons would make them behave as one, but of course it doesn't.
Is it possible to achieve this behaviour without any JS?
Edit
This might sound strange, so here's my usecase.
What I ultimately want is to have a radio button storing a global state, and have access to it at multiple places.
For instance, suppose the following snippet:
.state-repeater {
visibility: hidden;
}
#button.state-repeater:checked > p {
color: blue;
}
<input type="radio" id="button" />
<label for="button">Button</label>
<!--
Lots of blocks; the two parts are totally uncorrelated;
so the classical sibling selector tricks do not work
-->
<input class="state-repeater" type=radio id="button" />
<p>The button is checked</p>
I want the <p> tag text to turn blue when the radio button is checked; however, due to the radio button being far from it, I need some kind of repeater.
Obviously, the approach of this snippet does not work.
Is it possible to "repeat" the information that the radio button is checked?
You'll need to use JS. There is no pure way. Maybe wrap the radio in an element that LOOKS like 2 radio buttons and when clicked they both LOOK like they've been selected. But if you need two actual radio buttons that work together, you are out of luck. And in any case the thing I described before would be a huge headache compared to using JS.
I wanted to use a button tag inside a label for a radio-type input; it seemed silly to me to redesign the radio input to look like a button when we already have a perfectly suitable tag for it.
However, it doesn't work. If you click anywhere else in the label, the radio input for that label will become checked. When you click on the button whatever was checked beforehand will remain checked.
Naturally I went to W3 validator to see if this was valid HTML. It seems that it is in HTML 4, but not 5. Yet when I look at the docs for label nothing states anything has changed. The error thrown in the validator states the following:
The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant
What's confusing to me is that Chrome still shows the radio input click graphic but doesn't actually check it. It seems hard-coded to fail...
My question is, how can I get a button to check a radio input inside a label without using JavaScript?
label{
display:block;
border:1px solid rgba(0,0,0,.2);
margin:.5rem;
padding:.4rem;
}
<label>
<input type="radio" name="test"/>
<button>Button</button>
</label>
<label>
<input type="radio" name="test"/>
<input type="checkbox"/>
<input type="button" value="Button"/>
<p>Test text</p>
<button>Button</button>
</label>
I also came across this answer which references HTML5 form's label spec which states
If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.
So I thought I could play around with the id and for attribute, but to no luck. Thoughts?
label{
display:block;
border:1px solid rgba(0,0,0,.2);
margin:.5rem;
padding:.4rem;
}
<label>
<input type="radio" name="test"/>
<button>Button</button>
</label>
<label>
<input type="radio" name="test" id="penultimate"/>
<input type="button" for="penultimate" value="Button"/>
</label>
<input type="radio" name="test" id="last"/>
<input type="button" for="last" value="Button"/>
I want to display the related text of the checkbox along with it.
<input id="Checkbox1" type="checkbox" value="Admin"><span>Admin User</span>
This is the most used markup to do that. But it doesn't feel good to use a separate span for the check box. And it doesn't even look good in a form.
Is there a way to relate these two with each other? Or what is the best way to do this?
use a Label and the for attribute.
The for attribute specifies which form element a label is bound to
<input id="Checkbox1" name="Checkbox1" type="checkbox" value="Admin" />
<label for="Checkbox1">AdminUser</label>
Also give your input a name
Instead of using for attribute you can use the nested <input type="checkbox">:
<label><input name="Checkbox1" type="checkbox">Admin User</label>
Instead of using <span> you can use the <label>-tag:
<label for="Checkbox1">Admin User</label>
It will 'attach' the label to your checkbox in a sense that when the label is clicked, it is as if the user clicked the checkbox.
For the styling, you need to apply your own styles to make them look 'together' yourself.
What's the most appropriate, semantically correct way to label checkbox and radio elements? Obviously, giving each one a unique id attribute is an option and using that in id a <label for="">, but this seems like it would break the semantic grouping. Putting unenclosed text next to the input element just seems...wrong.
Edit:
Additionally, how should one denote the label for a group of such elements? (i.e. not the description of each option, but the description of the whole group)
Using <label for=""> is the correct way to do that. The grouping of radio buttons is done by denoting the group via the name attribute and individual elements via the id attribute. For example:
<input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
<input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
<input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>
As for putting a label over the entire group, just put them in a container that has a text container above the stack of buttons (or checkboxes). Example:
<div>
<h3>My Radio Button Group</h3>
<input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
<input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
<input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>
</div>
I mostly use Chris Coyiers HTML ipsum : http://html-ipsum.com/
always a good helper