Step13 Every radio button group should have at least 2 radio buttons

HTML-CSS
1

i dont understand, my radio buttons are grouped by the same name value this may be really stupid of me but i really need help lol… plsss

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="styles.css">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>FreeCodeCamp survey forum</title>
</head>
<body>
 <main>
   <header>
 <h1 id="title"><b>Free Code Camp survey forum</b></h1>
 <p id="description" class="text1">Thankyou for taking the time to help us improve</p>
 </header>

 <fieldset>
 <form id="survey-form">
   <div class="form1">
   <label id="name-label">Name<input class="inputw" type="text" id="name" placeholder="enter your name" required></label>
   </div>

   <div class="form1">
   <label id="email-label">Email<input class="inputw" type="email" id="email"  placeholder="enter your email" required></input></label>
   </div>

   <div class="form1">
   <label id="number-label">Age<input class="inputw" type="number" min="0" max="120" placeholder="enter your age" id="number" required></input></label>
   </div>
   
   <div class="form1">
   <label id="select">Select an option that describes you <select id="dropdown" placeholder="select an option"></label>
   <option>Web Dev</option>
   <option>Tech Engineer</option>
   <option>Data Entrist</option>
   <option>Or a Scientist</option>
     </select>
 </div>

   <fieldset>
     <div class="form1">
     <input type="radio" name="yes1" value="yes" checked>Yes<br><hr>
     <input type="radio" name="yes1.2" value="maybe" >Maybe<br><hr>
     <label><input type="radio" name="no" value="maybe">No</input></label><hr>
     </div>
     </fieldset>
     <fieldset>
       <label><input type="radio" value="check1" name="check"/>Are you happy</label>
       <label><input type="radio" value="check1.2" name="check"/>Are you happy</label>
       </fieldset>

       <label>Your bio<input type="textarea" cols="3" rows="30"></input></label>
 </form>


 </main>
</body>
</html>

/* file: styles.css */
body {
 background-image: url();
 background-repeat: no-repeat;
 background-size: cover;
background-color: rgba(0, 0, 255, 0.2); 

}

fieldset {
 background-color: rgba(0, 0, 122, 0.4);
 max-width: 400px;
 min-width: 200px;
 border-color: #1b1b4f;
 margin: 33px;
}

form {
 
}


input {
 padding: 0.7em;
 background-color: 1b1b4f;
 border-color: 1b1b4f;
 color: #fff;
 font-size: 16px;
 max-width: 500px;
}

label {
 color: #ffffff;
}

h1 {
 text-align: center;
 font-family: sans-serif;
 font-size: 90%;
}

.text1 {
text-align: center;
font-family: sans-serif;

}

select {
 width: 100%;
 padding: 0.7em;
 background-color: #1b1b4f;
 color: white;
}

.form1 {
 padding: 1.25em;
 margin: 1rem 0.5rem 1rem auto;
}


 
.inputw {
width: 100%;
}

.inputh{
 padding: 2em;
 font-size: 1.5rem;
 margin: 0 2em;
}





   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.66 Safari/537.36 Edg/103.0.1264.44

Challenge: Build a Survey Form

Link to the challenge:

2

HI @busseyvinny !

Welcome to the forum!

Your radio buttons are working incorrectly here
I should not be able to select all three at once.
Screen Shot 2022-07-04 at 6.59.26 PM

The reason why that is happening is because you are using different values for the name attribute.

But all of those name attributes need to have the same value for it to work
You can see how it works in the MDN docs here

Hope that helps!

1 Like
3

thank you for your assistance, much appreciated!!.

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.