Survey Form - Build a Survey Form Can someone tell me whats wrong with this code for radio buttons

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8"/>
     <title>Survey Form</title>
<link rel="stylesheet" href="styles.css"> 
    </head>
    
    <body>
      <h1 id="title">Survey Form</h1>
      <p id="description">Please and Thank you for be here</p>
     <style style="background-image: url(https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fbackground%2F&psig=AOvVaw0bd6TG3cZIxMM0ZUJqHE68&ust=1690816533274000&source=images&cd=vfe&opi=89978449&ved=0CBEQjRxqFwoTCIDin8fctoADFQAAAAAdAAAAABAJ);"></style>
      <form id="survey-form">
       
         <label id="name-label">Enter your name: <input id="name" type="text" placeholder="name"required/>
         <label id="email-label">Enter your email: <input id=email type="email" placeholder="email" required/></label>
         <label id="number-label">Enter your number:<input id="number" type="number" min="10" max="15" placeholder="number"required/></label>
         <label>What role best describes you?
      <select id="dropdown"> 
           <option>select one role</option>
     
        <option>student</option>
        <option>employed</option>
        <option>unemployed</option>
           <option>other</option>
        </select> 
<label>Would you recommend this website to a friend?
 <input type="radio" name="definitely"value="definitely">Definitely 
<input type="radio" name="maybe" value="maybe">Maybe
<input type="radio" name="not sure" value="not sure">Not sure
</label>
<label>What would you like to see improved? 
  <input type="checkbox" value="The speed"> The speed
  <input type="checkbox" value="The font colour"> The font colour
  <input type="checkbox" value="The background colour"> The background colour
  <input type="checkbox" value="The listings"> The listings
</label>
<lablel>Enter your comments
<textarea>
  Enter your comment here
</textarea></label>
<label>
  <button id="submit" type="submit"> Submit</button>
</label>
      </form>
    </body>
</style>
  </html>

/* file: styles.css */
/*file: styles.css*/
body
{
  width:100%;
  height:100vh;
  margin:0;
  color: purple;
font-family:Tahoma;
font-size:16px;

background-image: url('https://www.freecodecamp.org/news/content/images/size/w2000/2022/09/jonatan-pie-3l3RwQdHRHg-unsplash.jpg');
padding:20px;
}

h1,p{
  margin:1em auto;
  text-align: center;
  background-color:#477485;
  width:60vw;
}
form{
  width:60vw;
  margin:0 auto;
  background-color: #477485;
}
label{
  display:block;
  margin: 10px auto;
  text-align:start;

}

input[type="checkbox"]  {
  display: inline;
}
#submit {
display: block;
width: 30%;
margin: 1em auto;
text-align: center;
background-color:#7AA7B8;
}
textarea{
  background-color: #7AA7B8;
  border: 1px solid black;
  color: black;
padding: 10px 0 10px 0;
width:10%;
}
input,select, textarea {
  background-color:#7AA7B8;
  margin: 10px 0 10px 0;
  width:100%;
  display: block;
 border: 1px solid black;
}

 

input[type="checkbox"] +label {
  display: inline;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Did you notice that your radio buttons are not grouped together, which means that you can select multiple buttons simultaneously? Usually they should be grouped so that you can only select one at a time.

To create a radio button group, simply give them all the same name attribute.

3

thank you so much igorgetmeabrain

4

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