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

Question

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.

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
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

score 137 · Accepted Answer · answered Oct 16 '13 at 19:38

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

answered Oct 16 '13 at 19:38

Nathan Lafferty

1,890
1
15
15

1

This works; however, the link shows an example like @Mansfield answered. – Even Mien Sep 26 '15 at 13:09
1

So easy! and it greatly improves the usability of a site & makes it easier on mobile. – redwards510 Apr 06 '17 at 20:32

Mansfield · Answer 2 · 2013-10-16T20:44:58.430

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

edited Oct 16 '13 at 20:44

answered Oct 16 '13 at 19:39

Mansfield

13,629
18
77
111

I see, is the "for" attribute valid in strict xhtml 1.0? – Faito Oct 16 '13 at 20:05

score 6 · Answer 3 · answered Feb 07 '19 at 12:37

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.

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

3 Answers3

Linked