Satish Chandra Gupta
Posted on December 5, 2021
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)
Posted on December 5, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
