HTML - Radio Forms

Radios are types of input forms that allow a user to pick an either/or type of selection. In order to achieve this, we must properly name each radio button selection accordingly. These types of forms must be named.

Italian: <input type="radio" name="food" />
Greek: <input type="radio" name="food" />
Chinese: <input type="radio" name="food" />

Radios:

By naming these three radios "food" they are identified as being related by the browser and we achieve this either or effect (only being able to make one selection).

We can further expand this idea and name two different sets of radios.

Italian: <input type="radio" name="food" />
Greek: <input type="radio" name="food" />
Chinese: <input type="radio" name="food" />

Male: <input type="radio" name="gender" />
Female: <input type="radio" name="gender" />

Multiple Radios:

Here we have two sets of radio selections contained within the same form.

HTML - Radio Checked

By using the checked attribute, we can tell our form to automatically "check" a default radio.

Italian: <input type="radio" name="food" checked="yes" />
Greek: <input type="radio" name="food" />
Chinese: <input type="radio" name="food" />

Default Italian:

Italian: <input type="radio" name="food"  />
Greek: <input type="radio" name="food" checked="yes" />
Chinese: <input type="radio" name="food" />

Default Greek:

Italian: <input type="radio" name="food"  />
Greek: <input type="radio" name="food" />
Chinese: <input type="radio" name="food" checked="yes" />

Default Chinese:

• Go Back
• Continue

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!