Survey Form - Build a Survey Form

Tell us what’s happening:
Everything. has passed except for “Every radio button group should have at least 2 radio buttons.” not quite sure what to add.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
   <meta charset='UTF-8'>
   <title>Kali Sarso</title>
   <link rel="stylesheet" href="styles.css">
  <h1 id="title"> K.H.S</h1>
  <h2> Kali Handyman Services</h2>
  <p id="description"> Please let us know which services you used. Thank you! </p>
  <form id="survey-form"> 
       <label id="name-label" for="name-label"> Enter Your First name: <input type="text" placeholder="First Name" id="name" name="name" required /></label> 
       <label for="last-name-label"> Enter Your Last Name: <input type="text" placeholder="Last Name" id="last-name-label" name="last-name" required /></label>
       <label id="email-label" for="email-label">Enter Your Email Address: <input type="email" placeholder="Enter Email Address" id="email" name="email" required /></label>
       <label id="number-label" for="phone-number-label">Enter Your Phone Number: <input type="phone-number" placeholder="444-404-4040" id="phone-number-label" name="phone-number" min="0000000000" max="9999999999" required /></label>
       <label for="technician">Enter the Technician who Assited you: <input type="text" placeholder="Matt, Mark, Jacob..." id="technician" name="technician" required/></label>
       <label for="number">How many Technicians Assited you? <input type="number" id="number" min="1" max="10" placeholder="0" required/></label>
      <label> Were you satisfied with your service? <select id="dropdown"> 
        <option value="1"> Select one </option>
        <option value="2"> Yes, I was extremely satisfied </option>
        <option value="3"> Yes, it was ok </option>
        <option value="4"> It was ok, could've been better </option>
        <option value="5"> No, Please have someone reach out to me further </option> </select>
        <label> Do you have pictures of the completed work?</label>
        <label for="yes"><input value="yes" type="radio" class="inline" id="no" name="yes" /> Yes </label>
        <label for="no"><input value="no" type="radio" class="inline" id="no" name="no" /> No </label>
        <label for="picture-upload">Upload Picture of completed work (optional) <input id="picture-upload" type="file" name="picture-upload"/>
      <label>Which service was provided?</label>
      <label for="handyman"> <input type="radio" id="radio" class="inline" name="handyman" value="handyman" /> Handyman </label> 
      <label for="Painting"> <input type="radio" id="radio" class="inline" name="painting" value="painting" /> Painting </label>
      <label for="Housekeeping"> <input type="radio" id="housekeeping" class="inline" name="housekeeping" value="housekeeping" /> Housekeeping </label>   
      <label for="describe"> How would you describe your technician? </label>
      <label for="friendly"> <input type="checkbox" value="friendly" class="inline" /> Friendly</label> 
      <label for="knowlegable"> <input type="checkbox" value="knowlegable" class="inline" /> Knowlegable</label>
      <label for="rude"> <input type="checkbox" value="Rude" class="inline" /> Rude</label>
      <label for="arrived"> <input type="checkbox" value="Arrived" class="inline" /> Arrived on time</label>

    <label for="info"> Anything else you would like to add? <textarea id="info" name="info" rows="3" col="30" placeholder="Matt was the best!"></textarea></label>
      <input type="submit" value="submit" id="submit" />
/* file: styles.css */
/* file: styles.css */
body {
 width: 100%;
 background:  #e3f4f0;
 height: 100vh;
 margin: 10px;
 color: #423c3c;
 font-family: Tahoma, sans-serif;

h1, p {
 color: #b6e0a9;
 margin: 20px 10px;
 text-align: center;

form {
 width: 80vw;
 max-width: 500px;
	min-width: 300px;
 margin: 0 auto;
 padding-bottom: 1em;
 background: rgba(192, 47, 47, 0.079)

fieldset {
 border: none;
 padding: 2 rem 0;

label {
 display: block;
 margin: 0.5rem 0;

select {
 margin: 10px 0 0 0;
	width: 100%;
 min-height: 2em;

.inline {
 width: unset;
 margin: 0 0.5em 0 0;
 vertical-align: middle;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

To make a radio button group you must set the name attribute for two or more buttons to be the same value.

so do I add another name attribute to the first label or do I change the name attributes to either yes/no, or all handyman/painting?

The radio buttons are input elements, not labels.

Here’s a reference. (Read the part about making groups)

< <input type="radio"> - HTML: HyperText Markup Language | MDN>

1 Like

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