What's the difference between radio buttons and checkboxes?

Radio buttons allow only one selection from a group (none or exactly one), while checkboxes allow multiple selections (zero or more). Use radio buttons for mutually exclusive choices.

How do I access radio button values in Classic ASP?

In Classic ASP, use Request.Form('radioName') to get the VALUE of the selected radio button. If none is selected, it returns an empty string. Always validate for empty values.

How can I set a default selected radio button?

Add the CHECKED attribute to the desired element, e.g., . This ensures one option is pre-selected.

How Radio Button Values Can Be Accessed in Form Processing Scripts

Introduction

Radio buttons and checkboxes are similar in many ways, but they serve different purposes. Both are used to group options that users can choose from. Let's explore when to use each and how to work with them effectively.

Understanding the Difference

Consider an example where you create a form that lists three product lines and asks users to select which ones they're interested in. If you want users to select one, two, or all three product lines, you'd use checkboxes. But if you want to ask users what their most favorite product line is, checkboxes wouldn't work in this situation. Radio buttons would be the right choice.

Checkboxes allow users to select none, one, or many of the available options among a group of related options. Radio buttons, on the other hand, only allow none or one of the options to be selected from a group.

Creating Radio Buttons

The syntax for the <INPUT> tag when creating a radio button looks similar to creating a checkbox. The only change is the value of the TYPE property from TYPE="checkbox" to TYPE="radio".

Here's a basic example:

Basic Radio Buttons

<INPUT TYPE="radio" NAME="productLine" VALUE="electronics"> Electronics<BR>
<INPUT TYPE="radio" NAME="productLine" VALUE="appliances"> Appliances<BR>
<INPUT TYPE="radio" NAME="productLine" VALUE="furniture"> Furniture<BR>

With radio buttons, as with checkboxes, related radio buttons have their NAME properties equal but different values for their VALUE properties. This is how the browser knows they're part of the same group.

Setting Default Selection

You can use the CHECKED keyword to have a radio button selected by default. The syntax is identical to having a checkbox selected by default:

Radio Button with Default

<INPUT TYPE="radio" NAME="productLine" VALUE="stereos" CHECKED> Stereos<BR>
<INPUT TYPE="radio" NAME="productLine" VALUE="electronics"> Electronics<BR>
<INPUT TYPE="radio" NAME="productLine" VALUE="appliances"> Appliances<BR>

Radio buttons ensure that the user selects none or one of the related options. However, if you use the CHECKED keyword to have a radio button selected by default, you restrict the user to having to choose an option. Without a radio button selected by default, the user can simply not choose any option.

If one of the radio buttons is selected by default, there's no way the user can unselect it. So, if you use radio buttons for options that must have a response (such as gender), it's wise to have one of the radio buttons selected by default. That way, the user cannot submit the form without having selected one of the options.

Complete Form Example

Here's a complete form using radio buttons:

Complete Survey Form

<HTML>
<HEAD>
    <TITLE>Product Survey</TITLE>
</HEAD>
<BODY>
    <H2>Customer Survey</H2>
    <FORM METHOD="POST" ACTION="process_survey.asp">
        <P><B>What is your favorite product line?</B></P>
        <INPUT TYPE="radio" NAME="favoriteProduct" VALUE="electronics" CHECKED> Electronics<BR>
        <INPUT TYPE="radio" NAME="favoriteProduct" VALUE="appliances"> Home Appliances<BR>
        <INPUT TYPE="radio" NAME="favoriteProduct" VALUE="furniture"> Furniture<BR>
        <INPUT TYPE="radio" NAME="favoriteProduct" VALUE="outdoor"> Outdoor Equipment<BR>
        
        <P><B>How often do you shop with us?</B></P>
        <INPUT TYPE="radio" NAME="frequency" VALUE="weekly"> Weekly<BR>
        <INPUT TYPE="radio" NAME="frequency" VALUE="monthly"> Monthly<BR>
        <INPUT TYPE="radio" NAME="frequency" VALUE="yearly"> Once a year<BR>
        <INPUT TYPE="radio" NAME="frequency" VALUE="rarely"> Rarely<BR>
        
        <P><INPUT TYPE="submit" VALUE="Submit Survey"></P>
    </FORM>
</BODY>
</HTML>

Accessing Radio Button Values in Classic ASP

When a user submits the form, you can access the selected radio button value in your ASP script:

ASP Radio Processing

<%
' Get the selected values
Dim favoriteProduct, frequency

favoriteProduct = Request.Form("favoriteProduct")
frequency = Request.Form("frequency")

' Display the results
Response.Write "<H2>Survey Results</H2>"
Response.Write "<P>Your favorite product line: " & favoriteProduct & "</P>"
Response.Write "<P>Shopping frequency: " & frequency & "</P>"

