How do you make the simplest radio button in HTML?
The simplest radio button in HTML is created using the element
<input type="radio">.
It lets the user pick one option out of several, for example gender, payment method or category.
1. The simplest example
<input type="radio">A small circle appears on the page, which can be marked with a dot.
2. With a caption (via
So that the user understands what the radio button is for, a description text is added:
<label>
<input type="radio">
Male
</label>Now clicking the text also activates the radio button.
3. A group of radio buttons
For several buttons to work as a single choice (only one active),
they must all have the same name attribute, but different value values.
Example:
<form>
<label><input type="radio" name="gender" value="male"> Male</label><br>
<label><input type="radio" name="gender" value="female"> Female</label><br>
<label><input type="radio" name="gender" value="other"> Other</label><br>
<button type="submit">Submit</button>
</form>How it works:
-
Only one of the three options can be chosen.
-
On form submission the browser sends, for example:
javascriptgender=female
4. Commonly used attributes
| Attribute | What it does | Example |
|---|---|---|
name | Groups radio buttons into one group | name="gender" |
value | Value sent to the server | value="male" |
checked | Makes the button selected by default | checked |
disabled | Disables the button (cannot be chosen) | disabled |
required | Requires a choice before submitting | required |
Example with a selected option:
<input type="radio" name="gender" value="male" checked> Male5. Difference from checkbox
| Element | Behavior |
|---|---|
| Checkbox | Several options can be chosen |
| Radio | Only one option in a group can be chosen |
Summary:
| Property | Description |
|---|---|
| Tag | <input type="radio"> |
| Purpose | Switch (choosing one of several options) |
| Grouping | Via the same name |
| Sending data | The chosen value is sent |
| Often used with | <label> for a caption |
In simple terms:
<input type="radio"> is a round button for choosing one option.
The minimal code:
<input type="radio">And with a caption and choice logic:
<label><input type="radio" name="gender" value="male"> Male</label>Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.