To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag.
To check which radio button is selected in a form, we first get the desired input group with the type of input as an option and then the value of this selection can then be accessed by the val() method. This returns the name of the option that is currently selected.
Here you want to use the label tag.
Something like:
<label>
<input type="radio" name="group1" value="Milk">
Milk
</label><br/>
Labels tell the browser that everything contained within should be treated as one element (in terms of text. They are not divs)
Take a look at this for an example: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_label
If you use the label tag, giving your radio button an ID, you should be able to click on the label to select the radio.
<input type="radio" name="group1" value="Milk" id="rad1">
<label for="rad1">Milk</label>
http://jsfiddle.net/tvFgU/1/
This is valid for xhtml 1.0 strict:
For React JSX
<input type="radio" name="group" value="happy" id="rad1">
<label htmlFor="rad1">YES</label>
<input type="radio" name="group" value="sad" id="rad2">
<label htmlFor="rad2">NO</label>
Here Name attribute would be the same for both radio button.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With