Radio Buttons In HTML

An HTML radio button is used to select 1 among multiple choices.

When you select 1 choice in the radio buttons then other choices are automatically deselected.

I came through an awesome article for the HTML radio button that discusses the radio buttons step-by-step with code and infographics.

The infographic shown below explains step-by-step how to create radio buttons, group them and give them value.

The explained steps are:

1: Create input element with type="radio"

<input type="radio"> Email
<input type="radio"> Phone
<input type="radio"> Mail

2: Specify name attribute to group them

<input type="radio" name="contact"> Email
<input type="radio" name="contact"> Phone
<input type="radio" name="contact"> Message

3: Add a value attribute to give the button an input value

<input type="radio" name="contact" value="email"> Email
<input type="radio" name="contact" value="phone"> Phone
<input type="radio" name="contact" value="message"> Message

4: Finally you can use label element to increase the clickable area of the radio button

<input type="radio" name="contact" value="email" id="email">
<label for="email">: Email</label>

<input type="radio" name="contact" value="phone" id="phone">
<label for="phone">: Phone</label>

<input type="radio" name="contact" value="message" id="message">
<label for="message">: Message</label>

Reference: HTML radio button (TutorialsTonight)