Survey Form - Build a Survey Form

HTML-CSS
1

Hi, all

My code works fine, but I’m getting the following errors in the survey form task and am not sure why. Any help would be great, thanks!

  • Failed: Your #name-label should contain text that describes the input.

  • Failed: Your #email-label should contain text that describes the input.

  • Failed: Your #number-label should contain text that describes the input.


<link rel="stylesheet" href="styles.css">
<div class="container">
 <header class="header">
   <h1 id="title" class="text-center">Oxford International Survey Form </h1>
   <p id="description" class="description text-center">Thank you for particpating in this survey to improve our school.</p>
 </header>
 <form id="survey-form">
   <div class="form-group">
     <p>Name</p>
     <label id="name-label" for="name">
     <input id="name"
            name="name-label"
            type="text"
            placeholder="Enter your name"
            class="form-control"
            required
            >
   </div>
   <div class="form-group">
     <p>Email</p>
      <label id="email-label" for="email" name="name">
      <input
        type="email"
        name="email"
        id="email"
        class="form-control"
        placeholder="Enter your Email"
        required
      >
    </div>
    <div class="form-group">
      <p>Age (optional)</p>
      <label id="number-label" for="number">
      <input
        type="number"
        name="age"
        id="number"
        min="10"
        max="99"
        class="form-control"
        placeholder="Age"
      >
    </div>
    <div class="form-group">
      <p>Which best describes your current English ability?</p>
      <select id="dropdown" name="ability" class="form-control" required>
      <option disabled selected value>Select one option</option>
      <option value="beginner">Beginner: I can only understand basic things</option>
      <option value="lowint">Intermediate: I can communicate in everyday situations</option>
      <option value="upint">High-Intermediate: I can join in discussions about various topics</option> 
      <option value="advanced">Advanced: I can express and evaluate complex ideas</option>
      <option value="preferNo">I prefer not to say</option>
      </select>
    </div>
   <div class="form-group">
     <p>Would you recommend our school to a friend?</p>
    <input
          name="user-recommend"
          value="definitely"
          type="radio"
          class="input-radio"
          checked>Definitely</label>
      <input
          name="user-recommend"
          value="maybe"
          type="radio"
          class="input-radio">Maybe</label>
     <input
          name="user-recommend"
          value="not-sure"
          type="radio"
          class="input-radio">Not Sure</label>
   </div>
     <div class="form-group">
       <p>What do you like best about our school?</p>
       <select name="likebest" id="mostlike" class="form-control" required>
         <option disabled selected value>Select one</option>
         <option value "teachers">Teachers and staff</option>
         <option value "activities">School activities</option>
         <option value "atmosphere">Fun atmosphere</option>
         <option value "progress">Learning progress</option>
         <option value "all">All of the above</option>
       </select>
   </div>
       <div class="form-group">
       <p>What do you want to be improved at the school?
         (Check all that apply)</p>
    
        <label
        ><input
          name="prefer"
          value="lessons-teaching"
          type="checkbox"
          class="input-checkbox"
        />Lessons and teaching</label>
         <label>
           <input
          name="prefer"
          value="e-learning"
          type="checkbox"
          class="input-checkbox"
        />e-learning</label>
         <label>
         <input
          name="prefer"
          value="group-activities"
          type="checkbox"
          class="input-checkbox"
        />Group activites</label>
        <label>
   <input
          name="prefer"
          value="homestay"
          type="checkbox"
          class="input-checkbox"
        />Homestay</label>
         <label>
  <input
          name="prefer"
          value="class-size"
          type="checkbox"
          class="input-checkbox"
        />Class sizes</label>
       <label>
<input
          name="prefer"
          value="student-lounge"
          type="checkbox"
          class="input-checkbox"
        />Student lounge</label>
         <label>
<input
          name="prefer"
          value="classtimes"
          type="checkbox"
          class="input-checkbox"
        />Class schedule</label>
         <label>
<input
          name="prefer"
          value="learning-center"
          type="checkbox"
          class="input-checkbox"
        />Learning center</label>
    </div>

    <div class="form-group">
      <p>Any additional comments or suggestions?</p>
      <textarea 
       class="input-areatext"
       name="comment"
       id= "input-textarea"
       placeholder="Enter your comments here...">
      </textarea>
     </div>
     <div class="form-group">
      <button id="submit" type="submit" class="submit-button">Submit
      </button>
      </div>
</form>
</div>

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

My apologies, there was an error loading the code. Here it is:

