I want to have a radio button with images instead of text. So I want to have an image of male and female instead of a text of male and female. Can this actually be done using a standard HTML or do I have to use jQuery? How do I do this?
Use <label> elements to host your images, like this:
<input type="radio" name="sex" value="male" id="male-radio">
<label for="male-radio"><img src="male.gif"></label>
<input type="radio" name="sex" value="female" id="female-radio">
<label for="female-radio"><img src="female.gif"></label>
Working example: http://jsfiddle.net/RichieHindle/vQwCF/
Related
i have some values like
Ram's Home
Sam's Home
Dam's Home
i want to show them as radio button.
these values will be my text as well as value for the radio button
i want to create html string from c#
Please help me .. How to do it ?
The following HTML shows how you can add radio buttons to your list.
<form>
<input type="radio" name="gender" value="male" checked />Ram's Home<br>
<input type="radio" name="gender" value="female" />Sam's Home<br>
<input type="radio" name="gender" value="other" />Dam's Home
</form>
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 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
Good day, before we start, forgive the noobishness of the question. Just picked up HTML today.
I'm experimenting with the following code:
<form>
<input type="radio" id="radeng" checked />Male
<br/>
<input type="radio" id="radnor" />Female
</form>
Now, the way I understood it, I should be able to pick either "Male" or "Female" from the first selection.
Problem is, I can select both "Male" AND "Female".
Which is a little weird, and kinda' goes against what I'm trying to achieve.
Can anyone spot my error?
17 Forms / 17.2.1 Control types
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".
Therefore if you want the radio elements to be mutually exclusive, you need to give them all the same name attribute. In this case, I gave them both a value of gender.
For usability, I'd also suggest wrapping the text nodes with label elements with for attributes that match the radio element ids. In doing so, you can toggle the radios by clicking the text (label).
<form>
<label for="radeng">Male</label>
<input type="radio" name="gender" id="radeng" checked />
<label for="radnor">Female</label>
<input type="radio" name="gender" id="radnor" />
</form>
You need to provide a name attribute with the same value and it will select only one. Also, you should use <label> tag for specifying the names of your checkboxes.
Lets have some clean markup :
<ul>
<li>
<label for="radeng">Male</label>
<input type="radio" id="radeng" name="gender" checked />
</li>
<li>
<label for="radnor">Female</label>
<input type="radio" id="radnor" name="gender" />
</li>
</ul>
Demo
So by specifying same values for name attribute groups your radio buttons.
Give same name for the both radio button like below:
<form>
<input type="radio" name="gender" id="radeng" checked />Male
<br/>
<input type="radio" name="gender" id="radnor" />Female
</form>
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