25.7. Radio Input¶

Radio inputs allow a user to pick one option out of a grouping of options. Radio inputs with the same name are grouped. Only one radio input in a group can be chosen at a time. The value attribute of the chosen radio input will be submitted. Radio inputs are best used with <label> tags.

Type	Syntax	Description	Demo
radio	`<input type="radio" name="crewReady" value="yes"/>`	A small circle that allows selecting one of multiple values. Used in groups of two or more.	yesno

25.7.1. Example¶

Example

<form action="https://handlers.education.launchcode.org/request-parrot" method="post">
   Flight Rating:
   <label>Rough<input type="radio" name="flightRating" value="rough"/></label>
   <label>Few Bumps<input type="radio" name="flightRating" value="fewBumps"/></label>
   <label>Smooth<input type="radio" name="flightRating" value="smooth"/></label>
   <button>Send Report</button>
</form>

Form for flight rating, with a radio inputs for rough, few bumps, and smooth.

Submitted Values

flightRating=smooth

Run it

25.7.2. Check Your Understanding¶

Question

Should a group of radio inputs have the same value for the name attribute?