<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
I have something like above code. When users click the label it should toggle the input and focus on it. It works everywhere but on a popup page. Since this functionality comes with html I have no idea what is happening. I really appreciate if some one can give me a hint. I am investigating my pop up page.
Thanks
Any chance you use that id mutiple times on your page?
Also in your case I would just do:
<form>
<label>Male <input type="radio" name="sex" id="male" /></label>
<br />
<label>Female <input type="radio" name="sex" id="female" /></label>
</form>
Related
This question already has answers here:
Assign an initial value to radio button as checked
(10 answers)
Closed 6 years ago.
I'm making a form for a ticking site and can't figure out how to have a button selected by default.
<form>
<input type="radio" name="gender" value="general"> General<br>
<input type="radio" name="gender" value="medium"> Medium<br>
<input type="radio" name="gender" value="high"> High
</form>
I know it's something simple but I can't seem to figure it out
You can add a checked attribute into the input tag like so.
<form>
<input type="radio" name="gender" value="general" checked> General<br>
<input type="radio" name="gender" value="medium"> Medium<br>
<input type="radio" name="gender" value="high"> High
</form>
see w3 schools for an example.
Just add the checked attribute to the relevant input.
The checked attribute is a boolean attribute.
When present, it specifies that an element should be pre-selected (checked) when the page loads.
<form>
<input type="radio" name="gender" value="general" checked> General<br>
<input type="radio" name="gender" value="medium"> Medium<br>
<input type="radio" name="gender" value="high"> High
</form>
Use the checked attribute.
<form>
<input type="radio" name="gender" value="general" checked> General<br>
<input type="radio" name="gender" value="medium"> Medium<br>
<input type="radio" name="gender" value="high"> High
</form>
Use the "checked" attribute in input where you want to check.
<form>
<input type="radio" name="gender" value="general" checked> General<br>
<input type="radio" name="gender" value="medium"> Medium<br>
<input type="radio" name="gender" value="high"> High
</form>
You can use the Checked attribute of HTML input tag:
<form>
<input type="radio" name="gender" value="general"> General<br>
<input type="radio" name="gender" value="medium"> Medium<br>
<input type="radio" name="gender" value="high" checked> High
</form>
Fiddle
I was shown that in general, there are two ways of labeling radio buttons:
Method #1:
<label>Male<input type="radio" name="gender" value="m"></label>
<label>Female<input type="radio" name="gender" value="f"></label>
Method #2 (using for):
<label for="id_male">Male</label>
<input type="radio" id="id_male" name="gender" value="m">
<label for="id_female">Female</label>
<input type="radio" id="id_female" name="gender" value="f">
But what if there is a need to associate a group of radio buttons with a label?
i.e:
<label>What is your gender?
<label>Male<input type="radio" name="gender" value="m"></label>
<label>Female<input type="radio" name="gender" value="f"></label>
</label>
The questions are:
Is the way used to associate the "What is your gender?" label above correct?
Is there a way to associate "What is your gender?" that corresponds to Method #2 (i.e. using for)?
use method #2 like this:
<form action="" method="post">
<fieldset>
<legend>What's your gender?</legend>
<label for="id_male">Male</label>
<input type="radio" id="id_male" name="gender" value="m">
<label for="id_female">Female</label>
<input type="radio" id="id_female" name="gender" value="f">
</fieldset>
</form>
See more about fieldset
A good solution is using fieldset/legend combination:
<form>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</fieldset>
</form>
Here's a fiddle
I have a multiple forms in one page. Each form has exactly the same content. But i encountered an issue regarding with my labels. I know that label "for" tag should be unique and pointed to the element id but I have to multiply the form for some reason.
Please refer to my code found in jsfiddle my code
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
<!-- another form but the same content -->
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
Thanks
Either:
Generate a prefix that you apply to all the ids in a given instance of a form
Don't use for or id and place the form controls inside the label elements.
From what I have gathered, in order to make a label of a radio button clickable, you must assign the same "name" attribute value to both elements.
The problem I am having is when you have more than one radio button, say a "yes or no" type selection. In order to make it to where if you click one, the other disables is that both radio buttons "name" attribute has to be the same value.
Is it possible to do both?
<label for="no">No</label>
<input type="radio" name="no" value="no" />
<label for="yes">Yes</label>
<input type="radio" name="yes" value="yes" />
id (not name) attribute should be referred by label's for attribute. It should be like this: http://jsfiddle.net/zzsSw/
<label for="no">No</label>
<input type="radio" name="mygroup" id="no" value="no" />
<label for="yes">Yes</label>
<input type="radio" name="mygroup" id="yes" value="yes" />
You can also write labels without IDs:
<label>
<input type="radio" name="mygroup" />
My clickable caption
</label>
or checkbox
<label>
<input type="checkbox" name="mygroup[]" />
My clickable caption
</label>
It seems simple, but this has been a bit of a headscratcher for me. Given the following (valid xhtml transitional) code:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test" value="5" />
</form>
Why is it that I can't tab between radio buttons? This issue seems to be because they all have the same name attribute, but that seems rather counter-intuitive to me as far as accesbility goes. Why does the focus state only get applied to one? Is this because the group is treated as a single element? Are access keys the only non-Javascript solution here?
You actually use the arrow keys to move within the radio buttons because as you said, they are treated as a single element. This is normal behavior.
As James and Tatu said that is normal, I don't know if you have used "TABINDEX", it might work.
<input type="radio" id="test5" name="test" value="5" tabindex="5" />
But as they are treated as single element it might not work.
Yes, each radio button group is treated as one form element - if you want to skip between the group elements then use the arrow keys. It does make sense; if you're tabbing through a long form with a group of 10 radio buttons halfway down, you'd get annoyed if you had to tab through all 10 radio options before moving to the next form item.
If they're not in the same group, then you can tab between them. In the example below, T5 will gain separate tab focus to the rest:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test2" value="5" />
</form>