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.
Related
I am doing a django project.
But I wanted to have radio buttons grouped as well as name of the buttons to work with django.
Is it okay to use two name attributes in one HTML tag?
Will I be facing any errors if I do so?
Below is my code I am stuck in.
<input type="radio" name="group1" name="removePunc"> Remove Punctuations
<br>
Input name attributes must be unique to send data using traditional forms. If you find yourself needing more attributes, use the data- attributes. Pls share some code to undertand what you are trying to achieve.
If you want to label the group of radio buttons add class="group1" to all of the radio buttons instead of name="group1".
<label for="removePunc">Remove Punctuations</label>
<input type="radio" class="group1" name="removePunc">
<label for="button2">Button 2</label>
<input type="radio" class="group1" name="button2">
<label for="button3">Button 3</label>
<input type="radio" class="group1" name="button3">
Problem: Grouping form elements
I have an HTML form, where in few places a single control is composed of several inputs. One example is a group of radio buttons.
I'd like to group those inputs and it's label explicitly, so that the screen readers would also (in addition to the visual representation by aligning them on a single line) be able to understand and announce this relationship.
For example, let's say I have a control like this:
<div class="control">
<div class="control-label">Type</div>
<div class="control-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</div>
Standard solution problems: Fieldset styling issues
fieldset element and it's child legend seem to be made exactly for that (used in the example below).
The problem is that fieldset and legend elements can't be styled like normal elements (some discussion about it) and nowadays other than in Firefox it's impossible to align them on a single line using Flexbox, which my layout requires.
<fieldset class="control">
<legend class="control-label">Type</legend>
<div class="form-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</fieldset>
Question: Is there some other way?
That makes me wonder if there is some accessible way to group several form controls other than using fieldset element?
Possible solution: role="group"?
There is a "group" role (used in the example below), which could be added to a simple div and it looks like it might do the job, but nowhere is stated clearly that it is the functional equivalent to using a fieldset. And if it does, then how do I mark an element of this group to serve as an equivalent of legend?
<div role="group"
class="control">
<div class="control-label">Type</div>
<div class="control-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</div>
Basically you have already answered your question in the Possible Solution section (btw, as a blind person, I'm just impressed how you styled your question with headings!). You missed one tiny and simple thing, the aria-label attribute:
<div role="group" class="control" aria-label="Type">
Note: this will be invisible on screen, it is a screen-reader only solution. If however you want to make it visible, do the following using the aria-labelledby attribute instead:
<div role="group" class="control" aria-labelledby="pseudolegend">
<div id="pseudolegend" class="style-it-like-a-legend">Type</div>
[...]
</div>
The pseudolegend may be a span or even a p, of course, if you find it more appropriate.
A quick and dirty local test I made showed that, at least with JAWS and Chrome, there is no difference between a fieldset and a div with aria-label.
Note: For radio button groups in particular you can use role=radiogroup. Also, in order for the semantics of a group or radiogroup to be expressed to screen reader users an accessible name for the grouping element is required.
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>
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