Survey Form - Build a Survey Form

HTML-CSS
1

I alrady have at least 2 radio buttons on each group.

  1. Every radio button group should have at least 2 radio buttons.
    warning won’t go away. How to solve?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
 <meta charset="UTF-8">
 <title>Survey</title>
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <h1 id="title">Survey</h1>
   <p id="description">We hope we can improve our services with this survey</p>
   <form id="survey-form" action=" https://survey-form.unilorin.ng">
   <fieldset>
     <label id="name-label" for="name">Name<input id="name" name="name" type="text" placeholder="Enter your name" required /></label>
     <label id="email-label" for="email">Email<input id="email" name="email" type="email" placeholder="Enter your email" required /></label>
    <label id="number-label" for="age">Age<input id="number" name="age" type="number" pattern="[0-9]" min="15" max="100" placeholder="Age" /></label>
    </fieldset>
    <fieldset>
      <label id="dropdown-label"for="dropdown">What is your job?
      <select id="dropdown">
        <option value="">(select one)</option>
        <option value="1">Doctor</option>
        <option value="2">Engineer</option>
        <option value="3">Teacher</option>
        <option value="4">Content Creator</option>
        <option value="5">Firefighter</option>
        <option value="6">Police</option>
        <option value="7">Manager</option>
        <option value="8">Others...</option>
        <option value="9">Jobless</option>
      </select>
      </label>
</fieldset>
<fieldset>
        <legend id="radio-legend">How would you rate our services?</legend>
        <label for="rating"><input id="fantastic" type="radio" name="fantastic" value="fantastic" class="inline" checked/>Fantastic</label>
        <label for="rating"><input id="good" type="radio" name="good" value="good" class="inline" />Good</label>
        <label for="rating"><input id="could-be-better" type="radio" name="could-be-better" value="could-be-better" class="inline" />Could be better</label>
        <label for="rating"><input id="not-good" type="radio" name="not-good" value="not-good" class="inline" />Not good</label>
        <label for="rating"><input id="bad" type="radio" name="bad" value="bad" class="inline" />Bad</label>
        </fieldset>
        <fieldset>
          <legend id="improvement-legend">What Would you like to see improvement on?</legend>
          <label for="improvement"><input id="phone-operator" type="checkbox" value="phone-operator" name="phone-operator" class="inline"/>Phone Operator</label>
          <label for="improvement"><input id="working-hours" type="checkbox" value="working-hours" name="working-hours" class="inline"/>Working Hours</label>
          <label for="improvement"><input id="phone-operator" type="checkbox" value="phone-operator" name="phone-operator" class="inline"/></label>
          <label for="improvement"><input id="phone-operator" type="checkbox" value="phone-operator" name="phone-operator" class="inline"/></label>
          <label for="improvement"><input id="phone-operator" type="checkbox" value="phone-operator" name="phone-operator" class="inline"/></label>
          <label for="improvement"><input id="phone-operator" type="checkbox" value="phone-operator" name="phone-operator" class="inline"/></label>
          </fieldset>
          
    </form>
    </body>
    </html>

/* file: styles.css */
body { 
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #f5e8e1;
  color: #b7917b;
  font-family: verdana;
  font-size: 16px;
}
h1, p { 
  margin: 1em auto;
  text-align: center
}
form { 
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}
fieldset { 
border: none;
padding:  2rem 0;
border-bottom: 2px solid #dcc3b4;
}
fieldset:last-of-type {
  border-bottom: none;
}
label{ 
  display: block;
  margin: 1rem 0;
}
input, textarea, select { 
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}
input, textarea, select {
  background-color: #dcc3b4;
  border: 1px solid #bc8a6c;
  color: #ffffff;
}

.inline { 
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}
input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #dcc3b4;
  border-color: white;
  min-width: 300px;
}
#dropdown-label {
  text-align: center;
}
#dropdown {
  width: 100%;
  text-align: center;
  font-family: verdana;
  color: #bc8a6c; 
}
#radio-legend {
  text-align: center;  
}
#improvement-legend {
  text-align: center;
}

also the checkbox is intended to be like that, by me.

2

Hi,
If you take a closer look, you can see that your label elements aren’t connected to the radio buttons. Your inputs have different ids but your labels all have the same for attribute. But what causes the error is the name attribute inside your radio inputs. Think of radio buttons like the choices in a multiple-choice question where only one choice is correct, so you can only select one at a time and that’s what makes it different than a checkbox. Now for that to happen, all the radio inputs should have the same name attribute so no matter which one u choose, it’s gonna be one value stored at the end of the submission.
I hope this helps and if you didnt understand, feel free to ask!

2 Likes
3 
<fieldset>
        <legend id="radio-legend">How would you rate our services?</legend>
        <label for="rating"><input id="rating" type="radio" name="name" value="fantastic" class="inline" checked/>Fantastic</label>
        <label for="rating"><input id="rating" type="radio" name="name" value="good" class="inline" />Good</label>
        <label for="rating"><input id="rating" type="radio" name="name" value="could-be-better" class="inline" />Could be better</label>
        <label for="rating"><input id="rating" type="radio" name="name" value="not-good" class="inline" />Not good</label>
        <label for="rating"><input id="rating" type="radio" name="name" value="bad" class="inline" />Bad</label>
        </fieldset>

so the id is same and the name is same? like this?

4

Hi there. The id attribute value must be unique for each html element. You can’t add same id value to another element.

You used the id attribute value rating for more than one elements.

5 
<fieldset>
        <legend id="radio-legend">How would you rate our services?</legend>
        <label for="rating"><input id="fantastic" type="radio" name="name" value="fantastic" class="inline" checked/>Fantastic</label>
        <label for="rating"><input id="good" type="radio" name="name" value="good" class="inline" />Good</label>
        <label for="rating"><input id="could-be-better" type="radio" name="name" value="could-be-better" class="inline" />Could be better</label>
        <label for="rating"><input id="not-good" type="radio" name="name" value="not-good" class="inline" />Not good</label>
        <label for="rating"><input id="bad" type="radio" name="name" value="bad" class="inline" />Bad</label>
        </fieldset>

so it’s supposed to be like this

6

Yes, that it. Now use the same id attribute value to the appropriate for attribute respectively.

7

Thanks for your help!

2 Likes