CODEWITHSUNDEEP
html
user3443528
user3443528

Reputation: 47

HTML radio button not working according to definition?

From Wikipedia:

"A radio button or option button is a type of graphical user interface element that allows the user to choose only one of a predefined set of options."

http://en.wikipedia.org/wiki/Radio_button

Since that's what I want on my page, I used an input button of type radio: 

    <form id="run_units">
        <input type="radio" value="1">Miles 
        <input type="radio" value="2">Kilometers
    </form>

And yet, when I test my page, it's allowing me to select both Miles and Kilometers. What am I doing wrong?

Upvotes: 0

Views: 90

Answers (2)

Al.G.
Al.G.

Reputation: 4406

Give to each input a name. The names should be equal.

    <input type="radio" name="distance" value="1">Miles 
    <input type="radio" name="distance" value="2">Kilometers

Why to use the name attribute? Because the checkbox is used in forms, and each <input> should have a name, by which is sent to the server.

Upvotes: 4

Dryden Long
Dryden Long

Reputation: 10190

In order for the choice to limited to just one radio button you need to give both buttons the same name for example:

<form id="run_units">
    <input type="radio" value="1" name="distance">Miles 
    <input type="radio" value="2" name="distance">Kilometers
</form>

Here is a fiddle: http://jsfiddle.net/4pQMG/

All the radio buttons that you want limited to a "group" should have the same name

Upvotes: 3

Related Questions