Survey Form - Build a Survey Form

Tell us what’s happening:

I am unable to pass the test asking for a label element with the id of “email-label”.

Your code so far

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <title>The Penguin Survey</title>
  </head>

  <body>
    <div class="container">
      <header class="header">
        <h1 id="title">The Penguin Survey</h1>
        <p id="description">I am trying to learn coding, so I have to build a survey from scratch. This is it! I hope it works!</p>
      </header>
      <form id="survey-form">
        <div class="form-questions">
          <label id="name-label" for="name">Name</label>
          <input
            type="text"
            name="name"
            id="name"
            class="form-style"
            placeholder="Enter your name"
            required
          />
        </div>
        <div class="form-questions"
          <label id="email-label" for="email">Email</label>
          <input
            type="email"
            name="email"
            id="email"
            class="form-style"
            placeholder="Enter your email"
            required
          />
        </div>
        <div class="form-questions">
          <label id="number-label" for="number">Age <span class="hint">(Not Required)</span></label>
            <input
              type="number"
              name="age"
              id="number"
              class="form-style"
              placeholder="Age"
              min="5"
              max="110"
            />
        </div>
        <div class="form-questions">
          <p>Do you think this survey looks professional?</p>
          <select id="dropdown" name="professionality" class="form-questions" required>
            <option disabled selected value>Select an option</option>
            <option value="yesitdoes">Yes, it does!</option>
            <option value="noitdoesnot">No, it does not.</option>
            <option value="prefernottoanswer">Prefer not to answer...</option>
          </select>
        </div>
        <div class="form-questions">
          <p>Would you like to see more coding content?</p>
          <label>
            <input
              name="seemore"
              value="yespls"
              type="radio"
              class="input-radio"
              checked
              />Yes Please!!</label>
          <label>
            <input
              name="seemore"
              value="maybe"
              type="radio"
              class="input-radio"
              />Maybeeeeeee.....</label>
          <label>
            <input
              name="seemore"
              value="hangitup"
              type="radio"
              class="input-radio"
              />Nah bro, hang it up.</label>
        </div>
        <div class="form-questions">
          <p>What types of penguins do you like?
            <span class="hint">(Click multiple! It's okay!)</span></p>
          <img class="penguinimage" src="https://www.animalspot.net/wp-content/uploads/2019/08/Types-of-Penguins.jpg">
          <label>
            <input
              name="favorites"
              value="emperor"
              type="checkbox"
              class="input-checkbox"
              />Emperor Penguins</label>
          <label>
            <input
              name="favorites"
              value="macaroni"
              type="checkbox"
              class="input-checkbox"
              />Macaroni Penguins</label>
          <label>
            <input
              name="favorites"
              value="african"
              type="checkbox"
              class="input-checkbox"
              />African Penguins</label>
          <label>
            <input
              name="favorites"
              value="chinstrap"
              type="checkbox"
              class="input-checkbox"
              />Chinstrap Penguins</label>
          <label>
            <input
              name="favorites"
              value="rockhopper"
              type="checkbox"
              class="input-checkbox"
              />Rockhopper Penguins</label>  
          <label>
            <input
              name="favorites"
              value="other"
              type="checkbox"
              class="input-checkbox"
              />Other</label>
        </div>
        <div class="form-questions">
          <p>What is your favorite thing about penguins?</p>
          <textarea
            id="whatilike"
            class="input-textarea"
            name="myfavthing"
            placeholder="My favorite thing about penguins is that they are very cute.">
          </textarea>
        </div>
        <div class="form-questions">
          <button type="submit" id="submit" class="submit-button">
            Submit
          </button>
        </div>
      </form>
    </div>
  </body>
</html>

Console output:
// running tests You should have a

label

element with an

id

of

email-label

. // tests completed
Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

I’d look at the opening div tag just above the label.

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