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.

HTML Code:

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

Radios:

Italian:
Greek:
Chinese:

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.

HTML Code:

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:

Italian:
Greek:
Chinese:

Male:
Female:

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.

HTML Code:

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

Default Italian:

Italian:
Greek:
Chinese:

HTML Code:

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

Default Greek:

Italian:
Greek:
Chinese:

HTML Code:

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

Default Chinese:

Italian:
Greek:
Chinese:

Posted in: HyperText MarkUp Language