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.
- In the HTML file, we have multiple elements such as
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.
<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>
<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>