' Use conditional logic based on the selection
If favoriteProduct = "electronics" Then
    Response.Write "<P>Great! Check out our new electronics arriving next week!</P>"
ElseIf favoriteProduct = "appliances" Then
    Response.Write "<P>We have a sale on appliances this month!</P>"
End If
%>

Validating Radio Button Selection

You should always validate that a user has made a selection:

ASP Radio Validation

<%
Dim favoriteProduct
favoriteProduct = Request.Form("favoriteProduct")

If favoriteProduct = "" Then
    Response.Write "<P style='color: red;'>Error: Please select your favorite product line.</P>"
    Response.Write "<P><A HREF='survey.htm'>Go back to the survey</A></P>"
    Response.End
End If

' Process the valid selection
Response.Write "<P>Thank you for selecting: " & favoriteProduct & "</P>"
%>

Modern HTML5 Approach

In modern HTML5, you can enhance radio buttons with additional attributes:

HTML5 Radio Buttons

<form method="post" action="process_survey.asp">
    <fieldset>
        <legend>What is your favorite product line?</legend>
        
        <label>
            <input type="radio" name="favoriteProduct" value="electronics" required checked>
            Electronics
        </label><br>
        
        <label>
            <input type="radio" name="favoriteProduct" value="appliances" required>
            Home Appliances
        </label><br>
        
        <label>
            <input type="radio" name="favoriteProduct" value="furniture" required>
            Furniture
        </label><br>
        
        <label>
            <input type="radio" name="favoriteProduct" value="outdoor" required>
            Outdoor Equipment
        </label>
    </fieldset>
    
    <button type="submit">Submit Survey</button>
</form>

The required attribute ensures users must select an option before submitting. The <label> tag makes the entire text clickable, improving usability.

ASP.NET Web Forms Implementation

In ASP.NET Web Forms, you'd use RadioButtonList:

ASP.NET RadioButtonList

<asp:RadioButtonList ID="rblFavoriteProduct" runat="server" RepeatDirection="Vertical">
    <asp:ListItem Value="electronics" Selected="True">Electronics</asp:ListItem>
    <asp:ListItem Value="appliances">Home Appliances</asp:ListItem>
    <asp:ListItem Value="furniture">Furniture</asp:ListItem>
    <asp:ListItem Value="outdoor">Outdoor Equipment</asp:ListItem>
</asp:RadioButtonList>

Code-behind to access the value:

Web Forms Code-Behind

protected void SubmitButton_Click(object sender, EventArgs e)
{
    string selectedProduct = rblFavoriteProduct.SelectedValue;
    
    if (string.IsNullOrEmpty(selectedProduct))
    {
        lblError.Text = "Please select a product line.";
        return;
    }
    
    lblResult.Text = $"Your favorite product: {selectedProduct}";
    
    // Use the selection
    switch (selectedProduct)
    {
        case "electronics":
            lblMessage.Text = "Check out our new electronics!";
            break;
        case "appliances":
            lblMessage.Text = "We have a sale on appliances!";
            break;
        default:
            lblMessage.Text = "Thank you for your selection!";
            break;
    }
}

ASP.NET MVC Implementation

In ASP.NET MVC, you'd use HTML helpers:

View Model:

MVC View Model

public class SurveyViewModel
{
    [Required(ErrorMessage = "Please select your favorite product line")]
    public string FavoriteProduct { get; set; }
    
    public List<SelectListItem> ProductOptions { get; set; }
}

Controller:

MVC Controller

public ActionResult Survey()
{
    var model = new SurveyViewModel
    {
        ProductOptions = new List<SelectListItem>
        {
            new SelectListItem { Value = "electronics", Text = "Electronics" },
            new SelectListItem { Value = "appliances", Text = "Home Appliances" },
            new SelectListItem { Value = "furniture", Text = "Furniture" },
            new SelectListItem { Value = "outdoor", Text = "Outdoor Equipment" }
        }
    };
    
    return View(model);
}

[HttpPost]
public ActionResult Survey(SurveyViewModel model)
{
    if (!ModelState.IsValid)
    {
        // Reload options
        model.ProductOptions = GetProductOptions();
        return View(model);
    }
    
    // Process the selection
    string message = GetMessageForProduct(model.FavoriteProduct);
    ViewBag.Message = message;
    
    return View("SurveyResult", model);
}

View:

MVC View

@model SurveyViewModel

@using (Html.BeginForm())
{
    <fieldset>
        <legend>What is your favorite product line?</legend>
        
        @foreach (var option in Model.ProductOptions)
        {
            <label>
                @Html.RadioButtonFor(m => m.FavoriteProduct, option.Value)
                @option.Text
            </label>
            <br />
        }
        
        @Html.ValidationMessageFor(m => m.FavoriteProduct, "", new { @class = "text-danger" })
    </fieldset>
    
    <button type="submit">Submit Survey</button>
}

