Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

My code run smoothly but it says that my code doesn’t have a name-label, email-label, and number-label. What does it mean and how i can fix it?

Your code so far

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css" />
  <head> 
    <meta charset="UTF-8">
    <title>freeCodeCamp Survey Form</title>
  </head>
  <body>
    <h1 id="title"> freeCodeCamp Survery Form</h1>
    <p id="description"> Thank you for taking the time to help us improve the platform</p>
    <form id="survey-form">
      <fieldset>
        <label for="name"> Name <input placeholder="Who r u?" name="name" id="name" type="text" required></label>
        <label for="email"> Email <input placeholder="Email?" name="email" id="email" type="email" required></label>
        <label for="number"> Age <input placeholder="Age?" name="age" id="number" type="number" required min="17" max="100"></label>
        
        <label for="dropdown"> Which option best describes your current role? 
          <select id="dropdown" required>
            <option value=""> Select  current role</option>
            <option value="student"> Student</option>
            <option value="full-time-job"> Full time Job</option>
            <option value="full-time-learner"> Full time Learner</option>
            <option value="not-to-say"> Prefer not to say</option>
            <option value="other"> Other</option>
          </select>
        </label>
      </fieldset>
      <fieldset class="borders">
        <label> Would you recommend freeCodeCamp to a friend?</label>
        <label><input type="radio" class="inline" checked name="recommend" value="definitely"/>Definitely</label>
        <label><input type="radio" class="inline" name="recommend" value="maybe" />Maybe</label>
        <label><input type="radio" class="inline"name="recommend" value="not-sure" />Not sure</label>
      </fieldset>
      <fieldset>
        <label> What is your favorite feature of freeCodeCamp?</label>
        <select>
          <option> Select an option</option>
          <option value="1">Challenges</option>
          <option value="2">Community</option>
          <option value="3">Projects</option>
          <option value="4">Open Source</option>
        </select>
      </fieldset>
      <fieldset>
        <label> What would you like to see improved? (Check all that apply)</label>
        <label><input value="front-end-projects" class="inline" type="checkbox"/> Front-end projects</label>
        <label><input value="back-end-projects"class="inline" type="checkbox"/> Back-end Projects</label>
        <label><input value="data-visualization" class="inline" type="checkbox"/> Data Visualization</label>
        <label><input value="challenges" class="inline" type="checkbox"/> Challenges</label>
        <label><input value="open-source-community" class="inline" type="checkbox"/> Open Source Community</label>
        <label><input value="gitter-help-rooms" class="inline" type="checkbox"/> Gitter help rooms</label>
        <label><input value="videos" class="inline" type="checkbox"/> Videos</label>
        <label><input value="city-meetups" class="inline" type="checkbox"/> City Meetups</label>
        <label><input value="wiki" class="inline" type="checkbox"/> Wiki</label>
        <label><input value="forum" class="inline" type="checkbox"/> Forum</label>
        <label><input value="additional-courses" class="inline" type="checkbox"> Additional Courses</label>
      </fieldset>
      <fieldset>
        <label for="suggestions">Any comments or suggestions?
          <textarea id="suggestions" name="suggestions" rows="3" cols="30" placeholder="The preview sucks..."></textarea>
        </label>
      </fieldset>
      <input id="submit" type="submit" value="Submit" />
    </form>
  </body>
</html>

For the css

body{
  align: center;
  width: 100%;
  height: 100vh;
  background-color: #a9cce3;
}

h1, p{
  text-align: center;
}

form{
  width: 60vw;
  max-width: 1000px;
  min-width: 600px;
  margin: 0 auto;
  padding-bottom: 2em;
  background-color: #a9cce3; 
}


p{
 /* buat font sakjae */ 
}


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

input, select, textarea{
  display: block;
  width: 100%; 
  height: auto;
  margin: 1rem 0.5rem 2rem 0;
}

input[type="checkbox"]{
  width: unset;
}

textarea{
  height: 20%
}
 input[type="submit"]{
   width: 75%;
   height: 10%;
   margin: auto; 
 }

.inline{
  display: inline;
  width: unset;
  margin: 1rem auto;
}

fieldset{
  border: none;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Look at story no. 10 again.

  1. For the name, email, and number input fields, you can see corresponding label elements in the form, that describe the purpose of each field with the following ids: id="name-label", id="email-label", and id="number-label"

You haven’t put the id attributes on your label elements for the Name, Email and Age parts of the code. as they have requested.

2 Likes
3

so in conclusion, i got this that catch me a bit strange

 <form id="survey-form">
      <fieldset>
        <label for="name"><label class="inline" id="name-label"> Name : </label> <input placeholder="Who r u?" name="name" id="name" type="text" required></label>
        <label for="email"> <label class="inline" id="email-label"> Email :</label> <input placeholder="Email?" name="email" id="email" type="email" required></label>
        <label for="number"> <label class="inline" id="number-label"> Age:  </label><input placeholder="Age?" name="age" id="number" type="number" required min="17" max="100"></label>

but it works i guess

1 Like
4

anyway thx for the reply

1 Like