I'm attempting to add a label to the top of these stacked radios. This method works, but I'm returning a warning when I run this through validator.w3.org
The warning states "The for attribute of the label element must refer to a non-hidden form control." This error is popping up because I have the id field in the incorrect location, but I'm unsure as to where it is supposed to be located. I've tried several solutions, but all have returned the same attribute warning.
<div class="col">
<div class="custom-controls-stacked">
<label for="gender"> Gender </label>
<label class="custom-control custom-radio" id="gender">
<input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"> Male </span>
</label>
<label class="custom-control custom-radio">
<input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"> Female </span>
</label>
</div>
</div>
You have a <label> for a <label> which is a bit weird. The <label> is for a form element only.
I would remove the "Gender" label, wrap the whole thing in a <fieldset> and put "Gender" into a <legend>.
Related
I have created simple radio buttons so that the user can select the color they like. It worked for a while but has now stopped keeping the selected option. After selecting one, the option deselects itself when I press any other part of the page.
I never had the attribute 'name' of them the same before but they were working so I thought that might have been the issue that didn't solve it either.
<form name="newActivity" method="post" action="newActivity.php">
<?php include('errors.php'); ?>
<label class="colour-title">COLOUR</label>
<div class="select">
<label>
<input type="radio" name="colour" value="blue">
<span class="blue">BLUE</span>
</label>
<label>
<input type="radio" name="colour" value="purple">
<span class="purple">PURPLE</span>
</label>
<label>
<input type="radio" name="colour" value="pink">
<span class="pink">PINK</span>
</label>
<label>
<input type="radio" name="colour" value="green">
<span class="green">GREEN</span>
</label>
</div>
My radio buttons are also part of a form as shown above.
use id instead of class
The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.
example
<form name="newActivity" method="post" action="newActivity.php">
<?php include('errors.php'); ?>
<label class="colour-title">COLOUR</label>
<div class="select">
<label>
<input type="radio" name="colour" value="blue">
<span id="btn-color">BLUE</span>
</label>
<label>
<input type="radio" name="colour" value="purple">
<span id="btn-color">PURPLE</span>
</label>
<label>
<input type="radio" name="colour" value="pink">
<span id="btn-color">PINK</span>
</label>
<label>
<input type="radio" name="colour" value="green">
<span id="btn-color">GREEN</span>
</label>
</div>
I am trying to create a satisfaction survey using the radio buttons, but not sure if my syntax are correct. This is what I did:
From what I understand, the one I am reading says each radio button should have a label, but in this case, there is no label for each radio button, because I want to align them under "Poor," "Good," "Better," and "Super."
This is how I did one of them:
<div class="radio_menu">
<p>Menu selection</p>
<input type="radio" id="menu_selection_poor" name="menu_selection" value="poor">
<input type="radio" id="menu_selection_good" name="menu_selection" value="good">
<input type="radio" id="menu_selection_better" name="menu_selection" value="better">
<input type="radio" id="menu_selection_super" name="menu_selection" value="super">
</div>
Is this correct?
The radio buttons do need labels to be accessible. However, they don't need to be visible if the form makes sense to sighted users without them. You can use <span> elements with a "screen-reader only" class within the <label> elements to visually hide text meant for screen readers and other assistive technologies.
Also, consider using <fieldset> and <legend> elements to group form fields.
This could look like:
<fieldset class="radio_menu">
<legend>Menu selection</legend>
<label>
<input type="radio" id="menu_selection_poor" name="menu_selection" value="poor">
<span class="sr-only">Poor</span>
</label>
<label>
<input type="radio" id="menu_selection_good" name="menu_selection" value="good">
<span class="sr-only">Good</span>
</label>
<label>
<input type="radio" id="menu_selection_better" name="menu_selection" value="better">
<span class="sr-only">Better</span>
</label>
<label>
<input type="radio" id="menu_selection_super" name="menu_selection" value="super">
<span class="sr-only">Super</span>
</label>
</fieldset>
I built a custom radio button using this structure. However using this configuration I cant click the text to toggle the radio, any ideas why this is not working?
<div class="form-group">
<label class="custom-control custom-radio">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<span class="custom-control-indicator"></span>
</label>
<span class="custom-control-description">test</span>
</div>
You can achieve this by moving your text inside the label element.
Clicking a label will also click its associated form input. You can either associate a label and a form input with the 'for' HTML attribute (as per zmuci's answer) or by wrapping your input with the label element (which you are already doing).
In your case you were trying to click some text that was outside the label (hence not associated in any way with the input).
<div class="form-group">
<label class="custom-control custom-radio">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">test</span>
</label>
</div>
You need to "connect" the text and input, you do that with for attribute added to label tag.
So your HTML should look something like this:
<div class="form-group">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<label class="custom-control custom-radio" for="pefrormanceRadio">Test</label>
<span class="custom-control-indicator"></span>
</div>
Or if you can't change the HTML, Den Biswajit answer is the correct one. But you should be aware that from the semantic/accessible point of view, input should have a meaningful label.
Please add custom-control-description inside label and update css
<div class="form-group">
<label class="custom-control custom-radio">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">test</span>
</label>
</div>
you can do this using jquery
$("label").click(function(){
$("#pefrormanceRadio").attr('checked', 'checked');
});
I'm trying to give label after button,but the button is not appearing.
Is is working in fiddle but not in my local code.
Please solve the issue.
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;width:100px;font-size:12px;float:left">
Default Template
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</label>
</span>
</div>
Simple solution.. Remove the width:100px;from the label or give it more pixels...
The problem is, that both elements (the text and the radio button) don't fit together inside a 100px element.. So by deleting it or making it wider, they will fit together.
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;font-size:12px;float:left">
Default Template
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</label>
</span>
</div>
Keep input field outside of the label tag,
Try following code,
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;font-size:12px;float:left;">
Default Template
</label>
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</span>
</div>
I'm trying to figure out how to mark up some code using WCAG standards, but it's a little complicated when I run into this situation:
<div class="form-group">
<label>Entry Method</label>
<div>
<label>
<input type="radio" /> Upload file
</label>
<label>
<input type="radio" /> Enter Manually
</label>
<label>
<input type="radio" /> Load Template
</label>
</div>
</div>
What do I do with the first "label"? How do I use "for" and "id" in this scenario?
A label accompanies a single form field, rather than a group of fields. Grouping form fields is achieved using a fieldset instead of a div, which is accompanied by a legend instead of a label:
<fieldset class="form-group">
<legend>Entry Method</legend>
<div>
<label>
<input type="radio" /> Upload file
</label>
<label>
<input type="radio" /> Enter Manually
</label>
<label>
<input type="radio" /> Load Template
</label>
</div>
</fieldset>
See H71 of WCAG 2.0 for a detailed write-up.