Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we use radio buttons in HTML forms?
Radio buttons in HTML forms allow users to select only one option from a group of choices. They are created using the <input> tag with type="radio" and are ideal for mutually exclusive selections like gender, age group, or preferences.
Syntax
Following is the basic syntax for creating radio buttons in HTML −
<input type="radio" name="groupName" value="optionValue">Label Text
For proper accessibility and functionality, use labels with radio buttons −
<input type="radio" id="option1" name="groupName" value="optionValue"> <label for="option1">Label Text</label>
Radio Button Attributes
The following table shows the key attributes used with radio buttons −
| Attribute | Description |
|---|---|
| type | Set to "radio" to create a radio button input control. |
| name | Groups radio buttons together. Only one button per group can be selected. |
| value | The value sent to the server when the radio button is selected. |
| id | Unique identifier for associating with a label element. |
| checked | Boolean attribute to pre-select a radio button by default. |
Basic Radio Button Example
Following example demonstrates a simple gender selection using radio buttons −
<!DOCTYPE html>
<html>
<head>
<title>HTML Radio Button Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Gender</h2>
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
</body>
</html>
The output displays three radio buttons where only one can be selected at a time −
Select Your Gender ? Male ? Female ? Other
Radio Buttons with Labels
Using the <label> tag improves accessibility and user experience. When a label is clicked, it automatically selects the associated radio button.
Example
<!DOCTYPE html>
<html>
<head>
<title>Radio Buttons with Labels</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Choose Your Favorite Programming Language</h2>
<form>
<input type="radio" id="javascript" name="language" value="javascript">
<label for="javascript">JavaScript</label><br><br>
<input type="radio" id="python" name="language" value="python">
<label for="python">Python</label><br><br>
<input type="radio" id="java" name="language" value="java">
<label for="java">Java</label><br><br>
<input type="radio" id="csharp" name="language" value="csharp">
<label for="csharp">C#</label>
</form>
</body>
</html>
Clicking on either the radio button or its label text will select the option.
Pre-selected Radio Button
Use the checked attribute to make a radio button selected by default when the page loads.
Example
<!DOCTYPE html>
<html>
<head>
<title>Pre-selected Radio Button</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Experience Level</h2>
<form>
<input type="radio" id="beginner" name="experience" value="beginner">
<label for="beginner">Beginner</label><br><br>
<input type="radio" id="intermediate" name="experience" value="intermediate" checked>
<label for="intermediate">Intermediate</label><br><br>
<input type="radio" id="advanced" name="experience" value="advanced">
<label for="advanced">Advanced</label>
</form>
</body>
</html>
The "Intermediate" option will be selected by default when the page loads −
Select Your Experience Level ? Beginner ? Intermediate (pre-selected) ? Advanced
Complete Form with Radio Buttons
Following example shows radio buttons integrated into a complete form with a submit button −
<!DOCTYPE html>
<html>
<head>
<title>Complete Radio Button Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Registration Form</h2>
<form action="/submit-form" method="post">
<p><b>Select your preferred course:</b></p>
<input type="radio" id="html" name="course" value="html">
<label for="html">HTML5 Fundamentals</label><br><br>
<input type="radio" id="css" name="course" value="css">
<label for="css">CSS3 Styling</label><br><br>
<input type="radio" id="js" name="course" value="javascript">
<label for="js">JavaScript Programming</label><br><br>
<input type="radio" id="react" name="course" value="react">
<label for="react">React Development</label><br><br>
<input type="submit" value="Register Now" style="padding: 10px 20px; font-size: 16px;">
</form>
</body>
</html>
When submitted, the form sends the selected course value to the server as course=selectedValue.
Key Points
Important considerations when working with radio buttons −
-
Name attribute grouping − Radio buttons with the same
nameattribute form a group where only one can be selected. -
Value attribute − Each radio button should have a unique
valuewithin its group to identify which option was selected. -
Label association − Always use
<label>elements with theforattribute matching the radio button'sidfor better accessibility. -
Default selection − Use the
checkedattribute on one radio button per group to provide a sensible default choice.
Conclusion
Radio buttons are essential form elements for single-choice selections in HTML forms. By properly grouping them with the name attribute and associating them with labels, you create user-friendly forms that collect precise user input. Remember to always provide appropriate default selections and clear labeling for the best user experience.
7K+ Views
