58

i have this radio button (and some other after this one):

<input type="radio" name="group1" value="Milk"> Milk<br>

But if i want to activate the radio button, i have to click it, clicking the word "Milk" which is to the right of the button, doesn't activate it. How can i do that?, all the examples i found about radio buttons so far, have the same issue. Thanks in advance.

Faito
  • 743
  • 1
  • 5
  • 18
  • 2
    possible duplicate of [Radio Groups with clickable label](http://stackoverflow.com/questions/4684382/radio-groups-with-clickable-label) – isherwood Oct 16 '13 at 19:38
  • 2
    possible duplicate of [How to associate labels with radio buttons](http://stackoverflow.com/questions/658689/how-to-associate-labels-with-radio-buttons) – Mansfield Oct 16 '13 at 19:40

3 Answers3

137

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

Nathan Lafferty
  • 1,890
  • 1
  • 15
  • 15
41

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:

enter image description here

Mansfield
  • 13,629
  • 18
  • 77
  • 111
6

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.

Anupam Maurya
  • 1,515
  • 19
  • 25