How do you make the radio button text to be clickable too?

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.

Solution 1:

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

Solution 2:

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: