Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Hi Guys,

Please assist
“Every radio button group should have at least 2 radio buttons.”
I have two radio groups and 3 radio buttons for each group but I kept getting the above error. What do I do?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>OPINION SURVEY</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Honest Opinion Survey</h1>
    <p id="description">I need your honest opinion about me.</p>
    <form id="survey-form">
      <label id="name-label" for="name">Name<input id="name" type="text" placeholder="Enter your name" required></label>
      <label id="email-label" for="email">Email<input id="email" type="email" placeholder="Enter your email" required></label>
      <label id="number-label" for="number">Age (optional)<input id="number" type="number" placeholder="Enter your age" min="12" max="100"></label>
<label for="dropdown">How would you describe my facial outlook?<select id="dropdown">
  <option>Select</option>
  <option>Handsome</option>
  <option>Ugly</option>
  </select>
</label>
<legend>Which of these skills do I have?</legend>
<label for="dancing"><input id="dancing" type="radio" name="dancing" value="dancing">Dancing</label>
<label for="singing"><input id="singing" type="radio" name="singing" value="singing">Singing</label>
<label for="writing"><input id="writing" type="radio" name="writing" value="writing">Writing</label>
<legend>Which do you prefer?</legend>
<label for="my-voice"><input id="my-voice" type="radio" name="my-voice" value="my-voice">My voice</label>
<label for="my-height"><input id="my-height" type="radio" name="my-height" value="my-height">My height</label>
<label for="my-hair"><input id="my-hair" type="radio" name="my-hair" value="my-hair">My hair</label>
<legend>What are my qualities?</legend>
<label for="tall"><input id="tall" type="checkbox" value="tall">Tall</label>
<label for="intelligent"><input id="intelligent" type="checkbox" value="intelligent">Intelligent</label>
<label for="short"><input id="short" type="checkbox" value="short">Short</label>
<label for="kind"><input id="kind" type="checkbox" value="kind">Kind</label>
<label for="lazy"><input id="lazy" type="checkbox" value="Lazy">Lazy</label>
<label for="resourceful"><input id="resourceful" type="checkbox" value="resourceful">Resourceful</label>
<label for="statement">Tell me about me <textarea id="statement" name="statement" rows="6" cols="35" placeholder="Ifeanyi is..."></textarea></label>
<input id="submit" type="Submit">
    </form>
  </body>
</html>


/* file: styles.css */

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

the radio and checkboxes in a group must share the same name attribute, that’s what groups them together

1 Like
3

Thanks. It worked. Thank you for the help.

1 Like