November 13, 2022

How to Make Radio Button Required in HTML

In this tutorial, you will learn how to make radio button required in HTML. As you are aware, the small circles that makeup radio buttons are filled when they are selected. Sometimes when you are creating a form, you may want to create radio buttons that are must be filled in by the users before submitting the form.

To make the radio button required, we have to use the HTML required attribute. The required attribute is a Boolean attribute, which is used to specify that the user should fill in the required data before submitting the form. This required attribute can also be used in other form inputs like checkboxes or text.

In the following example, we have two radio buttons and we will make one of them required. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have multiple elements such as div, h3, and input. The parent div element is just a wrapper for the rest of the elements.
The heading tag h3 has some text content.
We have radio buttons to select the gender. The first radio button has a required attribute, which specifies that the user must select this option before submitting the form.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio button required</title>
</head>

<body>
    <div>
        <h3>Radio Button Required</h3>
        <div><input type="radio" name="gender" value="male" required>Male</div>
        <div><input type="radio" name="gender" value="Female">Female</div>

    </div>
</body>

</html>

You May Also Like: