Table of contents
1.
Introduction 
2.
Example of Web Forms Radio Button
2.1.
WebControls.aspx
2.2.
WebControls.aspx.cs
3.
Properties
4.
Radio buttons sizes
5.
Radio Button label
6.
Custom/Fancy Radio Button
7.
Frequently Asked Questions
7.1.
What is the HTML form for a radio button?
7.2.
How do I automatically select a radio button in HTML?
7.3.
How do I make a radio button clickable in HTML?
8.
Conclusion
Last Updated: Jan 14, 2025
Easy

Web Forms Radio Button

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction 

In input control or custom HTML5 input type radio control, web forms radio buttons take inputs from the user. This is used to provide a group of options for the users to choose from that group. There are two states of the radio button: checked and unchecked. 

Web Forms Radio Button

ASP.NET provides its tag to create server-side control.

< asp:RadioButtonID="RadioButton1" runat="server" Text="Coding Ninja" GroupName="communities"/>  

 

And it is rendered as HTML control by the server. furthermore, the following code gets generated-

<input id="RadioButton1" type="radio" name="communities" value="RadioButton1" /><labelfor="RadioButton1">Coding Ninja</label>  

 

Output: 

output

Example of Web Forms Radio Button

Here we are creating a group of two radio buttons, and the group name is codingLanguages.

WebControls.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebControls.aspx.cs"   
Inherits="WebFormsControlls.WebControls" %>  
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
            <asp:RadioButton ID="RadioButton1" runat="server" Text="Java" GroupName="codingLanguages" />  
            <asp:RadioButton ID="RadioButton2" runat="server" Text="C++" GroupName="codingLanguages" />  
        </div>  
        <p>  
            <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" style="width: 72px" />  
        </p>  
    </form>  
    <asp:Label runat="server" id="codingLanguagesId"></asp:Label>  
</body>  
</html>  

WebControls.aspx.cs

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
namespace WebFormsControlls  
{  
    public partial class WebControls : System.Web.UI.Page  
    {  
        protected void Button1_Click(object sender, EventArgs e)  
        {  
            genderId.Text = "";  
            if (RadioButton1.Checked)  
            {  
                codingLanguageId.Text = "Your Coding language is "+RadioButton1.Text;  
            }  
            else codingLanguageId.Text = "Your Coding language is "+RadioButton2.Text;  
  
        }  
    }  
}  
You can also try this code with Online Javascript Compiler
Run Code

 

The properties for the control are like this -

WebControls.aspx

The following output will be shown on the browser -

WebControls.aspx

When the user selects any radio buttons, this response is sent back to the client.

WebControls.aspx

Properties

The tabled below are some of the properties of this control-

Property

Description

TabIndexThe tab order of the controls.
BackColorThis property sets the background colour of the control.
AccessKeyWe use this property to set up the Keyboard shortcut of the control.
TextWe use this property to set up the text to be shown for the control.
HeightFor setting up the height of the control, we use this property.
WidthFor setting up the width of the control, we use this property.
BorderColorTo set up the control's border colour, we use this property.
BorderWidthFor setting up the border width of the control, we use this property.

 

Radio buttons sizes

There are different sizes of radio buttons of which we can take use -

  • Small (small width and height)
  • Medium ( medium size height and width )

Here is an example -

We will add the following code to the ASPX page. 

<%-- the group of small and medium size of radio buttons

By default, here, no checked radio button--%>
Small size Radio buttons
<br />
<ej:RadioButton Name="lang" ID="Radio_java" runat="server" Size="Small" Checked="true">
</ej:RadioButton>
<label for="Radio_java">
Java</label>
<br />
<ej:RadioButton Name="lang ID="Radio_cpp" runat="server" Size="Small">
</ej:RadioButton>
<label for="Radio_cpp">

C++</label>
<br />
Medium size Radio buttons
<br />
<ej:RadioButton Name="lang1" ID="Radio1_Java" runat="server" Size="Medium" Checked="true">
</ej:RadioButton>
<label for="Radio1_Java">
Java</label>
<br />
<ej:RadioButton Name="lang2" ID="Radio1_Cpp" runat="server" Size="Medium">
</ej:RadioButton>
<label for="Radio1_Cpp">
C++</label>

 

CSS styling:

<style type="text/css">
    .page-align
    {
        margin: 100px;
    }
</style>

 

Output:

output

Radio Button label

ASP.Net WebForms Radio Button caption is defined as the label option. We can label the radio button and position it at the starting ( before ) or the end ( after ).

Radio Button label

Custom/Fancy Radio Button

The look of the Radio Button UI (inside and outer circles) may be completely customized.

Custom/Fancy Radio Button

Frequently Asked Questions

What is the HTML form for a radio button?

HTML radio buttons are created using the <input> tag with type="radio" and grouped by the same name attribute to allow one selection.

How do I automatically select a radio button in HTML?

To pre-select a radio button, add the checked attribute in the <input> tag, e.g., <input type="radio" name="option" checked>.

How do I make a radio button clickable in HTML?

To make a radio button clickable, include the <input type="radio"> tag in the HTML and ensure it is not disabled.

Conclusion

In this blog, we learned about Web Forms Radio ButtonWe further looked at some of its properties and examples. We also went through different radio buttons, labels, and Custom/Fancy Radio Button. Don't come to a halt here. Check out our Naukri code 360.

Happy Learning!

Live masterclass