ASP.NET Core with Tag Helpers

In ASP.NET Core, you can use tag helpers for cleaner syntax:

Core Tag Helpers

<form asp-action="Survey" method="post">
    <fieldset>
        <legend>What is your favorite product line?</legend>
        
        <div class="form-check">
            <input class="form-check-input" type="radio" asp-for="FavoriteProduct" value="electronics" id="electronics">
            <label class="form-check-label" for="electronics">Electronics</label>
        </div>
        
        <div class="form-check">
            <input class="form-check-input" type="radio" asp-for="FavoriteProduct" value="appliances" id="appliances">
            <label class="form-check-label" for="appliances">Home Appliances</label>
        </div>
        
        <div class="form-check">
            <input class="form-check-input" type="radio" asp-for="FavoriteProduct" value="furniture" id="furniture">
            <label class="form-check-label" for="furniture">Furniture</label>
        </div>
        
        <span asp-validation-for="FavoriteProduct" class="text-danger"></span>
    </fieldset>
    
    <button type="submit" class="btn btn-primary">Submit Survey</button>
</form>

Choosing Between Checkboxes and Radio Buttons

Checkboxes and radio buttons are used to select one or many options from a set of related options. It's important that you carefully choose how to label each option so that each option in the set is unique. When using checkboxes and radio buttons, you want to present users with a series of distinct options.

Here's a bad example of overlapping options:

The South
The East Coast
The West
The Midwest
The Southeast

What would a user who visited both the South and the East Coast check? Would they check just the Southeast checkbox? Would they check the East Coast and South checkboxes? Or would they check all three? This is why it's important when creating both checkboxes and radio buttons to choose options that are distinct from one another.

A better approach would be:

Northeast
Southeast
Midwest
Southwest
West Coast

Good Practices for Radio Buttons

Use radio buttons when you need exactly one selection from a group of options.
Always provide a default selection if the choice is required.
Keep the number of radio buttons reasonable (typically 5-7 options max). For more options, consider a dropdown list.
Group related radio buttons with a <fieldset> and <legend> for better accessibility.
Make labels clickable by wrapping them in <label> tags or using the for attribute.
Use clear, distinct labels that don't overlap in meaning.
Always validate selections on the server side, even if you have client-side validation.

Here's a complete example with best practices:

Best Practices Example

<form method="post" action="process.asp">
    <fieldset>
        <legend>Select Your Age Group (Required)</legend>
        
        <label for="age1">
            <input type="radio" name="ageGroup" id="age1" value="18-24" required checked>
            18-24 years
        </label><br>
        
        <label for="age2">
            <input type="radio" name="ageGroup" id="age2" value="25-34" required>
            25-34 years
        </label><br>
        
        <label for="age3">
            <input type="radio" name="ageGroup" id="age3" value="35-44" required>
            35-44 years
        </label><br>
        
        <label for="age4">
            <input type="radio" name="ageGroup" id="age4" value="45-54" required>
            45-54 years
        </label><br>
        
        <label for="age5">
            <input type="radio" name="ageGroup" id="age5" value="55+" required>
            55+ years
        </label>
    </fieldset>
    
    <p><button type="submit">Continue</button></p>
</form>

JavaScript Enhancement

You can enhance radio buttons with JavaScript for better user experience:

JavaScript Radio Enhancement

<script>
function updateSelection() {
    var radios = document.getElementsByName('favoriteProduct');
    var selectedValue = '';
    
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            selectedValue = radios[i].value;
            break;
        }
    }
    
    if (selectedValue) {
        document.getElementById('result').innerHTML = 
            'You selected: ' + selectedValue;
    }
}

// Add event listeners
window.onload = function() {
    var radios = document.getElementsByName('favoriteProduct');
    for (var i = 0; i < radios.length; i++) {
        radios[i].addEventListener('change', updateSelection);
    }
};
</script>

<form>
    <input type="radio" name="favoriteProduct" value="electronics" onchange="updateSelection()"> Electronics<br>
    <input type="radio" name="favoriteProduct" value="appliances" onchange="updateSelection()"> Appliances<br>
    <input type="radio" name="favoriteProduct" value="furniture" onchange="updateSelection()"> Furniture<br>
    
    <p id="result"></p>
</form>

Wrapping Up

Radio buttons are essential form controls that help you collect single-choice data from users. By understanding when to use them instead of checkboxes, setting appropriate defaults, and following accessibility best practices, you'll create forms that are both user-friendly and functional. Whether you're working with Classic ASP, ASP.NET, or modern web technologies, the principles remain the same: provide clear options, validate input, and make your forms accessible to all users.