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.
Related
I have used radio button for gender as follow:-
<td><input type="radio" name="gender" value="male" checked required="required"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other</td>
but this "required" validation is not working how to put validation on it without using JavaScript.
Required is a HTML5 attribute for input control validation, you can add the required attribute at end of tag and if you want Gender radio button checked by default, you can add checked.
This would checked the radio button default when page loads,
<input type="radio" name="gender" value="male" checked required/> Male
This will work, so we no need to go for JS validation.
You can set default value to radio button like this :
<input type="radio" name="gender" value="male" checked="checked" />
then you have not need to validation...
The required attribute is an HTML5 attribute and if you're using an older browser it may not support it.
http://www.w3schools.com/html/html_form_attributes.asp
Also, you simply put "required", not "required="required"", just like with "checked"
Please see this reference and try it yourself
http://www.chennaisunday.com/jsradio.html
In my web page I have placed some radio buttons. But these buttons are not working properly. I can check multiple buttons.
code:
<label for="abc" style="margin-top:-20px;margin-left:40px">xyz</label>
<input type="radio" id="abc" name="abc" >
<label for="bcd" style="margin-top:-20px;margin-left:40px">abc</label>
<input type="radio" id="bcd" name="bcd" >
<label for="efg" style="margin-top:-20px;margin-left:40px">ccc</label>
<input type="radio" id="efg" name="efg" >
fiddle
I want to check only one button. Please any one help me.
Because you've different value for name attribute, they should have a common name value, just like you group items.. for example
<input type="radio" name="group1" />
<input type="radio" name="group1" />
<input type="radio" name="group1" />
<!-- You can select any one from each group -->
<input type="radio" name="group2" />
<input type="radio" name="group2" />
<input type="radio" name="group2" />
Demo
<label for="abc" style="margin-top:-20px;margin-left:40px">xyz</label>
<input type="radio" id="abc" name="abc" >
<label for="bcd" style="margin-top:-20px;margin-left:40px">abc</label>
<input type="radio" id="bcd" name="abc" >
<label for="efg" style="margin-top:-20px;margin-left:40px">ccc</label>
<input type="radio" id="efg" name="abc" >
All inputs must have the same name="" attribute value
Radio buttons which are grouped together must have the same case-sensitive name property.
<label for="input1">First Input</label>
<input type="radio" id="input1" name="inputGroup" >
<label for="input2">Second Input</label>
<input type="radio" id="input2" name="inputGroup" >
<label for="input3">Third Input</label>
<input type="radio" id="input3" name="inputGroup" >
JSFiddle demo.
From the HTML specification:
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive.
Give same name to all radio button from which you want to select one option
<label for="abc" style="margin-top:-20px;margin-left:40px">xyz</label>
<input type="radio" id="abc" name="abc" >
<label for="bcd" style="margin-top:-20px;margin-left:40px">abc</label>
<input type="radio" id="bcd" name="abc" >
<label for="efg" style="margin-top:-20px;margin-left:40px">ccc</label>
<input type="radio" id="efg" name="abc" >
Now it will work properly
Name attribute needs to be the same. Name groups radio buttons together to make them one unit.
Name them the same way, and in your php or receiving code it will be something like
$_POST['name'] = 'value of selected radio button'
The name setting tells which group of radio buttons the field belongs to. When you select one button, all other buttons in the same group are unselected.
If you couldn't define which group the current button belongs to, you could only have one group of radio buttons on each page.
e.g :
<input type="radio" name="fruit1" value="Apple"> Apple <br>
<input type="radio" name="fruit1" value="Apricot" checked> Apricot <br>
<input type="radio" name="fruit1" value="Avocado"> Avocado
<hr>
<input type="radio" name="fruit2" value="Banana"> Banana<br>
<input type="radio" name="fruit2" value="Breadfruit"> Breadfruit<br>
<input type="radio" name="fruit2" value="Bilberry" checked> Bilberry
Give the name the same attribute.
The checked attribute can be used to indicate which value should be selected. Somewhere in your syntax for the value you want checked write checked="checked"
I reached this thread searching the keywords "html radio not working". After reviewing my code, I noticed that I used a javascript method "event.preventDefault();" in this custom function that I've made where the HTML node that triggered this event in that custom function were the "not working" radio parent. So I solved my problem removing the "event.preventDefault();". If someone reached this thread in the future, I hope this help you somehow (even for debbuging purposes).
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
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.
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>