While building a form on a website, sometimes you want the user to pick one item from a list, like choosing their gender or picking a delivery type. This is where HTML radio buttons come in. The HTML radio button is a useful form element that helps users create single-choice options. Whether you’re new to web development or have started learning forms, understanding how to create a radio button in HTML is important.
In this blog, you will learn everything about the HTML radio button, including how to use the radio button in HTML, with the best practices and examples.
Table of Contents:
What is HTML?
HTML stands for HyperText Markup Language. It is defined as the standard markup language that is used to define and create web page structure. In simple words, HTML tells the browser about what content to display and how the content should be arranged.
A radio button in HTML is defined as a small and round button that allows users to select only one option from a given list. The HTML radio buttons are commonly used where you’re asked to select your gender, pick a payment method, or choose a delivery option. When a user clicks on one radio button, then the other option in the same group is unselected automatically.
An HTML radio button is created by using the <input> tag in HTML with the type set to “radio”. In order to group multiple radio buttons together, you have to give a name attribute to all the input tags.
Kickstart Your Journey in Web Development
Sign Up Now
For creating HTML radio buttons, you have to use the <input> tag in HTML. The input tag in HTML is of various types, like text, number, checkbox, and more. To create a radio button, set the type attribute to radio. This tells the browser that this input is a radio button.
Example: Creating an HTML Radio Button
Output:
Explanation: In this example, radio buttons are created by using the <input> tag in HTML. The type=”radio” will help the browser understand that this input is a radio button. The name=”gender” given in both input tags helps you to group the buttons together. This will allow users to select only one option at a time. The value attribute is used to specify what data is being sent when the form is submitted.
Here are some more examples of HTML radio buttons. These examples help you to understand more about radio buttons:
Output:
Explanation: In this example, you hide the default HTML radio button. Then, the label::before is used to create a custom circle, and when users click on the radio button, label::after shows a filled dot.
Output:
Explanation: In this example, the onclick event runs a function when the user clicks on the HTML radio button. This showChoice function shows an alert message with the selected value.
An HTML radio button is mostly used when you want users to select only one option from a list. Here are some real-world use cases where HTML radio buttons are used most:
- Many Sign-up or registration forms use HTML radio buttons to allow users to choose their gender.
- HTML radio buttons are used in e-commerce websites and allow users to select payment methods.
- It is used in surveys or quiz forms to ask questions, where users have to select one option from them.
Using HTML radio button elements in the right way helps you to improve user experience. Here are some of the points that you need to remember while using radio buttons in HTML:
- Try to use the same name attribute for a group if you want users to choose only one option from a group.
- Always use the <label> tag with each HTML radio button.
- If you want, then you can select one option as a default one by using the checked attribute.
- Try to keep the options short and simple, so that it becomes easy for the users to understand.
Browser Support
The HTML radio button is a widely supported element in web development. Here is the list of all the modern browsers that support HTML radio buttons:
- Google Chrome
- Mozilla Firefox
- Safari
- Microsoft Edge
- Opera Mini
- Internet Explorer
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
The HTML radio button is an important element that is used for building forms on a website. It helps the users select just one option from a list, which makes it perfect for creating things like selecting gender, payment methods, or delivery options. Whether you are a beginner or a person who has just started learning HTML, knowing how to use radio buttons in HTML helps you to create better forms and improve user experience.
To learn more about HTML and CSS, check out this Web Development course and also explore HTML Interview Questions prepared by industry experts.
Q1. What is a Radio Button in HTML?
An HTML radio button is an input element that allows users to select one option from a given list. You can use the <input type=”radio”> to create radio buttons in HTML.
Q2. How do I add a button in HTML?
You can use the <button> tag or <input type=”button”> tags to create a button in HTML.
Q3. How to make radio buttons required in HTML?
For making radio buttons required in HTML, you have to add the required attribute
Q4. How do I add a link in HTML?
You can use <a> tag for adding hyperlinks in HTML.
Q5. Can I use more than one group of radio buttons in a single form?
You can use more than one group of radio buttons in a single form by ensuring that each group has a different value of the name attribute.