November 11, 2022

How to Make Radio Button for Gender in HTML

In this tutorial, you will learn how to make radio button for gender in HTML. When you are creating a form, you may want to create radio buttons for gender, so that the user can select only one radio button in a given group. Radio buttons are typically small circles, which are filled when selected.

To create radio buttons for gender, you have to use an input element with the value of type set to radio.

In the following example, we will make radio buttons for gender. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have 3 elements (div, h3, and input). The div element is just a wrapper for the rest of the elements.
The h3 is a heading tag with some content.
We have 2 inputs with type value radio to select the gender.
In the head element, we have added a stylesheet (style.css) by using the link element.

<!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>Select gender</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <h3>Select Gender</h3>
        <input type="radio" name="gender" value="male">Male
        <input type="radio" name="gender" value="fmale">Female
    </div>
</body>

</html>

CSS
We are selecting the div and setting the text-align property value to center to horizontally center align the div.

div {
    text-align: center;
}

You May Also Like: