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.
- In the HTML file, we have 3 elements (
div element is just a wrapper for the rest of the elements.
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.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="fmale">Female
We are selecting the
div and setting the
text-align property value to center to horizontally center align the