Home getting a problem where the radio button selections are getting reset to the first radio option

Questions

getting a problem where the radio button selections are getting reset to the first radio option

June 2, 2023

I am a beigner.And i dont know why the gender radio input is getting reset when i click anywhere on the screen below the rdio buttons section.Can anyone help me with this.This below is my code⬇️⬇️⬇️⬇️⬇️

<!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>Document</title>
</head>
<body>
    <h2>Sign Up Form</h2>
    <br><br>
    <form method=GET action="./pages mine/thank you.html">
        <input type="text" placeholder="First name"><br><br>
        
        <input type="text" placeholder="Last name"><br><br>
    
        <input type="email" placeholder="Last name"><br><br>
    
        <input type="password" placeholder="Last name" minlength="5"><br><br>
<!--gender selection-->
        <label><h3>Select Gender<h3></label><br>
        
        <label for="male">male</label>
        <input type="radio"  value="male" id="male" name="gender" required/><br>
        
        <label for="female">female</label>
        <input type="radio" value="female" id="female" name="gender" required/><br>
        
        <label for="other">other</label>
        <input type="radio" value="other" id="other" name="gender"  required/><br><br>
<!--when i click on the screen anywhr after this the gender selection is getting reset-->        
        <label for="nation">Country</label>
        <select id="nation" >
            
            <option value="india" name="nation">INDIA</option>
            <option value="usa" name="nation">USA</option>
            <option value="other" name="nation">OTHER</option>
        </select><br><br>
        <p>Write about yourself below</p><br>
        <input type="textbox" placeholder="type here"><br>
        <input type="submit" placeholder="Sign in">
    </form>
    
</body>
</html>

i was trying the make radio buttons for gender selection but the selection is getting reset on click any where on the screen after the radio buttons section.

>Solution :

There is a lot of things going wrong in this code.

But for your radio button issue, i think this is caused by <label><h3>Select Gender<h3></label><br>. Your <h3>node is not closed. It should be :

<h3>Select Gender</h3>

Also you don’t need a labelaround that.

Here is a refactored version of your code :

https://jsfiddle.net/dzt8ja6n/

<!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>Document</title>
</head>
<body>
    <h2>Sign Up Form</h2>
    <br><br>
    <form method="GET" action="./pages mine/thank you.html">
        <input type="text" placeholder="First name"><br><br>
        
        <input type="text" placeholder="Last name"><br><br>
    
        <input type="email" placeholder="Email"><br><br>
    
        <input type="password" placeholder="Password" minlength="5"><br><br>

        <!-- Gender selection -->
        <label for="gender"><h3>Select Gender</h3></label><br>
        
        <label for="male">Male</label>
        <input type="radio" value="male" id="male" name="gender" required><br>
        
        <label for="female">Female</label>
        <input type="radio" value="female" id="female" name="gender" required><br>
        
        <label for="other">Other</label>
        <input type="radio" value="other" id="other" name="gender" required><br><br>
        
        <label for="nation">Country</label>
        <select id="nation" name="nation">
            <option value="india">INDIA</option>
            <option value="usa">USA</option>
            <option value="other">OTHER</option>
        </select><br><br>
        
        <p>Write about yourself below</p><br>
        <textarea placeholder="Type here"></textarea><br>
        
        <input type="submit" value="Sign in">
    </form>
</body>
</html>