I have a form which contains a 'gender' label and two radio buttons'male' and 'female'. How can I put 'label for' in this particular scenario ?
<label for="username">User Name</label> <input type ="text" id="username" />
<label for="?">Gender</label>
<label for="male"><input type="radio" id="male" value="male" /> </label>
<label for="female"><input type="radio" id="female" value="female" /> </label>
You do not need a label around Gender, just the male/female ones you have associated with the individual inputs. You could classify Gender either just with a Heading tag or with a Legend tag and a Fieldset spanned around the input collection.
You do however need to output some text in your male/female labels, perhaps after each input.
Related
which one is more appropriate?
First one:
<div>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
</div>
Second one:
<label for="male">Male
<input type="radio" name="gender" id="male" value="male">
</label>
They're working as well, but i'm not sure if the second option is good with all html structures.
I would put input inside label like this and wouldn't use outside div wrapper:
<label for="male">Male
<input type="radio" name="gender" id="male" value="male">
</label>
In this way input gets focus when clicked on the label text Male.
Both options are valid HTML per the w3 spec and the for isn't mandatory in the second form.
Use whichever you prefer.
I have a form with these fields and for some reason attendance only comes through as 'Yes' despite you selecting the 'No' radio button.
Any ideas why and if there is anything wrong with what I have done?
<label>
<input type="radio" name="attendance" value="No" id="attendance" />
Yes</label>
<label>
<input type="radio" name="attendance" value="Yes" id="attendance" />
No</label>
<label>
<input type="radio" name="attendance" value="No" id="attendance" />
No</label>
<label>
<input type="radio" name="attendance" value="Yes" id="attendance" />
Yes</label>
Your label is No while the value of the radio button is Yes :)
Also as others have noted: you cannot have two elements with the same id. You could just use a class for this.
Use this instead:
<label>
<input type="radio" name="attendance" value="Yes" id="attendance-yes" />
Yes</label>
<label>
<input type="radio" name="attendance" value="No" id="attendance-no" />
No</label>
you had your labels and your values reversed...
You can't have the same id for two elements. Remove id or assign different ids.
An id should be unique, so you should give the elements different identities.
I'm not sure if that is the cause of the problem, but that is the only error in the code that you have shown. If that doesn't help, the problem is in the part of the code that you haven't shown.
As others have mentioned, you have swapped the values and labels betwwen the radio buttons, but that seems to be too obvious...
I see two mistakes in the code given:
the label tag should only surround the effective label (not the input tag)
the two items have the same id, i think that's why you always get the same result
You might differenciate the ID as it should be unique. Also you could use the attribute for for the label markup.
Like this :
<label for="attendanceyes">
<input type="radio" name="attendance" value="Yes" id="attendanceyes" />
Yes
</label>
<label for="attendanceno">
<input type="radio" name="attendance" value="No" id="attendanceno" />
No
</label>
I'm using the jQuery Validate to validate my form. It's a form with text and radio types and also with a selector.
The validation is working great, but when validating radio buttons the error div shows in between the buttons and not at the end of the row of them.
How can I place this div in a different position without moving it for the rest of the form's fields?
YOu can use the code from this exemple: http://jquery.bassistance.de/validate/demo/radio-checkbox-select-demo.html
<fieldset>
<legend>Gender</legend>
<label for="gender_male">
<input type="radio" id="gender_male" value="m" name="gender" validate="required:true" />
Male
</label>
<label for="gender_female">
<input type="radio" id="gender_female" value="f" name="gender"/>
Female
</label>
<label for="gender" class="error">Please select your gender</label>
</fieldset>
and change the
<label for="gender" class="error">position
If I want to have a question with a "Yes/No" radio button. How do I need to mark up the code so that a screen reader reads the question associated with the "yes/no" selection instead of just reading the "Yes" and "No" labels when the radio buttons are selected?
<span>Did you understand this? (choose one) </span>
<label>
<input type="radio" id="yes_no" name="yes_no" value="Yes" />
Yes
</label>
<label>
<input type="radio" id="yes_no" name="yes_no" value="No" />
No
</label>
Thanks
For form elements of this nature I use:
<fieldset>
<legend>Did you understand the question?</legend>
<input type="radio" name="yes_no" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="yes_no" id="no">
<label for="no">No</label>
</fieldset>
Also please take note that all ID values on a page should be unique. If you have an element that needs to share a descriptor then add it as a class.
I also use Fieldsets to add a distinct boundary to the radio selection.
And be sure to specify the for="id_value" attribute of the label. This will associate the label with the desired radio button.
<fieldset>
<legend><span>Did you understand this? (choose one) </span></legend>
<label>
<input type="radio" id="yes_no" name="yes_no" value="Yes" />
Yes
</label>
<label>
<input type="radio" id="yes_no" name="yes_no" value="No" />
No
</label>
</fieldset>
use the content attribute (if it is available).
When using the "label for" parameter on radio buttons, to be 508 compliant*, is the following correct?
<label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label>
or is this?
<input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>
Reason I ask is that in the second example, "label" is only encompassing the text and not the actual radio button.
*Section 508 of the Rehabilitation Act of 1973 requires federal agencies to provide software and website accessibility to people with disabilities.
You almost got it. It should be this:
<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>
The value in for should be the id of the element you are labeling.
Either structure is valid and accessible, but the for attribute should be equal to the id of the input element:
<input type="radio" ... id="r1" /><label for="r1">button text</label>
or
<label for="r1"><input type="radio" ... id="r1" />button text</label>
The for attribute is optional in the second version (label containing input), but IIRC there were some older browsers that didn't make the label text clickable unless you included it. The first version (label after input) is easier to style with CSS using the adjacent sibling selector +:
input[type="radio"]:checked+label {font-weight:bold;}
(Firstly read the other answers which has explained the for in the <label></label> tags.
Well, both the tops answers are correct, but for my challenge, it was when you have several radio boxes, you should select for them a common name like name="r1" but with different ids id="r1_1" ... id="r1_2"
So this way the answer is more clear and removes the conflicts between name and ids as well.
You need different ids for different options of the radio box.
<input type="radio" name="r1" id="r1_1" />
<label for="r1_1">button text one</label>
<br/>
<input type="radio" name="r1" id="r1_2" />
<label for="r1_2">button text two</label>
<br/>
<input type="radio" name="r1" id="r1_3" />
<label for="r1_3">button text three</label>