<link rel="stylesheet" href="styles.css">
<div class="container">
 <header class="header">
   <h1 id="title" class="text-center">Oxford International Survey Form </h1>
   <p id="description" class="description text-center">Thank you for particpating in this survey to improve our school.</p>
 </header>
 <form id="survey-form">
   <div class="form-group">
     <p>Name</p>
     <label id="name-label" for="name">
     <input id="name"
            name="name-label"
            type="text"
            placeholder="Enter your name"
            class="form-control"
            required
            >
   </div>
   <div class="form-group">
     <p>Email</p>
      <label id="email-label" for="email" name="name">
      <input
        type="email"
        name="email"
        id="email"
        class="form-control"
        placeholder="Enter your Email"
        required
      >
    </div>
    <div class="form-group">
      <p>Age (optional)</p>
      <label id="number-label" for="number">
      <input
        type="number"
        name="age"
        id="number"
        min="10"
        max="99"
        class="form-control"
        placeholder="Age"
      >
    </div>
    <div class="form-group">
      <p>Which best describes your current English ability?</p>
      <select id="dropdown" name="ability" class="form-control" required>
      <option disabled selected value>Select one option</option>
      <option value="beginner">Beginner: I can only understand basic things</option>
      <option value="lowint">Intermediate: I can communicate in everyday situations</option>
      <option value="upint">High-Intermediate: I can join in discussions about various topics</option> 
      <option value="advanced">Advanced: I can express and evaluate complex ideas</option>
      <option value="preferNo">I prefer not to say</option>
      </select>
    </div>
   <div class="form-group">
     <p>Would you recommend our school to a friend?</p>
    <input
          name="user-recommend"
          value="definitely"
          type="radio"
          class="input-radio"
          checked>Definitely</label>
      <input
          name="user-recommend"
          value="maybe"
          type="radio"
          class="input-radio">Maybe</label>
     <input
          name="user-recommend"
          value="not-sure"
          type="radio"
          class="input-radio">Not Sure</label>
   </div>
     <div class="form-group">
       <p>What do you like best about our school?</p>
       <select name="likebest" id="mostlike" class="form-control" required>
         <option disabled selected value>Select one</option>
         <option value "teachers">Teachers and staff</option>
         <option value "activities">School activities</option>
         <option value "atmosphere">Fun atmosphere</option>
         <option value "progress">Learning progress</option>
         <option value "all">All of the above</option>
       </select>
   </div>
       <div class="form-group">
       <p>What do you want to be improved at the school?
         (Check all that apply)</p>
    
        <label
        ><input
          name="prefer"
          value="lessons-teaching"
          type="checkbox"
          class="input-checkbox"
        />Lessons and teaching</label>
         <label>
           <input
          name="prefer"
          value="e-learning"
          type="checkbox"
          class="input-checkbox"
        />e-learning</label>
         <label>
         <input
          name="prefer"
          value="group-activities"
          type="checkbox"
          class="input-checkbox"
        />Group activites</label>
        <label>
   <input
          name="prefer"
          value="homestay"
          type="checkbox"
          class="input-checkbox"
        />Homestay</label>
         <label>
  <input
          name="prefer"
          value="class-size"
          type="checkbox"
          class="input-checkbox"
        />Class sizes</label>
       <label>
<input
          name="prefer"
          value="student-lounge"
          type="checkbox"
          class="input-checkbox"
        />Student lounge</label>
         <label>
<input
          name="prefer"
          value="classtimes"
          type="checkbox"
          class="input-checkbox"
        />Class schedule</label>
         <label>
<input
          name="prefer"
          value="learning-center"
          type="checkbox"
          class="input-checkbox"
        />Learning center</label>
    </div>

    <div class="form-group">
      <p>Any additional comments or suggestions?</p>
      <textarea 
       class="input-areatext"
       name="comment"
       id= "input-textarea"
       placeholder="Enter your comments here...">
      </textarea>
     </div>
     <div class="form-group">
      <button id="submit" type="submit" class="submit-button">Submit
      </button>
      </div>
</form>
</div>
3

Hi @pgorman122. You may already know that hashtags (#) denotes IDs in HTML. The tests are failing because there are no name-label, email-label, number-label ID in your code. Try adding the appropriate IDs inside each of the label elements.

4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

Thanks, I will do this from now on. Thanks for helping me with that.

6

Sorry farhanhasin, but I thought I did add those ids.

Is this not the proper ID ?

7

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